클라이언트들이 목록의 정렬순서를 변경할 수 있게 해달라는 요구사항이 들어오곤합니다.

대부분 목록 옆에 화살표아이콘을 이용하여 클릭시 한줄씩 이동시키게 하거나 

 input text태그를 만들어서 정렬순서를 입력하게끔 하는 방식을 가~~끔 보았습니다.

하지만 jQueryUI에서는 sortable이라는 함수를 이용하여 드래그앤드롭으로 목록의 순서를 변경이 가능합니다.

우선 HTML 태그를 작성해보도록 합니다.

<h2>목록 정렬순서 변경하기</h2>
<div id="sortable">
	<div>첫번째목록</div>
	<div>두번째목록</div>
	<div>세번째목록</div>
	<div>네번째목록</div>
</div>

위와같이 코드를 작성한 다음 간단하게 스타일을 입혀보도록 하겠습니다.

#sortable div { 
	margin: 0 3px 3px 3px; 
	padding: 0.4em;  
	height: 18px; 
	border-style: solid;
	border-width: 1px; 
	background-color: yellow; 
}

마지막으로 sortable 함수를 스크립트상에서 호출하도록 합니다.

$(function(){
	$("#sortable").sortable();
})

sortable 함수 호출하는 셀렉터는 목록을 감싸고 있는 부모태그를 정의해주어야 합니다.

실행결과를 확인해보겠습니다.

드래그앤드롭 기능을 이용하여 정상적으로 목록순서가 변경이 완료 되었습니다.

table태그로는 sortable 기능이 제대로 동작되지 않습니다.

table 태그목록의 순서를 변경하고 싶으시다면 하단 포스팅을 참고해주세요

2014/10/15 - [코드저장소/jQuery 플러그인] - jQuery tablednd 플러그인을 사용하여 테이블을 드래그앤드롭으로 순서변경하기

by 개발로짜

jQueryUI에서 지원하는 기능 중 "자동완성"에 대하여 포스팅 해보도록 하겠습니다.

자동완성기능은 구글이나 네이버,다음과 같은 검색포털서비스에서 

볼수 있는 기능입니다.

우선 자바스크립트 배열에 문자열 값을 몇가지 넣고 간단하게 자동완성 기능을 구현해보도록 하겠습니다.

<h2>자동완성기능</h2>
<input id="autocomplete" type="text" />

일반 text 태그의 입력 값에 따라 배열에 정의된 

문구들 중 매칭시켜 목록 출력시켜주기 위한

스크립트 코드는 다음과 같습니다.

$(function(){
	var autocomplete_text = ["자동완성기능","Autocomplete","개발로짜","국이"];
         $("#autocomplete").autocomplete({
         	source: autocomplete_text
         });
})

autocomplete() 함수내에 source속성은 저장공간이랑 비슷한 개념입니다.

HTML/JAVASCRIPT 코드를 작성을 하셨다면 실행을 해보도록 하겠습니다.

한/영 구분없이 정상적으로 목록이 출력된 것을 확인하였습니다.

이번에는 ajax통신을 하여 자동완성을 구현해보겠습니다.

통신을 하여 자동완성을 구현해보기 위해서

 JSON 타입으로 파싱하여 응답하는 방식으로 진행하겠습니다.

2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기

JSON-SIMPLE 라이브러리를 이용하여 JSON 데이터를 만들도록 하겠습니다.

우선은 기존 html태그는 놔두고 스크립트 코드만 변경해보도록 하겠습니다.

$(function(){
	$( "#autocomplete" ).autocomplete({
		source : function( request, response ) {
		     $.ajax({
		       	    type: 'post',
		            url: "/autocomplete.jsp",
		            dataType: "json",
		            //request.term = $("#autocomplete").val()
		            data: { value : request.term },
		            success: function(data) {
		            	//서버에서 json 데이터 response 후 목록에 뿌려주기 위함
		                response( 
		                	$.map(data, function(item) {
		               			return {
		               				label: item.data,
		               				value: item.data
		              			}
		              		})
		              	);
		            }
		       });
	        },
		//조회를 위한 최소글자수
		minLength: 2,
		select: function( event, ui ) {
			// 만약 검색리스트에서 선택하였을때 선택한 데이터에 의한 이벤트발생
		}
	});
})

코드가 길어진것 같지만

 $.ajax 사용해신 분이시라면 익숙하실겁니다.

