jQuery를 모바일 패널
jQuery를 모바일 패널이 화면의 왼쪽에서 오른쪽으로 당길 것이다.
패널을 만들 = "패널"속성 데이터 역할을 추가하기 위해 <div> 요소의 ID로 지정.
HTML 태그 <div>는 패널의 내용을 표시 추가
<div data-role="panel" id="myPanel"> <h2>面板标题..</h2> <p>文本内容..</p> </div>
주 : 패널 태그 페이지 헤더 콘텐츠 앞에 위치하거나 바닥 조성물 이후 여야한다.
패널에 액세스하려면 패널을 엽니 다 링크를 클릭, 링크의 링크 패널 <DIV> ID를 작성해야합니다 :
<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
패널의 간단한 예
예
<DIV 데이터 역할 = "패널 "ID = "myPanel">
<H2> 패널 머리 .. </ H2>
<P> 콘텐츠 패널 .. </ P>
</ DIV>
<사업부의 데이터 역할 = "헤더">
<H1> 표준 페이지 헤더 </ H1>
</ DIV>
<사업부의 데이터 역할 = "기본"클래스 = "UI 콘텐츠">
<P> 패널을 열고 아래를 클릭하십시오. </ P>
<a href="#myPanel" class="ui-btn ui-btn-inline"> 열린 패널 </a>에
</ DIV>
<사업부의 데이터 역할 = "바닥 글">
텍스트 </ H1>의 하단에 <H1>
</ DIV>
</ DIV>
»시도
닫기 패널
당신은 슬라이딩 패널을 닫습니다 패널 또는 외부 영역 또는 Esc 키를 눌러 클릭 할 수 있습니다. 당신은 해제하고 슬라이딩 패널을 닫으려면 클릭 * 속성 데이터 - 사용할 수 있습니다 :
| 재산 | 값 | 기술 | 예 |
|---|---|---|---|
| 데이터 취소 가능한 | 참 | 거짓 | 패널을 클릭하여 패널이 외부 영역을 종료할지 여부를 지정합니다. | 시험 |
| 데이터 와이프 닫기 | 참 | 거짓 | 슬라이딩에 의해 폐쇄 될 수 있는지 여부를 지정합니다. | 시험 |
당신은 패널을 닫습니다 버튼을 사용할 수 있습니다에서만 <DIV> 속성 패널에서 = "근접"데이터 확인해를 추가해야합니다. 성능상의 이유로, 우리는 페이지 ID에 대한 링크 href 속성 포인트를 닫아야합니다.
예
<H2> 패널 머리 .. </ H2>
<P> 패널 텍스트 .. </ P>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline"> 닫기 패널 </a>에
</ DIV>
»시도
디스플레이 패널
사용자는 표시 패널을 제어하는 데이터 디스플레이 모드 속성을 사용할 수있다 :
| 속성 값 | 기술 |
|---|---|
| 데이터 디스플레이 = "오버레이" | 콘텐츠의 표시 패널 |
| 데이터 디스플레이 = "푸시" | 동시에 "푸시"패널 및 페이지. |
| 데이터 디스플레이 = "공개" | 기본 페이지 슬라이드 쇼와 같은 화면에서 그릴 것, 패널이 표시됩니다 |
예
<DIV 데이터 역할은 = "패널 "ID = "revealPanel"데이터 표시 = "공개">
<DIV 데이터 역할 = "패널 "ID = "pushPanel"데이터 디스플레이 = "푸시">
»시도
패널 위치
기본적으로, 패널이 화면의 좌측에 표시한다. 당신이 패널은 화면의 오른쪽에 표시하려면 데이터 위치 = "오른쪽"속성을 지정할 수 있습니다.
당신은 페이지 스크롤 및 스크롤에 따라 패널의 내용을 지정할 수 있습니다. 기본적으로, 페이지 스크롤링과 함께 패널 (그러나 패널의 콘텐츠는 페이지의 상단에 여전히). 이 패널의 내용이 페이지 스크롤 및 스크롤 정지 구현해야하는 경우 패널의 데이터 위치 고정 = "true"로 속성을 추가 할 수 있습니다 :