매일 조금씩

01/15 - jQuery UI(2) : 사용법, jQuery UI로 model2 게시판 구현하기 본문

빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정

01/15 - jQuery UI(2) : 사용법, jQuery UI로 model2 게시판 구현하기

mezo 2021. 1. 31. 22:00
728x90
반응형

 

jQuery ui

 

 

 

실습1) 어제꺼에 이어서 다양한 디자인

1. datepicker   -  datepicker()

> ex15.jsp

다음과 같이 html5에서 제공하는 달력도 있다. (구버전의 브라우저에선 실행 안된다.)

jQuery UI 에도 있다. 

 

"popup "

input type="text"   -  입력란을 클릭했을 때 나옴

 

"inline"

div처럼 화면에 나와있음 

 

 

가장 기본적인 형태의  datepicker는 다음과 같다.

$( "#datepicker" ).datepicker();
<p>Date: <input type="text" id="datepicker" size="30"></p>

 

 

이를 활용해 여러가지 속성으로 다양하게 표현할 수 있다.

"dateformat"

$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );

이렇게 해서 날짜 출력값 형태도 지정할 수 있다.

 

"showAnim"으로 애니메이션 효과주기도 가능하다.

$('#datepicker1').datepicker({
    dateFormat : 'yy-mm-dd',
    showAnim: 'bounce'
});

통통 튀면서 나온다.

 

"numberOfMonths"로 달력에서 몇개월을 보여줄지 지정가능. (항공사에서 많이씀)

$('#datepicker1').datepicker({
    // 달 몇개 보여줄건지(항공사에서 많이 씀)
    numberOfMonths: 3,
    dateFormat : 'yy-mm-dd',
    //showAnim: 'bounce'
});

 

"showButtonPanel"로 닫기버튼 나오게 설정가능

$('#datepicker1').datepicker({
    // 달 몇개 보여줄건지(항공사에서 많이 씀)
    numberOfMonths: 3,
    dateFormat : 'yy-mm-dd',
    //showAnim: 'bounce'
    showButtonPanel: true
});
<div>
	<!-- popup -->
	<input type="text" id="datepicker1" readonly="readonly" />
</div>

 

 

$( "#format" ).on( "change", function() {
    //"option"의 "dateFormat"을 $ ( this ).val()로 변경
    $( "#datepicker" ).datepicker( "dateFormat", $( this ).val() );
});
<p>Format options:<br>
  <select id="format">
    <option value="mm/dd/yy">Default - mm/dd/yy</option>
    <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
    <option value="d M, y">Short - d M, y</option>
    <option value="d MM, y">Medium - d MM, y</option>
    <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
    <option value="&apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy">With text - &apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy</option>
  </select>
</p>

 

 

 

2. dialog

> ex16.jsp

작은 창을 띄우는 거다. 방법은 jQuery, open window 두가지가 있는데 이 두가지를 다 알아야한다.

 

1) open window로 구현

$(document).ready(function(){
    // open window로 만들기 
    $('#btn1').button().on('click', function(){
        // window.open / open
        // login창이 이런식 ..
        open('https://m.daum.net','winopen','width=640,height=960');
    });
});

2) jQuery로 구현

modal()기능은 자식창이열렸을 때 부모창 쪽을 동작못하게 조절하는 역할을 한다.

  • modal :  true를 하면 자식창이 열렸을 때 뒤쪽이 아무것도 못하게 설정된다.

 

  • resizable :  창 크기 조절 가능/불가능 -  true/false 
  • buttons : 창에 취소, 확인 버튼 나오게 
buttons: {
    '취소': function(){
        alert('취소');
        $(this).dialog('close');
    },
    '확인': function(){
        alert('확인');
        $(this).dialog('close');
    }
}

창닫는 코드 $(this).dialog('close'); 꼭 넣어줘야함

 

  • show, hide: 창 열리고 닫힐 때 효과 줄수 있음
show: {
    effect: 'blind',
    duration: 1000
},
hide: {
    effect:'explode',
    duration: 1000
}

 

