반응형
■ jQueyr Mobile 아코디언 위젯 사용하기.
01. 모바일이라는 화면의 특성상 한 화면에 모든 내용을 담기는 굉장히 어렵다. 따라서 아코디언 형태의 위젯을 많이 사용하는데.
div 태그의 data-role 속성을 collapsible로 입력하고 내부에 원하는 내용을 입력하면 아코디언이 만들어진다.
collapsible.php |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Mobile</h1> </div> <div data-role="content"> <!-- div 태그의 data-role 속성이 collapsible로 입력하면 아코디언이 만들어 진다. --> <div data-role="collapsible"> <!-- 내부에 h1태그를 입력하면 해당 h1태그가 아코디언의 제목이 된다. --> <h1>Accordion</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <!-- div 태그의 data-collspsed 속성이 true이면 아코디언 위젯이 오픈상태가 된다. (기본값 : false) --> <div data-role="collapsible" data-collspsed="true"> <h1>Accordion</h1> <!-- p 태그는 아코디언이 오픈되었을 때 보여질 값을 가지고 있다. --> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div data-role="collapsible"> <h1>Accordion</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div data-role="footer"> <h1>FOOTER</h1> </div> </div> </body> </html> |
02. 출력결과는 아래와 같다.
■ jQueyr Mobile 아코디언 위젯 사용하기.
01. 아코디언 위젯은 data-role 속성이 collapsible인 div 태그는 data-role 속성이
collapsible-set인 div 태그에 넣어주면 자동으로 그룹을 형성한다.
collapsible_set.php |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <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>Accordion</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div data-role="collapsible" data-collspsed="true"> <h1>Accordion</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div data-role="collapsible"> <h1>Accordion</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> <div data-role="footer"> <h1>FOOTER</h1> </div> </div> </body> </html> |
02. 출력결과는 아래와 같다.
반응형
'jQuery > jQueryMobile' 카테고리의 다른 글
| [jQueryMobile] jQuery Mobile 툴바 (0) | 2016.10.25 |
|---|---|
| [jQueryMobile] 레이아웃 구성하기 (0) | 2016.10.25 |
| [jQueryMobile] jQueryMobile 입력 양식 (0) | 2016.10.24 |
| [jQueryMobile] jQueryMobile의 페이지 이동 (0) | 2016.10.21 |
| [jQueyrMobile] 리스트에 이미지 사용하기 (0) | 2016.10.21 |