다음은 서버 페이지(autocomplete.jsp)에 대한 코드를 확인해보겠습니다.

request.setCharacterEncoding("UTF-8");
	String value = request.getParameter("value");
	JSONArray list = new JSONArray();
    JSONObject object = null;
    
    if(value.indexOf("개발") > -1) {
    	object = new JSONObject();
		object.put("data", "개발자");
		list.add(object);
		object = new JSONObject();
		object.put("data", "개발로짜");
		list.add(object);
		object = new JSONObject();
		object.put("data", "개발이 어려워요");
		list.add(object);
		object = new JSONObject();
		object.put("data", "개발이란?");
		list.add(object);
    }else if(value.indexOf("블로") > -1) {
    	object = new JSONObject();
		object.put("data", "블로그꾸미기");
		list.add(object);    	
		object = new JSONObject();
		object.put("data", "블로그누락");
		list.add(object);
		object = new JSONObject();
		object.put("data", "개발로짜의블로그");
		list.add(object);
		object = new JSONObject();
		object.put("data", "블로장생");
		list.add(object);
    }
		
    PrintWriter pw = response.getWriter();
    pw.print(list);
    pw.flush();
    pw.close();

코드를 설명을 해보자면

 텍스트박스에 검색 2글자 입력을 할경우 

"개발" 혹은 "블로" 라는 문자열이 입력될경우에만 

검색목록이 나오게 하는 샘플코드입니다.

DB에서 LIKE절을 사용하여 조회한다고 가정하고 임의로 작성한 서버코드입니다.

그럼 실행을 한번 해보겠습니다.

초기화면에 나타나는 태그는 작업을 별도로 하지 않았으므로 기본 태그입니다.

이제 "개발"이란 단어를 입력해보겠습니다.

개발이라고 입력하니 json으로 임의로 담았던 4개의 검색결과가 출력이 되었네요 ㅋ 

그럼 원하는 결과값 선택!

정상적으로 담겼습니다.

다음으로 "블로"라는 단어를 입력 해보겠습니다.

이번값 역시 잘 출력이 됩니다.

역시 원하는 결과값 클릭!

ajax 비동기 방식으로도 자동완성기능을 간단하게나마 구현해보았습니다

다음은 "sortable" 기능을 이용하여  리스트 목록의 순서를 드래그앤드롭으로 변경해보는 내용을 포스팅하도록 하겠습니다.

by 개발로짜

이번장에서는 jQueryUI에서 제공하는 레이아웃UI를 적용해보고자 합니다.

레이아웃의 종류로는 어코디언/탭/레이어팝업(일명 : 모달창)을 각각 적용해보도록 하겠습니다.

첫번째로는 어코디언(Accordion) 레이아웃에 대해서 설명을 해보겠습니다.

어코디언은 항상 제목/내용이 한묶음으로 이루어져야 하며 

여러개의 제목/내용에 대한 레이아웃을 감싸는 부모태그가 존재하여야 합니다.

jQueryUI의 예제 코드는 다음처럼 작성되어있습니다.

<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
	<h3>First</h3>
	<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
	<h3>Second</h3>
	<div>Phasellus mattis tincidunt nibh.</div>
	<h3>Third</h3>
	<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>

위에 보면 h3태그를 이용하여 제목영역을 지정하고 

하단에 div태그를 이용하여 내용에 대한 영역을 지정한 후 

모든 제목/내용을 감싸주는 accordion이라는 아이디값을 가진 div태그로 감싸주었습니다.

상단 태그위주로 어코디언을 적용하실 필요가 없습니다.

아까 말씀드렸다시피 부모태그(제목태그/내용태그) 로만 나누어 지는것이 가능만 하면 어떠한 태그이건 상관이 없습니다.

하단 코드를 보시면

<h2>아코디언</h2>
<div id="accordionLayout">
	<p>첫번째아코디언</p>
	<div>
		<p>첫번째 내용은 별거 없습니다..</p>
	</div>
	<p>두번째아코디언</p>
	<div>
		<p>아코디언은 매력적인 UI입니다</p>
	</div>
	<p>마지막아코디언</p>
	<div>
		<p>맨 마직막에 위치한 아코디언의 내용입니다.</p>
	</div>
</div>

위와같이 제목부분인 h3태그를 p태그로 변경을 해보았습니다.

어코디언 UI를 적용하고 싶으시다면 하단코드처럼 호출해주시면 되겠습니다.