이 dialog가지고 뭘할수 있겟나?!  게시판!

 

 

3. dialog로 게시판창 같은거 만들기 - dialog 활용

> ex17.jsp

1) css먼저 jQueryui.com에서 복사

2) 부모창 html복사

3) 자식창 html복사

4) jQuery 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body{ font-size:80%; }
	label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		let i=0;
		$('#dialog-form').dialog({
			autoOpen: false,
			modal: true,
			width: 350,
			height: 300,
			buttons: {
				'취소': function(){
					$(this).dialog('close');
				},
				'추가': function(){
					let html='<tr>';
					html += '<td>' + $('#name').val() + '</td>';
					html += '<td>' + $('#email').val() + '</td>';
					html += '<td>' + $('#password').val() + '</td>';
					html += '<td>';
					html += '	<button index="'+ i +'">삭제</button>';
					html += '</td>';
					html += '</tr>';
					
					$('#users tbody').append(html);
					
					$('button[index="'+ i +'"]').button().on('click',function(){
						console.log($(this).attr('index'));
					});
					
					$(this).dialog('close');
				}
			}
		});
		
		$('#create-user').button().on('click', function(){
			$('#dialog-form').dialog('open');
		});
		
	});
</script>
</head>
<body>


<div id="users-contain" class="ui-widget">
  <h1>Existing Users:</h1>
  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th>Name</th>
        <th>Email</th>
        <th>Password</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>
<button id="create-user">Create new user</button>

<div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>
 
  <form>
    <fieldset>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
      <label for="email">Email</label>
      <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
      <label for="password">Password</label>
      <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
 
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

</body>
</html>

 

 

자식창에서 입력한걸 부모창에 반영한다.

부모창에서 삭제버튼을 누르면 해당 행이 사라진다.

 

 

4. menu 

> ex18.jsp

ui-menu라고 내부적으로 클래스명이있어서 style에서 .ui-menu로 해서 적어주면된다.

 class="ui-state-disabled" 하면 선택 못하는 걸로 알아서 됨

$(document).ready(function(){
    $('#menu1').menu();
    $('#menu2').menu();
});
<ul id="menu1">
  <li><div class="ui-state-disabled">Toys (n/a)</div></li>
  <li><div>Books</div></li>
  <li><div>Clothing</div></li>
  <li><div>Electronics</div>
    <ul>
      <li><div>Home Entertainment</div></li>
      <li><div>Car Hifi</div></li>
      <li><div>Utilities</div></li>
    </ul>
  </li>
  <li><div>Movies</div></li>
  <li><div>Music</div>
    <ul>
      <li><div>Rock</div>
        <ul>
          <li><div>Alternative</div></li>
          <li><div>Classic</div></li>
        </ul>
      </li>
      <li><div>Jazz</div>
        <ul>
          <li><div>Freejazz</div></li>
          <li><div>Big Band</div></li>
          <li><div>Modern</div></li>
        </ul>
      </li>
      <li><div>Pop</div></li>
    </ul>
  </li>
  <li><div class="ui-state-disabled">Specials (n/a)</div></li>
</ul>

 

 

아이콘이 들어간 메뉴

<ui id="menu2">
	<li>
		<div><span class="ui-icon ui-icon-disk"></span>Save</div>
	</li>
	<li>
		<div><span class="ui-icon ui-icon-zoomin"></span>Zoom In</div>
	</li>
	<li>
		<div><span class="ui-icon ui-icon-zoomout"></span>Zoom Out</div>
	</li>
	<li class="ui-state-disabled">
		<div><span class="ui-icon ui-icon-print"></span>Print...</div>
	</li>
	<li>
		<div>Playback</div>
		<ul>
			<li>
				<div><span class="ui-icon ui-icon-seek-start"></span>Prev</div>
			</li>
			<li>
				<div><span class="ui-icon ui-icon-stop"></span>Stop</div>
			</li>
			<li>
				<div><span class="ui-icon ui-icon-play"></span>Play</div>
			</li>
			<li>
				<div><span class="ui-icon ui-icon-seek-end"></span>Next</div>
			</li>
		</ul>
	</li>
	<li>
    	<div>Learn more about this menu</div>
  	</li>
