หน้า jQuery Mobile

เริ่มต้นด้วย jQuery Mobile

คำแนะนำ:ถึงแม้ว่า jQuery Mobile สามารถใช้กับอุปกรณ์เคลื่อนที่ทั้งหมด มันอาจมีปัญหาการควบคุมความเข้ากันกับคอมพิวเตอร์โดยสาร (เนื่องจากการสนับสนุน CSS3 ที่มีจำกัด)

ดังนั้นในบทความนี้ พวกเราแนะนำให้คุณใช้เบราเซอร์ Google Chrome เพื่อได้รับประสบการณ์การอ่านที่ดีที่สุด:

ตัวอย่าง

<body>
<div data-role="page">
  <div data-role="header">
    <h1>ยินดีต้อนรับที่หน้าเว็บของฉัน</h1>
  </div>
  <div data-role="content">
    <p>ฉันเป็นนักพัฒนาโปรแกรมมิ้งสำหรับอุปกรณ์เคลื่อนที่!</p>
  </div>
  <div data-role="footer">
    <h1>ข้อความสำหรับสอง</h1>
  </div>
</div>
</body>

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

ตัวอย่างการอธิบาย:

  • data-role="page" คือหน้าที่แสดงในเบราเซอร์
  • data-role="header" สร้างเมนูด้านบนของหน้า (ปกติใช้สำหรับหัวข้อและปุ่มการค้นหา)
  • data-role="content" กำหนดเนื้อหาของหน้า เช่นข้อความ、รูปภาพ、ฟอร์มและปุ่ม และอื่นๆ
  • data-role="footer" สร้างเมนูด้านล่างของหน้า

ในช่องที่เหล่านี้ คุณสามารถเพิ่มสิ่งที่เป็น HTML ได้เลย - ปารากราฟ、รูปภาพ、หัวข้อ、รายการ และอื่นๆ

คำแนะนำ:คุณสมบัติ data-* ของ HTML5 ใช้เพื่อสร้างสิ่งที่เป็นการสื่อสารที่เพียงพอดีด้านการสัมผัสด้วยมือในอุปกรณ์เคลื่อนที่ด้วย jQuery Mobile

การเพิ่มหน้าใน jQuery Mobile

ใน jQuery Mobile คุณสามารถสร้างหน้าหลายหน้าในภาษา HTML แบบเดียว:

โปรดแบ่งหน้าทุกหน้าด้วย id ที่เดี่ยวๆ และใช้คุณสมบัติ href ในการเชื่อมโยงระหว่างกัน:

ตัวอย่าง

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">โหลดหน้าสอง</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">ไปที่หน้าหนึ่ง</a>
  </div>
</div>

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

หมายเหตุ:วิเบรชั่นแบบ web ที่มีเนื้อหามากมายอาจส่งผลให้เวลาในการโหลดเพิ่มขึ้น (เช่นข้อความ、ลิงก์、รูปภาพและสคริปต์ และอื่นๆ): ถ้าคุณไม่ต้องการใช้ไฟล์ภายในลิงก์หน้านั้น โปรดใช้ไฟล์ภายนอก:

<a href="externalfile.html">โหลดหน้านอก</a>

ใช้หน้าเพื่อโดยสาร

โดยสารเป็นชนิดหน้าต่างที่ใช้ในการแสดงข้อมูลหรือขอคำตอบของผู้ใช้

ถ้าต้องการที่จะสร้างโดยสารต่อการกดลิงก์ (ทั้งหมดคลิกแบบเล็กน้อย) โปรดเพิ่ม data-rel="dialog" ให้กับลิงก์นั้น:

ตัวอย่าง

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo" data-rel="dialog">ไปที่หน้าสอง</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">ไปที่หน้าหนึ่ง</a>
  </div>
</div>

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