이번장에서는 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>
위의 작성한 태그를 이용하기 위해서는 다음의 작업이 필요합니다.
//클릭이벤트를 위한 a 태그에 버튼UI 적용 $("#dialog_button").button();
//dialogLayout레이아웃을 다이얼로그라고 정의 $("#dialogLayout").dialog({ //이벤트발생시 open해주기 위하여 false 로 지정 autoOpen: false, //다이얼로그의 넓이지정 width: 400, //버튼 설정 buttons: [{ text: "확인", click: function() { $(this).dialog("close"); } },{ text: "취소", click: function() { $(this).dialog("close"); } }] });
//버튼 클릭시 $("#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 개발로짜
jQueryUI 5장 - sortable을 이용하여 목록순서 변경하기 (0) | 2014.11.07 |
---|---|
jQueryUI 4장 - autocomplete 함수를이용하여 Ajax 비동기 자동완성 구현해보기 (9) | 2014.11.06 |
jQueryUI 2장 - 다양한 입력태그에 달력,스피너,슬라이더 등 각종 UI 적용해보기 (0) | 2014.11.04 |
jQueryUI 1장 - 테마선택하여 다운로드 후 간단하게 버튼태그에 UI 적용하기 (0) | 2014.11.04 |