</ui>

 

 

5. tab

> ex19.jsp 

탭버튼에 <a href="#xx"  />로  보여줄 태그의 id를 넣어주면 된다.

이것도 메뉴랑 마찬가지로 내부적으로 ui-tabs라는 클래스명이 있다.

 

tab 추가

$('#tabs').tabs('refresh');

이걸 해줘야 css가 먹는다.

<button id="btn">추가</button>
<br /><hr /><br />

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>

$(document).ready(function(){
    $('#tabs').tabs();

    $('#btn').button().on('click',function(){
        // li
        $('#tabs').tabs().find('.ui-tabs-nav').append('<li><a href="#tabs-4">etc</a></li>');
        // div
        $('#tabs').tabs().append('<div id="tabs-4"><p>내용 구문</p></div>');
        $('#tabs').tabs('refresh');
    });
});

 

 

응용실습) 구구단 출력 tab 만들기

> gugudanTabs.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body{ font-size:80%; }
	.ui-tabs{ width: 80%; }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#btn1').button().on('click', function(){
			let tnav = '';
			for(let i=1; i<=9; i++){
				tnav += '<li><a href="#tabs-' + i + '">' + i +'단</a></li>';
			}
			
			$('#tabs').tabs().find('.ui-tabs-nav').append(tnav);
			
			let html = '';
			for(let d=1; d<=9; d++){
				html += '<div id="tabs-'+ d +'">';
				for(let i=1; i<=9; i++){
					html += '<p>'+ d + 'X' + i + ' = ' + (d*i) + '</p>';
				}
				html += '</div>';
			}
			$('#tabs').tabs().append(html);
			$('#tabs').tabs('refresh');
			
		});
	});
</script>
</head>
<body>

<button id="btn1">구구단 보이기</button>
<br /><hr /><br />
<div id="tabs">
	<ul>
	</ul>
</div>

</body>
</html>

 

 

6. tooltip

> ex20.jsp

a태그의 title을 잘봐둬야한다.

$(document).ready(function() {
  $(document).tooltip()
  //$('p').tooltip(); //이게 귀찮으면 위처럼 document에 걸어도된다.
});

$( function() {
  var tooltips = $( "[title]" ).tooltip({
    position: {
      my: "left top",
      at: "right+5 top-5",
      collision: "none"
    }
  });
  $( "<button>" )
    .text( "Show help" )
    .button()
    .on( "click", function() {
      tooltips.tooltip( "open" );
    })
    .insertAfter( "form" );
} );
<p>
    <a href="#" title="That&apos;s what this widget is">Tooltips</a> can
    be attached to any element. When you hover the element with your
    mouse, the title attribute is displayed in a little box next to the
    element, just like a native tooltip.
</p>
<p>
    But as it&apos;s not a native tooltip, it can be styled. Any themes
    built with <a href="http://jqueryui.com/themeroller/"
        title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a>
    will also style tooltips accordingly.
</p>
<p>Tooltips are also useful for form elements, to show some
    additional information in the context of each field.</p>
<p>
    <label for="age">Your age:</label><input id="age"
        title="We ask for your age only for statistical purposes.">
</p>
<p>Hover the field to see the tooltip.</p>

<br />

<!-- Forms -->
<form>
    <fieldset>
        <div>
            <label for="firstname">Firstname</label> <input id="firstname"
                name="firstname" title="Please provide your firstname.">
        </div>
        <div>
            <label for="lastname">Lastname</label> <input id="lastname"
                name="lastname" title="Please provide also your lastname.">
        </div>
        <div>
            <label for="address">Address</label> <input id="address"
                name="address" title="Your home or work address.">
        </div>
    </fieldset>
</form>

 

 

 

 

그럼이제

