jQuery를 모바일 패널
jQuery를 모바일에서 패널 왼쪽 또는 추가 콘텐츠를 화면의 오른쪽에서 밖으로 밀어 것입니다.
패널을 만들려면 추가 data-role="panel" A와 속성 <div> 요소 및 지정 id .
이 내부의 HTML 마크 업을 추가 <div> 당신이 당신의 패널에 표시하도록 :
<div data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>참고 : 패널 마크 업 전이나 jQuery를 모바일 페이지 내부 헤더, 콘텐츠 및 바닥 글 다음에 위치해야합니다.
패널에 액세스하려면를 가리키는 링크를 생성 id 패널의 <div> . 사용자가 링크를 클릭하면 패널이 열립니다 :
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>다음은 기본 패널의 예는 다음과 같습니다
예
<div data-role="page" id="pageone">
<div
data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
</div>
<div
data-role="header">
<h1>Standard 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">Open
Panel</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div> »그것을 자신을 시도 결산 패널
당신은 스 와이프하여 또는 가압함으로써, 외부를 클릭하여 패널을 닫을 수 있습니다 Esc 키를 누릅니다. 당신은 추가로 추가하여 버튼으로 클릭하고 스 와이프 기능을 비활성화 할 수 있습니다 data-* 패널에 속성을 <div> :
| 속성 | 값 | 기술 | 예 |
|---|---|---|---|
| data-dismissible | true | false | 패널이 그것의 외부를 클릭하여 폐쇄 여부를 할 수 있는지 여부를 지정합니다 | 시도 해봐 |
| data-swipe-close | true | false | 패널은 와이프에 의해 폐쇄, 또는 할 수는 없습니다 지정 여부 | 시도 해봐 |
또한 버튼을 사용하여 패널을 닫을 수 있습니다 : 그냥 패널 내부에 링크를 추가 <div> 와 data-rel="close" 속성은 첨부. 그리고 호환성을 위해, 당신은 또한 지정해야합니다 href 사용자가 패널을 닫을 때로 이동해야하는 페이지의 ID를 가리 키도록 속성 :
예
<div
data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
<a
href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div> »그것을 자신을 시도 패널 디스플레이
사용자는 데이터 디스플레이 속성을 갖는 패널의 표시 모드를 제어 할 수있다 :
| 속성 값 | 기술 |
|---|---|
| data-display="overlay" | 의 내용에 패널을 표시합니다 |
| data-display="push" | 패널 동시에 페이지 모두 애니메이트 |
| data-display="reveal" | 태만. 페이지가 떨어져 슬라이드로 패널은 페이지 아래에 앉아 계시 |
예
<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" > »그것을 자신을 시도 위치 패널
기본적으로, 패널이 화면의 좌측에 표시한다. 패널은 화면의 우측에 표시 할 경우, 지정 data-position="right" 속성.
사용자가 스크롤을 시작할 때 당신은 또한 페이지의 나머지 부분에 따라 패널의 내용이 배치되는 방식을 지정할 수 있습니다. 기본적으로 패널은 페이지 (그러나 패널의 내용이 페이지의 상단에 남아있을 것입니다)으로 스크롤됩니다. 당신은 항상 상관없이 페이지를 스크롤하는 방법까지, 패널의 내용을 표시하지하려면 추가 data-position-fixed="true" 패널에 속성을 :