2016. 4. 14. 13:14ㆍlanguage/jquery mobile
이번 포스팅은 Panel 에 대해서 설명합니다.
모바일 웹을 사용하다보면 좌측 또는 우측에서 나왔다가 사라졌다가 하는 화면을 볼 수 있습니다.
보통 메뉴로 사용하거나 설정정보를 두거나 등 여러가지로 사용될 수 있습니다.
jquery mobile 에서는 panel 이라고 하고 사용방법은 간단합니다.
먼저 필자가 구현한 모양은 다음과 같습니다.
소스입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<section id="page1" data-role="page">
<header data-role="header">
<h1>jQuery Mobile</h1>
<a class="ui-btn ui-corner-all ui-btn-inline ui-mini footer-button-left ui-btn-icon-left ui-icon-carat-l" href="javascript:history.back()">back</a>
<a href="#menuPanel" data-icon="gear" data-iconpos="notext">Add</a>
</header>
<div class="content" data-role="content">
내용입니다.<br>
안녕
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
<div data-role="panel" id="menuPanel" data-position="right" data-display="overlay" data-theme="a">
<h3>메뉴</h3>
<ul data-role="listview">
<li>
<a href="<%=ctxPath%>/common/settingmobile/selectRepCustnoMobile.do">설정 메뉴</a>
</li>
<li data-icon="power">
<a href="<%=ctxPath%>/common/authmobile/logoutMobile.do">Logout</a>
</li>
</ul>
</div>
</section> |
cs |
1# : 기본적인 page 구조입니다.
2# : 헤더부분입니다.
5# : 헤더 내부에서 톱니바퀴 아이콘의 버튼을 만들어 줍니다. href 속성을 보면 불러올 panel 을 가리키고 있습니다.
12# : panel 구현부분입니다. footer 아래에 위치하고 있습니다.
data-role="panel" 을 선언해 주어야 합니다.
data-position 속성은 어디에서 나타날지 결정합니다. left, right 가 있습니다. 기본값은 left 입니다.
data-display 속성은 나타나는 방법을 설정합니다. overlay, reveal, push 가 있고 기본값은 reveal 입니다. overlay 는 page 위에서 panel이 있습니다. page는 가만히 있고 panel 만 나타나도록 합니다. reveal 는 page 아래에 panel이 있습니다. page 가 이동하여 panel을 나타나도록 합니다. push는 page 옆에 panel이 있습니다. page와 panel이 동시에 이동하여 숨어있던 panel 을 나타나도록 합니다.
직접 실습해 보면 금방 이해가 되리라 생각합니다.