jQuery로 게시판 만들어볼거다!

 

 

응용실습) jQuery UI로 model2 게시판 만들기

> Model2Ex02

 

1. Model2로 만들어진 페이징이랑 그런거 아무것도 없는 기본 게시판 가져오기

(파라메터 방식이랑 url방식중 *.do로 했던 url 방식을 가져와라!)

 

 

2. css, js 폴더 가져와서 WebContent에 넣기

 

3. WebContent에 board_ui.jsp 만들어서 강사님이 주신 코드 붙여넣기 

페이지를 전부 따로 안만들었고 한페이지에 코드를 길게 해서 디자인을 다 만들어놓았다.

 

4. refresh로 안된다. ajax로 해야한다.

 

5. controller에서 *.do에다가 *.json을 추가한다.

if문전체를 복사해서 json에 관한것으로 고쳐서 기존 if문의 끝에 else if로 붙인다.

controller를 하나더 만들어도 되는데 그냥 같이 해준거다.

 

6. 페이지 jsp파일이 담긴 폴더를 복사해서 json폴더를 만들어서 넣는다.

 

7. json 라이브러리를 lib폴더에 넣는다.

 

8. json > board_list1.jsp 수정

import 두개 해줌 다이렉티브에 type="text/json"으로 변경하고 공백없애는 것도 추가 

 

