jQuery Mobile 5

jQuery Mobile 아코디언

모바일이라는 화면의 특성상 한 화면에 모든 내용을 담기는 굉장히 어렵습니다. 따라서 아코디언 형태의 위젯을 많이 사용합니다. div 태그의 data-role 속성을 collapsible로 입력하고 내부에 원하는 내용을 입력하면 아코디언이 만들어 집니다. 내부에 h1 태그를 입력하면 해당 h1 태그가 아코디언의 제목이 됩니다.



기본 아코디언

							<div data-role="page">
								<div data-role="header"><h1>Mobile</h1></div>
								<div data-role="content">
									<div data-role="collapsible">
										<h1>Accordian</h1>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
									</div>	
									<div data-role="collapsible">
										<h1>Accordian</h1>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
									</div>	
									<div data-role="collapsible">
										<h1>Accordian</h1>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
									</div>	
								</div>
							</div>
						

별도의 속성을 지정하지 않으면 아코디언이 열린 상태로 출력됩니다.
아코디언의 열림과 닫힘 상태를 조절하고 싶을 때는 다음과 같이 data-collapsible 속성을 사용합니다.

							<div data-role="collapsible" data-collapsible="true">
						

data-collapsible 속성은 기본적으로 false입니다.
jQuery UI 플러그인 처럼 아코디언을 뭉쳐 놓을 수도 있습니다. 아래의 코드처럼 data-role 속성이 collapsible인 div 태그는 data-role 속성이 collapsible-set인 div 태그에 넣어주면 자동으로 그룹을 형성합니다.

							<div data-role="page">
								<div data-role="header"><h1>Mobile</h1></div>
								<div data-role="content">
									<div data-role="collapsible-set">
										<div data-role="collapsible">
											<h1>Accordian</h1>
											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
										</div>	
										<div data-role="collapsible">
											<h1>Accordian</h1>
											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
										</div>	
										<div data-role="collapsible">
											<h1>Accordian</h1>
											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
										</div>	
									</div>
								</div>
							</div>
						

그룹이 형성된 아코디언은 그룹 내에서 동시에 하나만 펼쳐질 수 있습니다. 별도로 data-collapsible 속성을 설정하지 않아도 하나만 펼쳐지는데요. 어떠한 것이 펼쳐질지 정하고 싶다면 data-collapsible 속성을 별도로 지정해 주어야 합니다.