$(function(){
        //$("어코디언적용할부모태그셀렉터").accordion();
	$("#accordionLayout").accordion();
});

한번 실행해 보도록 하겠습니다.

각각의 타이틀을 클릭할때마다 정상적으로 해당 내용들이 출력이 되었습니다.

다음으로는 탭레이아웃을 알아보겠습니다.

어코디언레이아웃을 가로로 나타내는것과 유사한 구조입니다.

탭구조를 위한 HTML 태그를 작성해보도록 하겠습니다.

<h2>탭</h2>
<div id="tabLayout">
	<ul>
		<!-- 탭 타이틀에 해당되는 부분  -->
		<li><a href="#tab1">최초탭</a></li>
		<li><a href="#tab2">두번째탭</a></li>
	</ul>
	<!-- 첫번째 탭내용 -->
	<div id="tab1">탭기능은 아코디언을 가로로 만든거 같네요</div>
	<!-- 두번째 탭내용 -->
	<div id="tab2">탭이나 아코디언을 사용하면 내용을 구분하여 출력하는것이 가능합니다.</div>
</div>

탭 제목과 제목에 해당되는 내용을 연동하기 위해서는 

탭 영역의 id값을 탭 타이틀의 href값에 #내용아이디를 정의해주어서 

맵핑을 시키면 되겠습니다.

탭 적용을 위한 호출 스크립트는 다음과 같습니다.

$(function(){
	 $("#tabLayout").tabs();
});

HTML태그와 스크립트코드를 작성하였다면 실행을 한번 해보도록 하겠습니다.

마지막으로 레이어팝업을 버튼 클릭이벤트를 이용하여 띄워보도록 하겠습니다.

버튼UI를 적용하는데 A태그/INPUT BUTTON태그/BUTTON태그를 적용이 가능한거 알고 계시죠?

2014/11/04 - [웹개발강좌/jQueryUI] - jQueryUI 2장 - 다양한 입력태그에 달력,스피너,슬라이더 등 각종 UI 적용해보기

다이얼로그창을 띄우기 위한 HTML 태그를 먼저 작성해보도록 하겠습니다.

<h2>레이어팝업</h2>
<!--버튼UI적용을 위한 A태그 -->
<p><a href="#" id="dialog_button">모달띄우기</a></p>
<!-- 클릭이벤트 발생시 다이얼로그창에 띄워줄 레이어-->
<div id="dialogLayout" title="모달 제목영역에 들어갈 내용입니다.">
	<p>심플하고 깔끔하게 지원되는 jQueryUI의 다이얼로그 레이아웃입니다. 깔끔하고 드래그 기능도 지원이 되네요 ^^</p>
</div>

위의 작성한 태그를 이용하기 위해서는 다음의 작업이 필요합니다.

1. A태그에 버튼UI적용

//클릭이벤트를 위한 a 태그에 버튼UI 적용
$("#dialog_button").button();

2. ID가 dialogLayout에 다이얼로그 UI적용

//dialogLayout레이아웃을 다이얼로그라고 정의
$("#dialogLayout").dialog({
	//이벤트발생시 open해주기 위하여 false 로 지정
	autoOpen: false,
	//다이얼로그의 넓이지정
	width: 400,
	//버튼 설정
	buttons: [{
			text: "확인",
			click: function() {
				$(this).dialog("close");
			}
	},{
		text: "취소",
		click: function() {
			$(this).dialog("close");
		}
	}]
});

3. A태그 클릭이벤트 발생 후 다이얼로그 화면에 출력

 //버튼 클릭시
$("#dialog_button").click(function(e) {
	//dialogLayout 레이아웃내에 정의된 내용을 다이얼로그를 이용하여 OPEN
	$("#dialogLayout").dialog("open");
	e.preventDefault();
});

1/2/3 스크립트코드들을 $(document).ready(function(){}) 내에 작성해주시면 되겠습니다.

3번코드를 보시면 e.preventDefault() 함수가 적용되었는데

 이부분은 A태그에 대한 이벤트를 막기위함이므로 

BUTTON 태그 혹은 INPUT BUTTON 태그일경우는 생략해주셔도 될거같습니다.

지금까지 jQueryUI를 이용하여 레이아웃을 출력 해보았습니다.

다음에는 간단하게 jQueryUI에서 지원하는 기능들에 대해서 알아보도록 하겠습니다.

by 개발로짜