jQuery Mobile - 숨김 패널

숨김 패널

메뉴나 폼 등을 숨겨 놓았다가 필요할 때 페이지를 전환하지 않고 제공하기 위한 뷰

* 컨테이너에 data-role="panel" 속성을 설정하면 된다.

* data-display 속성으로 표시 방법을 설정한다.

- overlay 페이지 내용 위에 패널이 펼쳐지는 형태

<div data-role="panel" id="panel1" data-display="overlay" data-theme="b">
    <form>
        <h3>로그인 패널</h3>
        <label for="name">사용자명:</label>
        <input name="name" id="name" type="text" value="" data-mini="true" data-clear-btn="true">
        <label for="password">비밀번호:</label>
        <input name="password" id="password" type="password" value="" data-mini="true" data-clear-btn="true">
        <div class="ui-grid-a">
            <div class="ui-block-a"><a href="#" data-role="button" data-rel="close">취소</a></div>
            <div class="ui-block-b"><a href="#" data-role="button" data-rel="close">저장</a></div>
        </div>
    </form>
</div>