우선은 가상의 테이블 리스트를 html 소스로 짜보자

<ul id="sortable">
	<li>홍길동</li>
	<li>이순신</li>
	<li>스티븐잡스</li>
	<li>웨인루니</li>
</ul>

위의 소스는 가상의 테이블 리스트이다.

하지만 해당 소스로만 뿌리면 화면이 기본적인 목록으로만 뽑힌다.

별로 어떻게 나뉘는지도 모르겠고 그냥 심플하게 css를 주기로 한다.

나는 미적감각이 없으니 그냥 눈으로 확인할수 있는 정도로만 스타일을 주도록.. ㅋㅋ

li {
		list-style: none;
		border-width: 1px;
		border-style: solid;
		border-color: red;
		padding : 10px;
}

위의 css를 적용하면 

다음과 같이 화면이 조금 바뀌었다.

이제는 드래그 기능을 적용 시켜보도록 해보자 

적용 스크립트는 다음처럼 작성해주면 되겠다.

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

해당 스크립트 코드만 적용해주면 각각의 row가 드래그가 된다.

이동 깔끔하게 잘~ 된다 ..

만약 div나 li태그가 아닌 테이블의 tr을 드래그 하고싶다면 ?

↓↓↓↓↓↓

위 포스팅을 보도록 하자 ^^

우선 하단 그림처럼 2개의 탭을 생성후 

각각의 영역에 컨텐츠 내용을 삽입한다 가정해보도록 하자

<div id="tabs">
	<ul>
		<li><a href="#tab-1">첫번째탭</a></li>
		<li><a href="#tab-2">두번째탭</a></li>
		<li><a href="#tab-3">세번째탭</a></li>
	</ul>
	<div id="tab-1">첫번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용</div>
	<div id="tab-2">두번째 탭내용</div>
	<div id="tab-3">세번째 탭내용</div>
</div>

위 구조로 탭이 구성되어진다

타이틀에 해당하는 부분은 div > ul > li영역에 속하는 태그이고

컨텐츠에 해당되는 부분들은 div -> div로 되있는 태그이다.

타이틀에 보면 <a href="#tab-1"> <<< 이부분이 있는데 a 태그의 <a href="#탭컨텐츠 id"> 값으로 맵핑이 되는거 같다.

해당 구조대로 html코드를 완료하였으면 스크립트 코드도 작성해보도록 하자 .

역시, 기본 코드는 한줄이면 된다.

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

위처럼 호출을하면 tabUI 적용이 완료!!

ID가 tabs인 영역은 탭 타이틀과 컨텐츠 타이틀을 동시에 감싸는 부모 태그의 id를 의미

한다.

어우~ 내가 만든 테마는 너무 눈이 어지럽다 .... 3D화면 같네;;; 

ajax로 불러오는 것도 있는데 해당부분은 데모샘플을 보면서 하도록 하자~

$(function(){
	$( document ).tooltip();
})

스크립트는 한줄이면 되는애 기존처럼 id를 생성하는게 아니라 document에  주었다.

documnet에 주면 body페이지 모든 태그중 title이란 속성값이 존재하는 태그들에 마우스를 올려놓으면 툴팁기능이 동작하는것이다.

툴팁 테스트입니다.<br/>
<a href="http://www.naver.com" title="네이버사이트로 가는링크">네이버이동</a><br/><br/><br/><br/>
<a href="http://www.daum.net" title="다음으로 가봅시다">다음이동</a>

툴팁에 대해서는 별다른 설명이 필요없을거 같다. 

실행화면으로 마무리 하겠음.

onload 화면

네이버이동 문구에 마우스 오버시켜보기

다음이동 문구에 마우스 오버시켜보기

이번 코드는 초반에 JQUERYUI의 연동법을 테스트 하신후 이어서 진행하시길

위의 링크내용에 추가로 레이어 팝업 관련 내용만 적어보겠다.

1. 우선 버튼태그는 UI까지 적용된 상태라면 다음은 레이어팝업으로 띄워줄 div 코드를 짜보도록 해보자

<!-- 상단 BUTTON 태그클릭시 보여줄 레이어팝업 태그  -->
	<div id="dialog" title="레이어팝업 제목">
		해당부분은 레이어 팝업의 내용이다. br태그없이 알아서 자동 줄바꿈 처리가 되있음....
</div>

위에보면 div의 title속성이 있는데 해당 속성값은 모달창에 보여줄 타이틀 영역이다.

그리고 <div></div> 코드내에 서술되있는 내용은 모달창에서 보여지는 

내용들이다.

화면사이즈에 따라 자동으로 글자 조절이 가능하다

코드를 작성했으면 이제 저 div태그에 레이어팝업 UI를 적용시켜보도록 하자

//레이어팝업 UI 생성후 화면에 안보여주기
		 $( "#dialog" ).dialog({
			//이벤트 발생했을때 보여주려면 autoOpen : false로 지정해줘야 한다.
			autoOpen: false,
			//레이어팝업 넓이
			width: 400,
			//뒷배경을 disable 시키고싶다면 true
			modal: true,
			//버튼종류
			buttons: [
				{
					//버튼텍스트
					text: "Ok",
					//클릭이벤트발생시 동작
					click: function() {
						$( this ).dialog( "close" );
					}
				},
				{
					//버튼텍스트
					text: "Cancel",
					//클릭이벤트발생시 동작
					click: function() {
						$( this ).dialog( "close" );
					}
				}
			]
		});

위와같이 스크립트 코드를 짯으면 div레이아웃에 레이아웃팝업 UI가 적용된것이다.

하지만 버튼 클릭시 화면에 띄워줄것이므로 속성값인 autoOpen값은 false로 주었다.

만들자 마자 보여주고 싶다면 autoOpen을 true로 주면 될것이다.

그리고 modal창으로 띄워주기 위해 modal 속성을 true로 주었다.

이제는 버튼 클릭이벤트를 발생시켜 div레이아웃을 띄워보도록 하자

//버튼 클릭이벤트시, 숨어있는 레이어팝업 오픈하기
 $("#button").click(function(){
	 $( "#dialog" ).dialog( "open" );
 });

onload화면

레이어팝업띄우기 버튼 클릭후 화면

레이어팝업 사이즈 조절한 화면

레이어팝업 닫기 이벤트 발생 화면

이번에 소개할 내용은 어코디언기능이다.

보통 FAQ같은 한제목당 하나의 내용을 보여주고자 할때 

주로 사용된다

뭐... 쉽게 말해 영역을 아낄수 있는 방법중에 하나라고 생각된다!

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

<div id="accordion">
		<div>제목1</div>
		<div>내용1</div>
		<div>제목2</div>
		<div>내용2</div>
		<div>제목3</div>
		<div>내용3</div>
		<div>제목4</div>
		<div>내용4</div>
</div>

1번째 태그 = 제목

2번째 태그 = 내용

형식으로 인식 시키는거 같다

소스실행시 부드럽에 클릭위치에 포커스가 잡히면서 애니메이션 효과를 볼 수 있다