มือถือ jQuery แผง
แผงมือถือ jQuery จะวาดไปทางขวาบนด้านซ้ายของหน้าจอ
ได้รับการออกแบบโดยใช้ ID ขององค์ประกอบ <div> เพื่อเพิ่มข้อมูลบทบาท = "แผง" ทรัพย์สินที่จะสร้างแผง
เพิ่มแท็ก <div> เพื่อแสดงเนื้อหาของแผงของคุณ:
<div data-role="panel" id="myPanel"> <h2>面板标题..</h2> <p>文本内容..</p> </div>
หมายเหตุ: แท็กแผงต้องถูกวางไว้ก่อนที่ส่วนหัวของหน้าเนื้อหาหรือหลังจากองค์ประกอบของด้านล่าง
ในการเข้าถึงแผงคุณจำเป็นต้องสร้างการเชื่อมโยงแผง <div> รหัสของการเชื่อมโยงให้คลิกที่ลิงค์เพื่อเปิดแผง:
<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
ตัวอย่างง่ายๆของแผง
ตัวอย่าง
<div ข้อมูลบทบาท = "แผง " id = "myPanel">
<h2> หัวแผง .. </ h2>
<p> แผงเนื้อหา .. </ p>
</ div>
<div ข้อมูลบทบาท = "หัว">
<h1> ส่วนหัวของหน้ามาตรฐาน </ h1>
</ div>
<div ข้อมูลบทบาท = คลาส "หลัก" = "UI-เนื้อหา">
<p> คลิกด้านล่างเพื่อเปิดแผง </ p>
<a href="#myPanel" class="ui-btn ui-btn-inline"> แผงเปิด </a>
</ div>
<div ข้อมูลบทบาท = "ส่วนท้าย">
<h1> ที่ด้านล่างของข้อความ </ h1> The
</ div>
</ div>
ลอง»
แผงปิด
คุณสามารถคลิกบนแผงหรือพื้นที่ภายนอกหรือกด Esc เพื่อปิดแผงเลื่อน คุณสามารถใช้ DATA- * คุณลักษณะการปิดใช้งานและคลิกเพื่อปิดแผงเลื่อน:
| คุณสมบัติ | ความคุ้มค่า | ลักษณะ | ตัวอย่าง |
|---|---|---|---|
| ข้อมูล dismissible | | จริงเท็จ | ระบุว่าแผงโดยการคลิกที่แผงที่จะปิดพื้นที่รอบนอก | ความพยายาม |
| ข้อมูลรูดปิด | | จริงเท็จ | ระบุว่าสามารถปิดได้โดยการเลื่อน | ความพยายาม |
คุณสามารถใช้ปุ่มเพื่อปิดแผง: จะต้องเพิ่มข้อมูล rel = "ปิด" ในแผงคุณสมบัติ <div> ใน เพื่อเหตุผลด้านประสิทธิภาพเราจำเป็นต้องปิดจุดเชื่อมโยง href แอตทริบิวต์กับ ID หน้า
ตัวอย่าง
<h2> หัวแผง .. </ h2>
<p> แผงข้อความบางส่วน .. </ p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline"> แผงปิด </a>
</ div>
ลอง»
หน้าจอแสดงผล
คุณสามารถใช้คุณสมบัติโหมดการแสดงผลข้อมูลในการควบคุมหน้าจอแสดงผล:
| มูลค่าทรัพย์สิน | ลักษณะ |
|---|---|
| ข้อมูลที่แสดงผล = "ซ้อนทับ" | หน้าจอแสดงผลในเนื้อหา |
| ข้อมูลที่แสดงผล = "ดัน" | พร้อมกัน "ดัน" แผงหน้า |
| ข้อมูลที่แสดงผล = "เปิดเผย" | หน้าเริ่มต้นจะวาดจากหน้าจอเช่นสไลด์โชว์แผงจะปรากฏ |
ตัวอย่าง
<div ข้อมูลบทบาท = "แผง " id = "revealPanel" จอแสดงผลข้อมูล = "เปิดเผย">
<div ข้อมูลบทบาท = "แผง " id = "pushPanel" data-การแสดงผล = "ผลักดัน">
ลอง»
สถานที่ตั้งแผง
โดยค่าเริ่มต้นแผงจะปรากฏบนด้านซ้ายของหน้าจอ หากคุณต้องการแผงปรากฏขึ้นที่ด้านขวาของหน้าจอคุณสามารถระบุข้อมูลตำแหน่งสถานที่ให้บริการ = "สิทธิ"
คุณสามารถระบุเนื้อหาของแผงตามการเลื่อนหน้าและเลื่อน โดยค่าเริ่มต้นแผงพร้อมกับการเลื่อนหน้า ( แต่เนื้อหาของแผงยังคงเป็นที่ด้านบนของหน้า) หากคุณต้องการที่จะใช้เนื้อหาของแผงนิ่งกับการเลื่อนหน้าและเลื่อนคุณสามารถเพิ่มข้อมูลตำแหน่งคงที่ = แอตทริบิวต์ "จริง" ในแผง: