แผงมือถือ jQuery
แผงในมือถือ jQuery จะเลื่อนออกมาจากด้านซ้ายหรือด้านขวาของหน้าจอที่มีเนื้อหาเพิ่มเติม
เพื่อสร้างแผงเพิ่ม data-role="panel" แอตทริบิวต์ไป <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 แอตทริบิวต์ให้ชี้ไปยังหมายเลขของหน้าเว็บที่ผู้ใช้ควรจะไปเมื่อปิดแผง:
ตัวอย่าง
<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" > ลองตัวเอง» แผง Positioning
โดยค่าเริ่มต้นการติดตั้งจะปรากฏบนด้านซ้ายของหน้าจอ สำหรับแผงที่จะปรากฏบนด้านขวาของหน้าจอให้ระบุ data-position="right" แอตทริบิวต์
นอกจากนี้คุณยังสามารถระบุว่าเนื้อหาของแผงควรอยู่ในตำแหน่งตามส่วนที่เหลือของหน้าเมื่อผู้ใช้เริ่มต้นในการเลื่อน โดยค่าเริ่มต้นแผงจะเลื่อนหน้า ( แต่เนื้อหาของแผงจะอยู่ด้านบนของหน้า) หากคุณเคยต้องการที่จะแสดงเนื้อหาของแผงไม่ว่าวิธีไกลคุณเลื่อนหน้าเพิ่ม data-position-fixed="true" แอตทริบิวต์ที่แผง: