jquery mobile 강좌 18 [ panel 만들기 / 숨어있는 메뉴 또는 설정 화면 구현 ]

2016. 4. 14. 13:14language/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 을 나타나도록 합니다.

 

 

 

직접 실습해 보면 금방 이해가 되리라 생각합니다.

 

 

 

 

 

 

 

 

1 2 3 4 5 6 7 8 ··· 21