jQuery Toolbar มือถือ
องค์ประกอบ Toolbar มักจะอยู่ในหัวและหาง - ให้นำทางง่ายต่อการเข้าถึง:
หัวหน้าบาร์
คอลัมน์หัวมักจะมีหน้าชื่อ / โลโก้หรือหนึ่งหรือสองปุ่ม (ปกติหน้าบ้านหรือตัวเลือกการค้นหา)
คุณสามารถเพิ่มปุ่มไปทางด้านซ้ายหรือขวาของศีรษะ
รหัสต่อไปนี้จะเพิ่มปุ่มไปทางด้านซ้ายของหัวของข้อความชื่อที่เพิ่มปุ่มไปทางขวาของหัวของข้อความชื่อเรื่องนี้:
ตัวอย่าง
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left"> บ้าน </a>
<h1> ยินดีต้อนรับสู่หน้าแรกของฉัน </ h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left"> ค้นหา </a>
</ div>
ลอง»
รหัสต่อไปนี้จะเพิ่มปุ่มไปทางด้านซ้ายของหัวของข้อความชื่อเรื่องนี้:
ตัวอย่าง
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left"> บ้าน </a>
<h1> ยินดีต้อนรับสู่หน้าแรกของฉัน </ h1>
</ div>
ลอง»
แต่ถ้าคุณใส่ลิงค์ปุ่มวางอยู่หลัง <h1> องค์ประกอบจะไม่สามารถที่จะแสดงข้อความไปทางขวา เพิ่มปุ่มไปทางขวาของศีรษะของชื่อระบุระดับเป็น "UI-btn ขวา":
ตัวอย่าง
<h1> ยินดีต้อนรับสู่หน้าแรกของฉัน </ h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left"> ค้นหา </a>
</ div>
ลอง»
 | ส่วนหัวอาจจะมีหนึ่งหรือสองปุ่มหางโดยไม่ จำกัด |
|---|
บาร์หาง
ความยืดหยุ่นมากกว่าแถบส่วนหัวของคอลัมน์หลัง - ทั่วหน้าของพวกเขาทำงานได้มากขึ้นและความแปรปรวนก็สามารถมีปุ่มมากที่สุดเท่าที่:
ตัวอย่าง
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Facebook </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Twitter </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Instagram </a>
</ div>
ลอง»
หมายเหตุ: หางและหัวรูปแบบที่แตกต่างกัน (padding และไม่มีช่องว่างและปุ่มไม่ศูนย์กลาง) เราสามารถใช้รูปแบบที่เรียบง่ายในการแก้ปัญหานี้
นอกจากนี้คุณยังสามารถใช้ปุ่มในชุดนอนหรือแนวตั้งด้านหลัง:
ตัวอย่าง
<div ข้อมูลบทบาท = "controlgroup " data-type = "แนวนอน">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Facebook </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Twitter </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Instagram </a>
</ div>
</ div>
ลอง»
การวางตำแหน่งหัวและหางบาร์บาร์
หัวและหางสามารถวางในสามวิธี:
- Inline - เริ่มต้น แถบส่วนหัวยูไนเต็ดด้านในและด้านหลังบาร์และหน้าเนื้อหา
- ถาวร - บาร์หัวและหางบาร์จับจ้องไปที่ด้านบนและด้านล่างของหน้า
- เต็มหน้าจอ - โหมดการวางตำแหน่งคงเป็นพื้นเดียวกันกับบาร์หัวและหางบาร์จับจ้องไปที่ด้านบนและด้านล่างของหน้า แต่เมื่อเขาออกจากหน้าจอเมื่อเลื่อนแถบเครื่องมือจะไม่ปรากฏอีกครั้งโดยอัตโนมัติเว้นแต่แตะที่หน้าจอซึ่งภาพหรือหมวดหมู่วิดีโอได้รับการยกเข้าไปในความรู้สึกของการประยุกต์ใช้เป็นประโยชน์อย่างมาก โปรดทราบว่าแถบเครื่องมือโหมดนี้จะครอบคลุมเนื้อหาของหน้าเพื่อให้มีการใช้งานที่ดีที่สุดในโอกาสพิเศษ
โดยใช้สถานที่ให้บริการข้อมูลตำแหน่งเพื่อหาบาร์หัวและหางบาร์:
การวางตำแหน่งแบบอินไลน์ (เริ่มต้น)
<div data-role="footer" data-position="inline" ></div>
ลอง»
ตำแหน่งคงที่
<div data-role="footer" data-position="fixed" ></div>
ลอง»
ต้องการเปิดใช้งานการวางตำแหน่งแบบเต็มหน้าจอให้ใช้ข้อมูลตำแหน่ง = "คงที่" และเพิ่มแอตทริบิวต์ข้อมูลแบบเต็มหน้าจอองค์ประกอบ:
สถานที่ตั้งเต็มหน้าจอ
<div data-role="footer" data-position="fixed" data-fullscreen="true" ></div>
ลอง»
เคล็ดลับ: การกำหนดเป้าหมายเต็มนำไปใช้กับภาพถ่าย, ภาพและวิดีโอ
เคล็ดลับ: การวางตำแหน่งและการกำหนดเป้าหมายแบบเต็มหน้าจอโดยการคลิกบนหน้าจอจะแสดงและซ่อนหัวคอลัมน์และบาร์หางคงที่
ตัวอย่างเพิ่มเติม
บนแถบเครื่องมือไอคอนแสดงเฉพาะ
บนแถบเครื่องมือแสดงไอคอนเดียวที่คุณสามารถใช้คลาส UI-btn-ไอคอน notext