> board_ui1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/cupertino/jquery-ui.css">
<style type="text/css">
	body { font-size: 70%; }
	
	#accordion > div > div:last-child { text-align: right; }
	#accordion-resizer {
		margin: 0 60px;
		max-width: 1500px;
	}
	#btngroup {
		text-align: right;
	}
	#btngroup button {
	margin: 3px;
		padding: 3px;
		width: 100px;
	}
	label.header {
		font-size: 10pt;
		margin-right: 5px;
	}
	input.text {
		width: 80%;
		margin-bottom: 12px;
		padding: 0.4em;
	}
	input.mail {
		width: 35%;
		margin-bottom: 12px;
		padding: 0.4em;
	}
	fieldset {
		margin-left: 15px;
		margin-top: 15px;
		border: 0;
	}
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		$( '#writeDialog' ).css( 'display', 'none' );
		$( '#modifyDialog' ).css( 'display', 'none' );
		$( '#deleteDialog' ).css( 'display', 'none' );
	
		
		// 선언부
		
		const readServer = function() {
			$( '#accordion' ).accordion({
				collapsible: 'true',
				heightStyle: 'content'
			});
			$( 'button.action' ).button();
			
			$.ajax({
				url:'list.json',
				type: 'get',
				dataType: 'json',
				success: function(json){
					$('#accordion').empty(); //기존데이터 삭제
					
					$.each(json.data, function(index, item){
						let title = '<h3>'+ item.seq +' : '+ item.writer +'('+ item.hit +') new</h3>';
						let html = '<div>';
						html +=	'<div>'+ item.wdate +'</div>';
						html +=	'<div>'+ item.subject +'</div>';
						html +=	'<br />';
						html +=	'<hr noshade="noshade" />';
						html +=	'<div>'+ item.content +'</div>';
						html +=	'<br />';
						html +=	'<hr noshade="noshade" />';
						html +=	'<br />';
						html +=	'<div>';
						html +=	'	<button idx="'+ item.seq +'" action="modify" class="action">수정</button>';
						html +=	'	<button idx="'+ item.seq +'" action="delete" class="action">삭제</button>';
						html +=	'</div>';       
						html +=	'</div>';
						let content = $('<div></div>').html(html);
						
						$('#accordion').append(title);
						$('#accordion').append(content);
						
					});
					$('#accordion').accordion('refresh');
					
					// 이거해줘야 버튼 모양 디자인이 먹음
					$('button.action').button();
				},
				error: function(){
					alert('서버에러');
				}
			});
			
		};
		
		const writeServer = function(){
			$.ajax({
				url: 'write_ok.json',
				type: 'get',
				data:{
					subject: $('#w_subject').val(),
					writer: $('#w_writer').val(),
					mail1: $('#w_mail1').val(),
					mail2: $('#w_mail2').val(),
					password: $('#w_password').val(),
					content: $('#w_content').val()
				},
				dataType: 'json',
				success: function(json){
					if(json.flag == 0){
						alert('글쓰기 성공');
						$('#writeDialog').dialog('close');
						readServer();
					}
				},
				error: function(){
					alert('서버 에러');
				}
			})
		};
		
		const modifyServer = function(seq){
			
			$.ajax({
				url: 'modify.json',
				type: 'get',
				data: {
					seq : seq
				},
				dataType: 'json',
				success: function(json){
					let subject = json.subject;
					let writer = json.writer;
					let mail1 = json.mail1;
					let mail2 = json.mail2;
					let content = json.content;
					
					$('#m_subject').val(subject);
					$('#m_writer').val(writer);
					$('#m_mail1').val(mail1);
					$('#m_mail2').val(mail2);
					$('#m_content').val(content);
				},
				error: function(){
					alert('서버에러');
				}
			});
		};
		
		const modifyOkServer = function(seq){
			$.ajax({
				url: 'modify_ok.json',
				type: 'get',
				data:{
					seq: seq,
					subject: $('#m_subject').val(),
					writer: $('#m_writer').val(),
					mail1: $('#m_mail1').val(),
					mail2: $('#m_mail2').val(),
					password: $('#m_password').val(),
					content: $('#m_content').val()
				},
				dataType: 'json',
				success: function(json){
					if(json.flag == 0){
						alert('글수정 성공');
						$('#modifyDialog').dialog('close');
						$('#accordion').accordion('refresh');
						readServer();
					}else if(json.flag == 1){
						alert('비밀번호 오류');
					}else{
						alert('글쓰기 실패');
					}
				},
				error: function(json){
					alert('서버에러');
				}
			})
		};
		
		const deleteServer = function(seq){
			
			$.ajax({
				url: 'delete.json',
				type: 'get',
				data: {
					seq : seq
				},
				dataType: 'json',
				success: function(json){
					let subject = json.subject;
					$('#d_subject').val(subject);
				},
				error: function(){
					alert('서버에러');
				}
			});
		};
		
		const deleteOkServer = function(seq){
			
			$.ajax({
				url: 'delete_ok.json',
				type: 'get',
				data: {
					seq : seq,
					password: $('#d_password').val()
				},
				dataType: 'json',
				success: function(json){
					if(json.flag == 0){
						alert('글삭제 성공');
						$('#deleteDialog').dialog('close');
						$('#accordion').accordion('refresh');
						readServer();
					}else if(json.flag == 1){
						alert('비밀번호 오류');
					}else{
						alert('글삭제 실패');
					}
				},
				error: function(){
					alert('서버에러');
				}
			});
		};
		
		
		
		// 실행부
		
		readServer();
		
		$( document ).on( 'click', 'button.action', function() {
			if( $( this).attr( 'action' ) == 'write' ) {
				$( '#writeDialog' ).dialog ({
					width: 700,
					height: 500,
					modal: true,
					buttons: {
						'글쓰기': function() {
							//$( this ).dialog( 'close' );
							writeServer();
						},
						'취소': function() {
							$( this ).dialog( 'close' );
						}
					},
					close: function() {
					}
				});
			} else if( $( this ).attr( 'action' ) == 'modify' ) {
				const seq = $( this ).attr( 'idx' );
				
				modifyServer(seq);
				
				$( '#modifyDialog' ).dialog({
					width: 700,
					height: 500, 
					modal: true,
					buttons: {
						'수정': function() {
							modifyOkServer(seq);
							//$( this ).dialog( 'close' );
						},
						'취소': function() {
							$( this ).dialog( 'close' );
						}
					},
					close: function() {
					}
				});
				
			} else if( $( this ).attr( 'action' ) == 'delete' ) {
				const seq = $(this).attr('idx');
				deleteServer(seq);
				$( '#deleteDialog' ).dialog({
					width: 700,
					height: 200,
					modal: true,
					buttons: {
						'삭제': function() {
							deleteOkServer(seq);
							//$( this ).dialog( 'close' );
						},
						'취소': function() {
							$( this ).dialog( 'close' );
						}
					},
					close: function() {
					}
				});
			} else {
			}
		});
	});
