JAVASCRIPT#48 - jQuery UI 3부 Accordion 탭과 메뉴

A pony and My sunshine my light my dream.

JAVASCRIPT#48 - jQuery UI 3부 Accordion 탭과 메뉴

1. 슬라이드형 목록 및 메뉴 형성

- 초기화 : $(셀렉터).accordion();

* 여기서 셀렉터는 전체 목록을 감싸는 div의 id

- 방식 : <h>는 클릭가능한 메뉴이름 이하 <div>는 메뉴 컨텐츠.

2. 자동완성 기능 사용하기

- 초기화 : $(셀렉터).autocomplete({source:소스이름});

* 여기서 셀렉터는 인풋 요소의 아이디

- 방식 : input에 무언가를 입력하면 소스이름에서 부터 추천목록을 뽑아서 인풋아래에 보여준다.

- 소스이름??? : 가장 쉽게는 자신이 만든 배열이 들어갈수 있음, 이외에는 뭐 쿠키같은곳에서 가져오는 방식일듯.

3. 달력 사용한 날짜 입력기

- 초기화 : $("#when").datepicker();

* 여기서 셀렉터("#when")는 인풋 요소의 아이디

- 날짜 제한하기 :

$("#when").datepicker(){

maxDate: new Date (2016, 06, 20);

minDate: new Date (2016, 06, 25);

});

4. 메뉴 만들기

- $(셀렉터).menu();

* 여기서 셀렉터는 최상위 ul 요소의 아이디

5. 탭 만들기

- $(셀렉터).tabs();

* 여기서 셀렉터는 최상위 div의 id

- 형식

<div id="전체">

<ul>

<li><a href="#컨텐츠값1">탭이름1</a><li>

<li><a href="#컨텐츠값2">탭이름2</a><li>

<li><a href="#컨텐츠값3">탭이름3</a><li>

</ul>

<div id="#컨텐츠값1">실제 컨텐츠 내용</div>

<div id="#컨텐츠값2">실제 컨텐츠 내용</div>

<div id="#컨텐츠값3">실제 컨텐츠 내용</div>

</div>

:: JS ::

$("#전체").tabs();

* href 가 꼭 콘텐츠 값일 필요는 없고 해당 페이지나 게시판 주소여도 작동함.

이번 주제는 실제로 사이트 만드는걸 하지 않으면 별 가치가 없을듯.