-
[jQuery] jQ Mobile 패널(Panels) - jQuery Mobile 강좌Web/jQuery 2016. 3. 22. 13:59
W3School 를 참고하여 작성하는 jQuery Mobile 강좌입니다.
아래 링크들은 Tutorial 편입니다.
jQuery Mobile Panels
jQuery Mobile에서 패널(Panels)은 추가적인 내용을 스크린의 왼쪽 혹은 오른쪽 편에 슬라이드 방식으로 보여지는 것입니다.
패널을 만들기 위해, <div> 요소에 data-role="panel"을 추가하고 id를 명시하면 됩니다.
어느 HTML 마크업 안에건 패널을 보이길 원하는 곳에 <div>를 추가합니다:
123456<div data-role="panel" id="myPanel"><h2>Panel Header..</h2><p>Some text..</p></div>cs 패널에 접근하기 위해, 패널 <div>의 id를 지정하여 링크를 생성합니다.
* jqpanel.html
123456789101112131415161718192021222324252627282930313233<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page" id="pageone"><div data-role="panel" id="myPanel"><h2>Panel Header</h2><p>You can close the panel by clicking outside the panel, pressing the Esc key or by swiping.</p></div><div data-role="header"><h1>Page Header</h1></div><div data-role="main" class="ui-content"><p>Click on the button below to open the Panel.</p><a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a></div><div data-role="footer"><h1>Page Footer</h1></div></div></body></html>cs Closing Panels
패널의 바깥을 클릭하거나 스와이핑, Esc 키를 눌러서 패널을 닫을 수 있습니다. 패널 닫기를 막기 위해서 아래와 같은 방법으로 막을 수 있습니다:
Attribute Value Description Example data-dismissible true | false Specifies whether the panel can be closed by clicking outside of it, or not data-swipe-close true | false Specifies whether the panel can be closed by swiping, or not 또한, 버튼을 사용해서 패널을 닫을 수 있습니다: data-rel="close" 속성을 <div>에 추가하여 링크를 추가하면 됩니다. 호환성 이유로, 패널을 닫을 때, 사용자가 어느 페이지로 이동해야 할지 알려줄 ID를 지정하여 href 속성에 명시해야 합니다:
* jqclose.html
1234567891011121314151617181920212223242526272829303132333435<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page" id="pageone"><div data-role="panel" id="myPanel"><h2>Panel Header</h2><p>You can close the panel by clicking outside the panel, pressing the Esc key, by swiping, or by clicking the button below:</p><a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">Close panel</a></div><div data-role="header"><h1>Page Header</h1></div><div data-role="main" class="ui-content"><p>Click on the button below to open the Panel.</p><a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a></div><div data-role="footer"><h1>Page Footer</h1></div></div></body></html>cs Panel Display
data-display 속성을 통해 패널의 표시 모드를 제어할 수 있습니다:
Attribute Value Description data-display="overlay" Displays the panel over the content data-display="push" Animates both the panel and the page at the same time data-display="reveal" Default. The panel will sit under the page and reveal as the page slides away
1234<div data-role="panel" id="overlayPanel" data-display="overlay"><div data-role="panel" id="revealPanel" data-display="reveal"><div data-role="panel" id="pushPanel" data-display="push">cs Positioning Panels
기본적으로, 패널은 스크린의 왼쪽 편에 나타납니다. 패널이 나타나는 것을 오른 편으로 하기 위해, data-position="right" 속성을 명시합니다:
1<div data-role="panel" id="myPanel" data-position="right">cs 또한, 사용자의 스크롤에 따라 패널의 움직임을 제어 할 수 있습니다. 기본적으로는 패널은 스크롤에 따라서 움직이지 않고 밀려나게 됩니다.
data-position-fixed="true" 속성을 패널에 주게되면, 스크롤 여부에 상관없이 계속해서 보이게 됩니다:
1<div data-role="panel" id="myPanel" data-position-fixed="true">cs end
* 본 포스트는 w3school 을 통해 작성된 포스트입니다.
'Web > jQuery' 카테고리의 다른 글
[jQuery] jQ Mobile 그리드(Grids) - jQuery Mobile 강좌 (0) 2016.03.25 [jQuery] jQ Mobile 테이블(Tables) - jQuery Mobile 강좌 (0) 2016.03.25 [jQuery] jQ Mobile 접는 블록(Collapsibles) - jQuery Mobile 강좌 (0) 2016.03.25 [jQuery] jQ Mobile 네비바(Navibars) - jQuery Mobile 강좌 (0) 2016.03.22 [jQuery] jQ Mobile 툴바(Toolbars) - jQuery Mobile 강좌 (0) 2016.03.18 [jQuery] jQ Mobile 팝업(Popups) - jQuery Mobile 강좌 (0) 2016.03.17
