สายเครื่องมือ jQuery Mobile

สายเครื่องมือ jQuery Mobile

องค์ประกอบโครงการปฏิบัติการปกติมักถูกใช้เก็บไว้ในหัวเว็บและท้ายเว็บ เพื่อที่จะทำให้การเดินทางที่ "เข้าถึงแล้ว" ง่ายขึ้น:

บาร์หัวเว็บ

หัวเว็บทั่วไปจะมีหัวเว็บหรือ LOGO หรือหนึ่งถึงสองตัวบิตัน (เป็นบิตันหน้าแรก ตัวเลือกหรือบิตันค้นหาส่วนใหญ่)

คุณสามารถเพิ่มบิตันที่ด้านซ้าย หรือ/และด้านขวาของหัวเว็บได้

รหัสที่แสดงด้านล่างจะเพิ่มบิตันที่ด้านซ้ายของข้อความหัวเว็บ และที่ด้านขวา:

ตัวอย่าง

<div data-role="header">
  <a href="#" data-role="button">หน้าแรก</a>
  <h1>ยินดีต้อนรับสู่หน้าหลักของฉัน</h1>
  <a href="#" data-role="button">ค้นหา</a>
</div>

ทดลองด้วยตัวเอง

รหัสที่แสดงด้านล่างจะเพิ่มบิตันที่ด้านซ้ายของข้อความหัวเว็บ:

<div data-role="header">
  <a href="#" data-role="button">หน้าแรก</a>
  <h1>ยินดีต้อนรับสู่หน้าหลักของฉัน</h1>
</div>

อย่างไรก็ตาม ถ้าคุณจะใส่ลิงก์บิตันหลังจากองค์ประกอบ <h1> มันจะไม่แสดงขึ้นทางด้านขวาของข้อความ เพื่อที่จะเพิ่มบิตันข้างขวาของข้อความหัวเว็บ โปรดกำหนดชื่อประเภท "ui-btn-right":

ตัวอย่าง

<div data-role="header">
  <h1>ยินดีต้อนรับสู่หน้าหลักของฉัน</h1>
  <a href="#" data-role="button" class="ui-btn-right">ค้นหา</a>
</div>

ทดลองด้วยตัวเอง

คำแนะนำ:หัวเว็บสามารถรวมถึงบิตันหนึ่งหรือสองตัว แต่ท้ายเว็บไม่มีจำกัด

ท้ายเว็บบาร์

เมื่อเทียบกับหัวเว็บ ท้ายเว็บมีความยอมรับและขยายตัวได้ดีกว่า - มันเป็นไปได้ที่จะรวมความจำเป็นต่างๆ ในจำนวนที่ต้องการ:

ตัวอย่าง

<div data-role="footer">
  <a href="#" data-role="button">โอนไปยังเวบโบ</a>
  <a href="#" data-role="button">โอนไปยังทวิตเตอร์เทนเน็ท</a>
  <a href="#" data-role="button">โอนไปยังเพรสเซ้งเวย์</a>
</div>

ทดลองด้วยตัวเอง

หมายเหตุ:สไตล์ของส่วนท้ายและหัวเวียนต่างกัน (มันจะลดออฟเซตภายในและช่องว่าง และปุ่มจะไม่มีการจัดตั้งตรงกลาง). ถ้าต้องการแก้ปัญหานี้ โปรดตั้งชื่อรูปแบบ class "ui-btn" ให้กับส่วนท้าย:

ตัวอย่าง

<div data-role="footer" class="ui-btn">

ทดลองด้วยตัวเอง

คุณยังสามารถเลือกว่าจะเรียงกลุ่มปุ่มระดับนอกในแนวตรงหรือตั้งแต่นอกไปข้างล่างในส่วนท้ายของหน้า:

ตัวอย่าง

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">โอนไปยังเวบโบ</a>
    <a href="#" data-role="button" data-icon="plus">โอนไปยังทวิตเตอร์เทนเน็ท</a>
    <a href="#" data-role="button" data-icon="plus">โอนไปยังเพรสเซ้งเวย์</a>
  </div>
</div>

ทดลองด้วยตัวเอง

ตำแหน่งหัวเวียนและส่วนท้าย

มีสามวิธีที่จะจัดเรียงหัวเวียนและส่วนท้าย:

  • Inline - ต้นตอน. หัวเวียนและส่วนท้ายของหน้าจะอยู่ในแถวกับเนื้อหาของหน้า。
  • Fixed - หัวเวียนและส่วนท้ายของหน้าจะอยู่ที่ด้านบนและด้านล่างของหน้า。
  • Fullscreen - คล้าย fixed; หัวเวียนและส่วนท้ายของหน้าจะอยู่ที่ด้านบนและด้านล่างของหน้า และยังข้างเคียงเนื้อหาของหน้าด้วย. มันยังเห็นเหลือเนื้อเพลิงเล็กน้อย

ใช้คุณสมบัติ data-position ที่จะตำแหน่งหัวเวียนและส่วนท้ายของหน้า:

ตำแหน่ง Inline (เริ่มต้น)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

ทดลองด้วยตัวเอง

ตำแหน่ง Fixed

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

ทดลองด้วยตัวเอง

ถ้าต้องการเปิดใช้ตำแหน่งทั่วไป ใช้ data-position="fixed" และเพิ่มคุณสมบัติ data-fullscreen ให้กับองค์ประกอบนี้:

Fullscreen ตำแหน่ง

<div data-role="header" data-position="fixed" data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"} data-fullscreen="true"</div>

ทดลองด้วยตัวเอง

คำแนะนำ:fullscreen มีความเหมาะสมสำหรับรูปภาพ รูปแบบและวิดีโอมาก

คำแนะนำ:สำหรับการติดตั้ง fixed และ fullscreen การที่จับที่จอจะซ่อนและแสดงหัวเว็บและสุดท้าย