</script>
</head>
<body>
<div id="accordion-resizer">
	<hr noshade="noshade" />
	<div id="accordion">
	</div>
	<hr noshade="noshade" />
	<div id="btngroup">
		<button action="write" class="action">글쓰기</button>
	</div>
</div>
<div id="writeDialog" title="글쓰기">   
	<fieldset>
		<div>
			<label for="subject" class="header">제&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;목</label>
			<input type="text" id="w_subject" class="text ui-widget-content ui-corner-all"/>
		</div>
		<div>
			<label for="writer" class="header">이&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;름</label>
			<input type="text" id="w_writer" class="text ui-widget-content ui-corner-all"/>
		</div>
		<div>
			<label for="mail" class="header">메&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;일</label>
			<input type="text" id="w_mail1" class="mail ui-widget-content ui-corner-all"/>
			@
			<input type="text" id="w_mail2" class="mail ui-widget-content ui-corner-all"/>
		</div>
		<div>
			<label for="password" class="header">비밀&nbsp;번호</label>
			<input type="password" id="w_password" class="text ui-widget-content ui-corner-all"/>
		</div>
		<div>
			<label for="content" class="header">본&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;문</label>
			<br /><br />
			<textarea rows="15" cols="100" id="w_content" class="text ui-widget-content ui-corner-all"></textarea>
		</div>
	</fieldset>
</div>
<div id="modifyDialog" title="글수정">   
	<fieldset>
		<div>
			<label for="subject" class="header">제&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;목</label>
			<input type="text" id="m_subject" class="text ui-widget-content ui-corner-all"/>
		</div>
		<div>
			<label for="writer" class="header">이&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;름</label>
			<input type="text" id="m_writer" class="text ui-widget-content ui-corner-all" readonly="readonly"/>
		</div>
		<div>
			<label for="mail" class="header">메&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;일</label>
			<input type="text" id="m_mail1" class="mail ui-widget-content ui-corner-all"/>
			@
			<input type="text" id="m_mail2" class="mail ui-widget-content ui-corner-all"/>
		</div>
		<div>
			<label for="password" class="header">비밀&nbsp;번호</label>
			<input type="password" id="m_password" class="text ui-widget-content ui-corner-all"/>
		</div>
		<div>
			<label for="content" class="header">본&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;문</label>
			<br /><br />
			<textarea rows="15" cols="100" id="m_content" class="text ui-widget-content ui-corner-all"></textarea>
		</div>
	</fieldset>
</div>
<div id="deleteDialog" title="글삭제">   
	<fieldset>
		<div>
			<label for="subject" class="header">제&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;목</label>
			<input type="text" id="d_subject" class="text ui-widget-content ui-corner-all" readonly="readonly"/>
		</div>
		<div>
			<label for="password" class="header">비밀&nbsp;번호</label>
			<input type="password" id="d_password" class="text ui-widget-content ui-corner-all"/>
		</div>
	</fieldset>
</div>
</body>
</html>

list

 

write
modify
delete

 

 

728x90
반응형

'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' 카테고리의 다른 글

01/19 - Bootstrap(2) : 사용법  (1) 2021.01.31
01/18 - W2ui, Bootstrap(1) : javascript를 지원하는 다양한 라이브러리  (0) 2021.01.31
01/14 - jQuery + Ajax , jQuery UI (1)  (0) 2021.01.31
01/13 - jQuery(2) : 사용법, 우편번호 검색기  (0) 2021.01.31
01/12 - Ajax(2) : 우편번호 검색기 만들기 , jQuery(1) : 쓰는법  (0) 2021.01.25
'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' Related Articles more