jQuery แถบมือถือ
องค์ประกอบ Toolbar มักจะวางอยู่ภายในหัวและส่วนท้าย - สำหรับ "ง่ายต่อการเข้าถึง" นำทาง:
บาร์ส่วนหัว
ส่วนหัวตั้งอยู่ที่ด้านบนของหน้าและมักจะมีหน้าชื่อ / โลโก้หรือหนึ่งหรือสองปุ่ม (โดยปกติบ้านตัวเลือกหรือค้นหา)
คุณสามารถเพิ่มปุ่มไปทางซ้ายและ / หรือไปทางด้านขวาในส่วนหัว
โค้ดข้างล่างนี้จะเพิ่มปุ่ม "บ้าน" ไปทางซ้ายและปุ่ม "ค้นหา" ด้านขวาของข้อความชื่อส่วนหัว:
ตัวอย่าง
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> ลองตัวเอง» รหัสต่อไปนี้จะเพิ่มปุ่มไปทางด้านซ้ายของชื่อส่วนหัว:
ตัวอย่าง
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> ลองตัวเอง» รหัสต่อไปนี้จะเพิ่มปุ่มไปทางด้านขวาของชื่อส่วนหัว:
ตัวอย่าง
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> ลองตัวเอง» ส่วนหัวสามารถมีหนึ่งหรือสองปุ่มในขณะที่ส่วนท้ายมีไม่มีขีด จำกัด
บาร์ท้ายกระดาษ
ส่วนท้ายตั้งอยู่ที่ด้านล่างของหน้า
ส่วนท้ายมีความยืดหยุ่นมากกว่าส่วนหัว - มันทำงานได้มากขึ้นและอาจมีการเปลี่ยนแปลงได้ตลอดทั้งหน้าและดังนั้นจึงสามารถมีปุ่มมากเท่าที่ต้องการ:
ตัวอย่าง
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> ลองตัวเอง» เคล็ดลับ: ปุ่มในส่วนท้ายยังไม่ได้เป็นศูนย์กลางโดยค่าเริ่มต้น ในการแก้ไขปัญหานี้เพียงแค่ใช้ CSS:
คุณยังสามารถปุ่มกลุ่มในส่วนท้ายแนวนอนหรือแนว:
ตัวอย่าง
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup"
data-type="horizontal" >
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> ลองตัวเอง» การวางตำแหน่งหัวและส่วนท้าย
ส่วนหัวและส่วนท้ายสามารถวางในสามวิธี:
- Inline - เริ่มต้น ส่วนหัวและส่วนท้ายมีความสอดคล้องกับเนื้อหาของหน้าเว็บ
- Fixed - หัวและส่วนท้ายจะยังคงอยู่ในตำแหน่งที่ด้านบนและด้านล่างของหน้า
- Fullscreen - พฤติกรรมเช่นการแก้ไข; หัวและส่วนท้ายจะยังคงอยู่ในตำแหน่งที่ด้านบนและด้านล่าง แต่ยังมากกว่าเนื้อหาของหน้าเว็บ นอกจากนี้ยังเล็กน้อยดูผ่าน
ใช้ข้อมูลตำแหน่งแอตทริบิวต์การวางตำแหน่งหัวและส่วนท้ายของคุณ:
Inline ตำแหน่ง (Default)
<div data-role="header" data-position="inline" ></div>
<div data-role="footer"
data-position="inline" ></div> ลองตัวเอง» ตำแหน่งคงที่
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer"
data-position="fixed" ></div> ลองตัวเอง» เมื่อต้องการเปิดใช้ตำแหน่งเต็มหน้าจอการใช้งานข้อมูลตำแหน่ง = "คงที่" และเพิ่มแอตทริบิวต์ข้อมูลแบบเต็มหน้าจอองค์ประกอบ:
ตำแหน่งแบบเต็มหน้าจอ
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div> ลองตัวเอง» เคล็ดลับ: ตำแหน่งแบบเต็มหน้าจอเหมาะสำหรับภาพถ่าย, ภาพและวิดีโอ
เคล็ดลับ: แตะที่หน้าจอจะซ่อนและแสดงหัวและส่วนท้ายสำหรับตำแหน่งที่คงที่และแบบเต็มหน้าจอทั้ง
ตัวอย่างเพิ่มเติม
แสดงเฉพาะไอคอนในแถบเครื่องมือ
ใช้ ui-btn-icon-notext ระดับเพื่อแสดงเฉพาะไอคอนในส่วนหัวและส่วนท้ายปุ่ม