jQuery Mobile - คู่มือฉบับย่อ

JQuery Mobile เป็นเฟรมเวิร์กส่วนติดต่อผู้ใช้ซึ่งสร้างขึ้นบน jQuery Core และใช้สำหรับการพัฒนาเว็บไซต์หรือแอปพลิเคชันที่ตอบสนองที่สามารถเข้าถึงได้บนอุปกรณ์มือถือแท็บเล็ตและเดสก์ท็อป ใช้คุณสมบัติของ jQuery และ jQuery UI เพื่อให้คุณสมบัติ API สำหรับเว็บแอปพลิเคชันบนมือถือ

ได้รับการพัฒนาโดยทีมโครงการ jQuery ในปี 2010 และเขียนด้วย JavaScript

ทำไมต้องใช้ jQuery Mobile

  • สร้างเว็บแอปพลิเคชันที่จะทำงานในลักษณะเดียวกันบนอุปกรณ์มือถือแท็บเล็ตและเดสก์ท็อป

  • เข้ากันได้กับเฟรมเวิร์กอื่น ๆ เช่น PhoneGap, Whitelight เป็นต้น

  • มีชุดอินพุตแบบสัมผัสที่ใช้งานง่ายและวิดเจ็ต UI

  • การเพิ่มประสิทธิภาพแบบก้าวหน้านำฟังก์ชันพิเศษมาสู่แพลตฟอร์มมือถือแท็บเล็ตและเดสก์ท็อปทั้งหมดและเพิ่มการโหลดหน้าเว็บที่มีประสิทธิภาพและการรองรับอุปกรณ์ที่กว้างขึ้น

คุณสมบัติของ jQuery Mobile

  • สร้างขึ้นบน jQuery Core และ "เขียนน้อยลงทำมากขึ้น" เฟรมเวิร์ก UI

  • เป็นเฟรมเวิร์กโอเพ่นซอร์สและข้ามแพลตฟอร์มรวมถึงข้ามเบราว์เซอร์ที่เข้ากันได้

  • เขียนด้วย JavaScript และใช้คุณสมบัติของ jQuery และ jQuery UI เพื่อสร้างไซต์ที่เหมาะกับอุปกรณ์เคลื่อนที่

  • มันรวม HTML5, CCS3, jQuery และ jQuery UI ไว้ในเฟรมเวิร์กเดียวสำหรับการสร้างเพจที่มีสคริปต์น้อยที่สุด

  • รวมถึงระบบนำทาง Ajax ที่ใช้การเปลี่ยนหน้าแบบเคลื่อนไหว

ข้อดีของ jQuery Mobile

  • ง่ายต่อการเรียนรู้และพัฒนาแอปพลิเคชันหากคุณมีความรู้เกี่ยวกับคุณลักษณะ HTML5, CSS3

  • สามารถใช้งานข้ามแพลตฟอร์มและข้ามเบราว์เซอร์ได้ดังนั้นคุณจึงไม่ต้องกังวลกับการเขียนโค้ดที่แตกต่างกันสำหรับความละเอียดของอุปกรณ์แต่ละเครื่อง

  • คุณสามารถสร้างธีมที่กำหนดเองโดยใช้ ThemeRoller โดยไม่ต้องเขียนบรรทัดของโค้ด รองรับเบราว์เซอร์ HTML5 ทั้งหมด

  • ใช้ HTML5 ร่วมกับ JavaScript เพื่อให้พัฒนาเว็บแอปพลิเคชันได้ง่าย

  • สร้างขึ้นด้วยวิธีที่ช่วยให้รหัสเดียวกันสามารถปรับขนาดจากหน้าจอมือถือไปยังหน้าจอเดสก์ท็อปได้โดยอัตโนมัติ

ข้อเสียของ jQuery Mobile

  • มีตัวเลือกที่ จำกัด สำหรับธีม CSS ดังนั้นไซต์จึงดูคล้ายกันซึ่งสร้างขึ้นโดยธีมเหล่านี้

  • แอปพลิเคชั่นที่พัฒนาโดยใช้ jQuery Mobile ทำงานช้ากว่าบนมือถือ

  • จะใช้เวลานานมากขึ้นเมื่อคุณรวม jQuery mobile กับ mobile framework อื่น ๆ

  • ยากที่จะออกแบบภาพที่กำหนดเองได้อย่างสมบูรณ์

  • คุณสมบัติทั้งหมดในอุปกรณ์ไม่สามารถเข้าถึงได้โดย JavaScript ในเบราว์เซอร์

ในบทนี้เราจะพูดถึงวิธีการติดตั้งและตั้งค่า jQuery Mobile

ดาวน์โหลด jQuery Mobile

เมื่อคุณเปิดลิงค์jquerymobile.com/คุณจะเห็นว่ามีสองตัวเลือกในการดาวน์โหลด jQuery mobile library

  • Custom Download - คลิกปุ่มนี้เพื่อดาวน์โหลดไลบรารีเวอร์ชันที่กำหนดเอง

  • Latest Stable - คลิกปุ่มนี้เพื่อรับไลบรารีมือถือ jQuery เวอร์ชันล่าสุดและเสถียร

ดาวน์โหลดแบบกำหนดเองด้วยตัวสร้างดาวน์โหลด

เมื่อใช้ Download Builder คุณสามารถสร้างบิลด์แบบกำหนดเองรวมถึงเฉพาะบางส่วนของไลบรารีที่คุณต้องการ เมื่อคุณดาวน์โหลด jQuery Mobile เวอร์ชันปรับแต่งใหม่นี้คุณจะเห็นหน้าจอต่อไปนี้

คุณสามารถเลือกไลบรารีตามความต้องการของคุณและคลิกที่ไฟล์ Build My Download ปุ่ม.

การดาวน์โหลดที่เสถียร

คลิกปุ่มStableซึ่งนำไปสู่ไฟล์ ZIP ที่มีไฟล์ CSS และ JQuery โดยตรงสำหรับไลบรารีมือถือ jQuery เวอร์ชันล่าสุด แตกเนื้อหาไฟล์ ZIP ไปยังไดเร็กทอรีมือถือ jQuery

เวอร์ชันนี้มีไฟล์ทั้งหมดรวมถึงการอ้างอิงทั้งหมดชุดการสาธิตจำนวนมากและแม้แต่ชุดทดสอบหน่วยของไลบรารี เวอร์ชันนี้มีประโยชน์ในการเริ่มต้นใช้งาน

ดาวน์โหลด jQuery Library จาก CDNs

CDN (Content Delivery Network) เป็นเครือข่ายของเซิร์ฟเวอร์ที่ออกแบบมาเพื่อให้บริการไฟล์แก่ผู้ใช้ หากคุณใช้ลิงก์ CDN ในหน้าเว็บของคุณจะเป็นการย้ายความรับผิดชอบในการโฮสต์ไฟล์จากเซิร์ฟเวอร์ของคุณไปยังชุดไฟล์ภายนอก นอกจากนี้ยังมีข้อดีคือหากผู้เยี่ยมชมหน้าเว็บของคุณได้ดาวน์โหลดสำเนาของ jQuery mobile จาก CDN เดียวกันแล้วจะไม่ต้องดาวน์โหลดซ้ำ คุณสามารถรวมไฟล์ CDN ต่อไปนี้ลงในเอกสาร HTML

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

เรากำลังใช้ไลบรารีเวอร์ชัน CDN ตลอดบทช่วยสอนนี้ เราใช้ AMPPS (AMPPS คือ WAMP, MAMP และ LAMP stack ของเซิร์ฟเวอร์ Apache, MySQL, MongoDB, PHP, Perl & Python) เพื่อดำเนินการตามตัวอย่างทั้งหมดของเรา

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆของ jQuery Mobile

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   
      
   <body>
      <div data-role = "page" id = "pageone">
         <div data-role = "header">
            <h1>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

รายละเอียดของรหัสข้างต้นคือ -

  • รหัสนี้ระบุไว้ภายในองค์ประกอบส่วนหัว

<meta name = "viewport" content = "width = device-width, initial-scale = 1">
    • วิวพอร์ตใช้เพื่อระบุ (โดยเบราว์เซอร์) เพื่อแสดงระดับการซูมหน้าและขนาด

    • content = "width = device-width" ใช้เพื่อตั้งค่าความกว้างพิกเซลของเพจหรืออุปกรณ์หน้าจอ

    • initial-scale = 1 ตั้งค่าระดับการซูมเริ่มต้นเมื่อโหลดเพจเป็นครั้งแรก

  • รวม CDN ต่อไปนี้

<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  • เนื้อหาภายในแท็ก <body> คือหน้าที่แสดงในเบราว์เซอร์

<div data-role = "page">
   ...
</div>
  • data-role = "header"สร้างส่วนหัวที่ด้านบนสุดของหน้า

  • data-role = "main"ใช้เพื่อกำหนดเนื้อหาของเพจ

  • data-role = "footer"สร้างส่วนท้ายที่ด้านล่างของหน้า

  • class = "ui-content"ประกอบด้วยช่องว่างภายในและระยะขอบภายในเนื้อหาของหน้า

เอาต์พุต

ลองทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -

  • บันทึกโค้ด html ด้านบนเป็น simple_example.html ไฟล์ในโฟลเดอร์รูทเซิร์ฟเวอร์ของคุณ

  • เปิดไฟล์ HTML นี้เป็น http: //localhost/simple_example.html และผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

ผู้ใช้สามารถโต้ตอบกับเพจ jQuery Mobile ซึ่งจัดกลุ่มเนื้อหาเป็นมุมมองตรรกะและมุมมองเพจ มุมมองหน้าสามารถเคลื่อนไหวได้โดยใช้การเปลี่ยนหน้า สามารถสร้างหลายเพจโดยใช้เอกสาร HTML ดังนั้นจึงไม่จำเป็นต้องขอเนื้อหาจากเซิร์ฟเวอร์

ตารางต่อไปนี้แสดงประเภทของเพจโดยละเอียด

ซีเนียร์ ประเภทและคำอธิบาย
1 หน้าเดียว

หน้าเดียวถูกสร้างขึ้นในเอกสาร HTML โดยใช้วิธีการเขียนเทมเพลตมาตรฐาน

2 เทมเพลตหลายหน้า

หน้าหลายคนสามารถจะรวมอยู่ในเอกสาร HTML เดียวซึ่งโหลดกันโดยการเพิ่ม divs หลายที่มีข้อมูลบทบาท = "หน้า"

3 หน้ากล่องโต้ตอบ

กล่องโต้ตอบ Modal จะเปิดเนื้อหาในภาพซ้อนทับแบบโต้ตอบเหนือหน้า

อนุสัญญาไม่ใช่ข้อกำหนด

  • องค์ประกอบแอตทริบิวต์ data-role เช่นส่วนหัวส่วนท้ายหน้าและเนื้อหาถูกใช้เพื่อจัดเตรียมรูปแบบและโครงสร้างพื้นฐานของเพจ

  • สำหรับเอกสารหน้าเดียว Wrapper ของเพจจำเป็นสำหรับการเริ่มต้นอัตโนมัติถูกตั้งค่าเป็นทางเลือก

  • องค์ประกอบโครงสร้างสามารถยกเว้นได้สำหรับเว็บเพจที่มีเค้าโครงแบบกำหนดเอง

  • ในการจัดการเพจกระดาษห่อเพจจะถูกแทรกโดยเฟรมเวิร์กเมื่อมาร์กอัปไม่รวมอยู่ด้วย

การกำหนดหน้าเว็บล่วงหน้า

รวมถึงแอตทริบิวต์data-prefetchเราสามารถดึงข้อมูลหน้าไปยัง DOM ในเทมเพลตหน้าเดียว สำหรับข้อมูลเพิ่มเติมคลิกที่นี่

แคช DOM

เมื่อหน่วยความจำของเบราว์เซอร์เต็มใน DOM จะทำให้เบราว์เซอร์มือถือทำงานช้าลงหรืออาจเกิดปัญหาเนื่องจากการโหลดหลายหน้า มีวิธีง่ายๆในการทำให้ DOM เป็นระเบียบเรียบร้อย -

  • เมื่อเพจถูกโหลดผ่าน ajax มันจะระบุว่าให้ลบเพจออกจาก DOM เมื่อคุณเปลี่ยนเส้นทางไปยังเพจอื่น

  • หน้าก่อนหน้านี้ที่คุณเคยเยี่ยมชมสามารถเรียกดูได้จากแคชเมื่อคุณกลับมาดูอีกครั้ง

  • แทนที่จะลบเพจคุณสามารถบอกให้ jQuery mobile เก็บไว้ใน DOM ได้โดยใช้บรรทัดต่อไปนี้ -

$.mobile.page.prototype.options.domCache = true;
  • ตั้งค่าตัวเลือก domCache เป็นจริงบนปลั๊กอินของเพจเพื่อเก็บเพจทั้งหมดไว้ใน DOM ซึ่งเคยเยี่ยมชมก่อนหน้านี้

pageContainerElement.page({ domCache: true });

jQuery Mobile มีชุดไอคอนในตัวซึ่งสามารถใช้กับปุ่มปุ่มมุมมองรายการซึ่งจะทำให้ปุ่มน่าสนใจยิ่งขึ้น

ตารางต่อไปนี้แสดงรายการไอคอนบางส่วนที่ใช้ใน jQuery Mobile framework

ซีเนียร์ พื้นที่ไอคอนและคำอธิบาย
1 ชุดไอคอน

มันตั้งค่าไอคอนในปุ่ม

2 ไอคอนตำแหน่ง

เป็นการระบุตำแหน่งของไอคอนในปุ่ม

3 ไอคอนเท่านั้น

จะแสดงเฉพาะไอคอนในปุ่ม

4 ไอคอนเงา

เพิ่มเงาไอคอนในปุ่มของคุณ

5 กำลังลบแวดวง

จะลบวงกลมสีเทารอบ ๆ ไอคอน

6 ไอคอนสีดำหรือสีขาว

มันเปลี่ยนสีของไอคอนเป็นสีดำหรือสีขาว

7 การรวม alt และ nodisc

มันรวมคลาสaltและnodiscเข้ากับไอคอน

อนุญาตให้เปลี่ยนค่าคุณสมบัติที่เกิดขึ้นในช่วงเวลาที่กำหนดและปรับเปลี่ยนพฤติกรรมขององค์ประกอบจากสถานะหนึ่งไปเป็นอีกสถานะหนึ่งโดยใช้สไตล์ที่แตกต่างกันสำหรับแต่ละสถานะ

ตารางต่อไปนี้แสดงรายการการเปลี่ยนหน้าที่ใช้ใน jQuery Mobile framework -

ซีเนียร์ การเปลี่ยนและคำอธิบาย สำหรับเพจ สำหรับ Dialogs
1

fade

คุณสามารถทำให้องค์ประกอบจางลงและมองไม่เห็นได้

จางหน้า กล่องโต้ตอบ Fade
2

flip

พลิกองค์ประกอบจากด้านหลังไปด้านหน้าไปยังหน้าถัดไป

พลิกหน้า Flip Dialog
3

pop

คุณสามารถสร้างหน้าต่างป๊อปอัป

ป๊อปเพจ ป๊อปโต้ตอบ
4

flow

แสดงหน้าถัดไปโดยเว้นหน้าปัจจุบันไว้

โฟลว์เพจ โฟลว์ไดอะล็อก
5

slide

คุณสามารถเลื่อนหน้าจากขวาไปซ้าย

หน้าสไลด์ สไลด์ไดอะล็อก
6

slidefade

เลื่อนหน้าจากขวาไปซ้ายและจางหายไปในหน้าถัดไป

หน้า Slidefade กล่องโต้ตอบ Slidefade
7

slideup

เลื่อนหน้าจากล่างขึ้นบน

หน้า Slideup กล่องโต้ตอบ Slideup
8

slidedown

เลื่อนหน้าจากบนลงล่าง

หน้าเลื่อนลง กล่องโต้ตอบแบบเลื่อนลง
9

turn

คุณสามารถเปิดไปหน้าถัดไป

เปิดหน้า เปิดกล่องโต้ตอบ
10

none

คุณไม่สามารถใช้เอฟเฟกต์การเปลี่ยนแปลงใด ๆ โดยใช้แอตทริบิวต์นี้

ไม่มีหน้า ไม่มีกล่องโต้ตอบ

การตั้งค่าการเปลี่ยนและการกำหนดค่าส่วนกลาง

ตามค่าเริ่มต้นเพจจะมี fadeการเปลี่ยนแปลงในกรอบ คุณสามารถใช้การเปลี่ยนแบบกำหนดเองได้โดยเพิ่มไฟล์data-transitionแอตทริบิวต์ของลิงค์ คุณสามารถใช้เอฟเฟกต์การเปลี่ยนเริ่มต้นที่แตกต่างกันสำหรับเพจโดยใช้defaultPageTransitionตัวเลือกทั่วโลก สำหรับกล่องโต้ตอบคุณสามารถใช้ประโยชน์จากไฟล์defaultDialogTransition ตัวเลือก

การเปลี่ยนทางเลือก

การเปลี่ยนภาพทั้งหมดรองรับการแปลงแบบ 3 มิติยกเว้นการเปลี่ยนแบบจาง อุปกรณ์ที่ไม่รองรับการเปลี่ยนภาพ 3 มิติจะต้องใช้ประโยชน์จากการเปลี่ยนภาพแบบเลือนลาง เบราว์เซอร์บางประเภทไม่รองรับการแปลง 3 มิติสำหรับการเปลี่ยนแปลงแต่ละประเภทดังนั้นคุณสามารถใช้ไฟล์fade เป็นทางเลือกสำรองของการเปลี่ยนแปลงเริ่มต้น

Max Scroll สำหรับการเปลี่ยน

การเปลี่ยนจะถูกตั้งค่าเป็นไม่มีเมื่อคุณเลื่อนจากหรือไปยังหน้าและตำแหน่งการเลื่อนจะสูงเป็นสามเท่าของหน้าจออุปกรณ์ บางครั้งคุณอาจตอบสนองช้าหรือเบราว์เซอร์อาจขัดข้องเมื่อคุณคลิกองค์ประกอบการนำทางใด ๆ ดังนั้นเพื่อหลีกเลี่ยงสิ่งนี้เรากำลังใช้ตำแหน่งเลื่อนสำหรับการเปลี่ยนโดยใช้getMaxScrollForTransition ฟังก์ชัน

ความกว้างสูงสุดสำหรับการเปลี่ยน

คุณสามารถปิดใช้งานการเปลี่ยนได้เมื่อความกว้างของหน้าต่างสูงกว่าความกว้างของพิกเซล คุณสามารถกำหนดค่าความกว้างสูงสุดสำหรับการเปลี่ยนโดยใช้$.mobile.maxTransitionWidthglobal option ซึ่งตั้งค่าเป็น false ตามค่าเริ่มต้น ใช้ค่าต่างๆเช่นความกว้างของพิกเซลหรือค่าเท็จและการเปลี่ยนจะถูกตั้งค่าเป็นไม่มีถ้าไม่ใช่ค่าเท็จเมื่อหน้าต่างสูงกว่าค่าที่ระบุ

การเปลี่ยนหน้าเดียวกัน

คุณสามารถเพิ่มการเปลี่ยนไปยังเพจปัจจุบันโดยใช้ไฟล์ allowSamePageTransition ตัวเลือกของวิดเจ็ตเพจคอนเทนเนอร์ change() วิธี.

การสร้างการเปลี่ยนแบบกำหนดเอง

คุณสามารถสร้างการเปลี่ยนแบบกำหนดเองในเพจโดยใช้ $.mobile.transitionHandlers ตัวเลือกที่ขยายการเลือกช่วงการเปลี่ยนภาพบนเว็บไซต์หรือแอปพลิเคชัน

ระบบกริดใช้เพื่อสร้างเค้าโครงหน้าผ่านชุดแถวและคอลัมน์ที่เก็บเนื้อหาของคุณ

ตารางด้านล่างแสดงรายละเอียดประเภทของกริด

ซีเนียร์ ประเภทและคำอธิบาย
1 กริด

jQuery mobile grid system สร้างเค้าโครงหน้าผ่านชุดแถวและคอลัมน์

2 ปุ่มในกริด

คอลเลกชันของปุ่มในรูปแบบกริดใน jQuery mobile

3 ตารางตอบสนองที่กำหนดเอง

รูปแบบกริดพื้นฐานสามารถขยายไปยังเค้าโครงตอบสนองที่กำหนดเองได้อย่างง่ายดายโดยใช้แบบสอบถามสื่อใน CSS

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

ตารางต่อไปนี้แสดงประเภทของวิดเจ็ตโดยละเอียด

ซีเนียร์ ประเภทและคำอธิบาย
1 ปุ่มต่างๆ

ระบุปุ่มที่คลิกได้ซึ่งมีเนื้อหาเช่นข้อความหรือรูปภาพ

2 ช่องทำเครื่องหมาย

ช่องทำเครื่องหมายถูกใช้เมื่อจำเป็นต้องเลือกมากกว่าหนึ่งตัวเลือก

3 Radiobox

ปุ่มตัวเลือกใช้เมื่อไม่มีตัวเลือกมากมายให้เลือกเพียงตัวเลือกเดียว

4 เลือกวันที่

จะเน้นที่อินพุตเพื่อเปิดปฏิทินแบบโต้ตอบในภาพซ้อนทับขนาดเล็ก

5 พับได้

พับได้ช่วยให้คุณขยายหรือยุบเนื้อหาเมื่อใดก็ตามที่คลิก มีประโยชน์มากสำหรับอุปกรณ์เคลื่อนที่ซึ่งนำเสนอเนื้อหาสั้น ๆ

6 กลุ่มควบคุม

กลุ่มควบคุมจัดเตรียมชุดปุ่มเพื่อระบุบล็อกเดียวที่ดูเหมือนส่วนประกอบการนำทาง

7 กรองได้

เมื่อใช้แอตทริบิวต์data-filter = "true"คุณสามารถกรองลูกขององค์ประกอบใดก็ได้

8 Flipswitch

Flip Switch ช่วยให้คุณสามารถปิด / เปิดหรือจริง / เท็จสวิตช์โดยคลิกที่สวิตช์เพื่อป้อนสไตล์บูลีน

9 มุมมองรายการ

วัตถุประสงค์ของคอมโพเนนต์ listview คือการแสดงเนื้อหาที่ซับซ้อนและกำหนดเองในรายการ

10 รถตัก

jQuery Mobile ให้วิธีต่างๆในการโหลดสถานะไปยังองค์ประกอบ

11 Navbar

วิดเจ็ต navbar คือชุดปุ่มที่เชื่อมโยงคุณไปยังเว็บเพจหรือส่วนอื่น ๆ

12 แผง

พาเนลใช้เพื่อแสดงส่วนประกอบ DOM ในกล่อง

13 ป๊อปอัพ

ป๊อปอัปคืออินเทอร์เฟซผู้ใช้ที่ปรากฏภายในหน้าต่างเล็ก ๆ เพื่อแสดงข้อความรูปภาพและเนื้อหาอื่น ๆ

14 Rangeslider

วิดเจ็ต Rangeslider มีด้ามจับคู่หนึ่งให้คุณเลือกช่วงค่าตัวเลข

15 เลือกเมนู

เมนูเลือกจะมีตัวเลือกต่างๆในรูปแบบของรายการแบบเลื่อนลงซึ่งผู้ใช้สามารถเลือกตัวเลือกหนึ่งตัวเลือกขึ้นไป

16 ตัวเลื่อน

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

17 ตาราง

jQuery Mobile ใช้ตารางเพื่อแสดงข้อมูลในรูปแบบของแถวและคอลัมน์กล่าวคือแสดงข้อมูลในรูปแบบตาราง

18 แท็บ

วิดเจ็ตแท็บเป็นส่วนขยายของวิดเจ็ตแท็บ jQuery ui ซึ่งยอมรับวิธีการและตัวเลือกทั้งหมด

19 Textinput

แท็ก <input> ใช้เพื่อประกาศองค์ประกอบอินพุตซึ่งเป็นตัวควบคุมที่อนุญาตให้ผู้ใช้ป้อนข้อมูล

20 แถบเครื่องมือ

วิดเจ็ตแถบเครื่องมือมือถือ jQuery ช่วยให้คุณสร้างส่วนหัวและส่วนท้าย

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

ตารางต่อไปนี้แสดงรายการเหตุการณ์บางอย่างสำหรับอุปกรณ์มือถือซึ่ง jQuery Mobile รองรับ

ซีเนียร์ เหตุการณ์และคำอธิบาย
1 jQuery Mobile เหตุการณ์

ตอบสนองต่อการโต้ตอบของผู้ใช้เมื่อผู้ใช้คลิกบนหน้าใดหน้าหนึ่งหรือวางเมาส์เหนือองค์ประกอบ ฯลฯ

2 jQuery Touch เหตุการณ์

จะให้เหตุการณ์สัมผัสเมื่อผู้ใช้สัมผัสหน้าจอ

3 jQuery Scroll เหตุการณ์

จะเริ่มเหตุการณ์การเลื่อนเมื่อผู้ใช้เลื่อนขึ้นและลง

4 jQuery Orientation Event

จะทริกเกอร์เหตุการณ์การวางแนวเมื่อผู้ใช้หมุนอุปกรณ์ในแนวตั้งหรือแนวนอน

5 เหตุการณ์หน้า jQuery

จัดเตรียมเหตุการณ์ของเพจเมื่อผู้ใช้ซ่อนสร้างโหลดหรือยกเลิกการโหลดเพจ

การสร้างแบบฟอร์มทำได้ง่ายและยืดหยุ่นมากซึ่งสร้างขึ้นด้วยการผสมผสานระหว่างองค์ประกอบและปุ่มแบบฟอร์มมาตรฐาน

ตารางต่อไปนี้แสดงประเภทของแบบฟอร์มโดยละเอียด

ซีเนียร์ ประเภทและคำอธิบาย
1 แบบฟอร์มพื้นฐาน

jQuery Mobile มีระบบเค้าโครงที่มีประสิทธิภาพง่ายและหลากหลายสำหรับ Forms ซึ่งรวมสไตล์ฟอร์มปุ่มป้อนข้อมูลและการรองรับแถบเลื่อน

2 อินพุตแบบฟอร์ม

แท็ก <input> คือตัวควบคุมที่อนุญาตให้ผู้ใช้ป้อนข้อมูล

3 เลือกแบบฟอร์ม

ในรูปแบบของตัวเลือกรายการแบบเลื่อนลงมีไว้สำหรับเมนูที่เลือก

4 ตัวเลื่อนแบบฟอร์ม

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

5 การรีเฟรชและการเริ่มต้นองค์ประกอบฟอร์มโดยอัตโนมัติ

วิธีการรีเฟรชใช้เพื่ออัปเดตสถานะใหม่ของตัวควบคุมฟอร์มด้วยตัวเองและอัปเดตตัวควบคุมฟอร์มด้วย JavaScript

มันกำหนดธีมประเภทต่างๆบนปุ่มแถบนำทางบล็อกลิงค์และอื่น ๆ คุณสามารถตั้งค่าธีมโดยใช้data-theme attribute

ตารางต่อไปนี้อธิบายการใช้ฟังก์ชันของธีมในพื้นที่ต่างๆซึ่ง jQuery Mobile รองรับ

ซีเนียร์ ฟังก์ชั่นและคำอธิบาย
1 ธีม

มีธีมที่แตกต่างกันสองประเภทเช่นธีม "a" และธีม "b" เพื่อปรับแต่งรูปลักษณ์ของแอปพลิเคชัน

2 ส่วนหัวและส่วนท้ายของธีมในกล่องโต้ตอบ

ตั้งค่าธีมสำหรับส่วนหัวและส่วนท้ายในกล่องโต้ตอบ

3 ปุ่มธีมไอคอนและป๊อปอัป

ระบุธีมสำหรับปุ่มไอคอนและป๊อปอัป

4 ปุ่มชุดรูปแบบในส่วนหัวและส่วนท้าย

แสดงธีมสำหรับปุ่มในส่วนหัวและส่วนท้าย

5 แถบการนำทางตามธีม

ใช้ธีมสำหรับแถบนำทางในส่วนหัวหรือส่วนท้าย

6 แผงธีม

คุณสามารถใช้ชุดรูปแบบสำหรับแผงควบคุม

7 ปุ่มพับตามธีมและปุ่มแยก

แสดงธีมสำหรับปุ่มที่ยุบได้และแยก

8 รายการธีมและรายการที่พับได้

แสดงธีมสำหรับรายการและรายการที่ยุบได้

9 แบบฟอร์มที่พับได้

คุณสามารถใช้ธีมสำหรับแบบฟอร์ม

jQuery CSS คลาส

คุณสามารถใช้คลาส CSS ประเภทต่างๆเพื่อจัดรูปแบบองค์ประกอบตามที่อธิบายไว้ในส่วนด้านล่าง

ชั้นเรียนระดับโลก

คลาสต่อไปนี้สามารถใช้เป็นคลาสโกลบอลบนวิดเจ็ต jQuery Mobile -

ซีเนียร์ ชั้นเรียนและคำอธิบาย
1

ui-corner-all

จะแสดงองค์ประกอบที่มีมุมโค้งมน

2

ui-shadow

จะแสดงเงาขององค์ประกอบ

3

ui-overlay-shadow

จะแสดงเงาซ้อนทับสำหรับองค์ประกอบ

4

ui-mini

จะแสดงองค์ประกอบที่เล็กกว่า

คลาสปุ่ม

ตารางต่อไปนี้แสดงรายการคลาสของปุ่มที่ใช้กับองค์ประกอบจุดยึดหรือปุ่ม -

ซีเนียร์ ชั้นเรียนและคำอธิบาย
1

ui-btn

ระบุว่าองค์ประกอบจะมีลักษณะเป็นปุ่ม

2

ui-btn-inline

แสดงปุ่มเป็นองค์ประกอบแบบอินไลน์ซึ่งช่วยประหยัดพื้นที่ตามความจำเป็นสำหรับฉลาก

3

ui-btn-icon-top

วางไอคอนไว้เหนือข้อความ

4

ui-btn-icon-right

วางไอคอนไว้ทางขวาของข้อความ

5

ui-btn-icon-bottom

วางไอคอนไว้ด้านล่างข้อความ

6

ui-btn-icon-left

วางไอคอนไว้ทางซ้ายของข้อความ

7

ui-btn-icon-notext

มันแสดงไอคอนเดียว

8

ui-btn-a|b

จะแสดงสีของปุ่ม ("a" จะเป็นสีพื้นหลังเริ่มต้นคือสีเทาและ "b" จะเปลี่ยนสีพื้นหลังเป็นสีดำ)

ไอคอนคลาส

ตารางต่อไปนี้แสดงรายการคลาสไอคอนที่ใช้กับองค์ประกอบจุดยึดหรือปุ่ม -

ซีเนียร์ ชั้นเรียนและคำอธิบาย
1

ui-icon-action

มันแสดงไอคอนการกระทำ

2

ui-icon-alert

จะแสดงเครื่องหมายตกใจภายในรูปสามเหลี่ยม

3

ui-icon-arrow-d-l

ระบุลงด้วยลูกศรซ้าย

4

ui-icon-arrow-d-r

ระบุลงด้วยลูกศรขวา

5

ui-icon-arrow-u-l

ระบุขึ้นด้วยลูกศรซ้าย

6

ui-icon-arrow-u-r

ระบุขึ้นด้วยลูกศรขวา

7

ui-icon-arrow-l

มันระบุลูกศรซ้าย

8

ui-icon-arrow-r

มันระบุลูกศรขวา

9

ui-icon-arrow-u

มันระบุลูกศรขึ้น

10

ui-icon-arrow-d

มันระบุลูกศรลง

11

ui-icon-bars

จะแสดงแถบแนวนอน 3 แถบที่อยู่เหนืออีกแถบหนึ่ง

12

ui-icon-bullets

จะแสดงสัญลักษณ์แสดงหัวข้อย่อยแนวนอน 3 อันด้านบนอีกอันหนึ่ง

13

ui-icon-carat-d

จะแสดงกะรัตลง

14

ui-icon-carat-l

จะแสดงกะรัตทางซ้าย

15

ui-icon-carat-r

จะแสดงกะรัตทางขวา

16

ui-icon-carat-u

จะแสดงกะรัตขึ้น

17

ui-icon-check

จะแสดงไอคอนเครื่องหมายถูก

18

ui-icon-comment

ระบุความคิดเห็นหรือข้อความ

19

ui-icon-forbidden

จะแสดงไอคอนต้องห้าม

20

ui-icon-forward

ระบุไอคอนไปข้างหน้า

21

ui-icon-navigation

ระบุไอคอนการนำทาง

22

ui-icon-recycle

จะแสดงไอคอนรีไซเคิล

23

ui-icon-refresh

จะแสดงไอคอนรีเฟรช

24

ui-icon-tag

ระบุไอคอนแท็ก

25

ui-icon-video

มันระบุไอคอนวิดีโอหรือกล้อง

ธีมคลาส

มีธีมที่แตกต่างกันสองประเภทเช่นธีม "a" และธีม "b" เพื่อปรับแต่งรูปลักษณ์ของแอปพลิเคชัน คุณสามารถสร้างคลาสธีมของคุณเองได้โดยการต่อท้าย swatch letter (az) ตารางต่อไปนี้แสดงรายการคลาสของธีมซึ่งระบุตั้งแต่ตัวอักษร a ถึง z

ซีเนียร์ ชั้นเรียนและคำอธิบาย
1

ui-bar-(a-z)

จะแสดงสีของแถบรวมทั้งส่วนหัวส่วนท้ายและแถบอื่น ๆ ในหน้า

2

ui-body-(a-z)

จะแสดงสีสำหรับบล็อกเนื้อหารวมถึงมุมมองรายการป๊อปอัปตัวเลื่อนแผงตัวโหลด ฯลฯ

3

ui-btn-(a-z)

จะแสดงสีสำหรับปุ่ม

4

ui-group-theme-(a-z)

จะแสดงสีสำหรับกลุ่มควบคุมมุมมองรายการและชุดที่ยุบได้

5

ui-overlay-(a-z)

จะแสดงสีพื้นหลังสำหรับป๊อปอัปกล่องโต้ตอบและคอนเทนเนอร์ของเพจ

6

ui-page-theme-(a-z)

จะแสดงสีสำหรับหน้า

ตารางเรียน

ตารางต่อไปนี้แสดงรายการคลาสกริดที่ใช้กับความกว้างเท่ากันไม่มีขอบพื้นหลังระยะขอบหรือช่องว่างภายใน

ซีเนียร์ ชั้นกริด คอลัมน์ ความกว้างของคอลัมน์ สอดคล้องกับ
1 ui-grid-solo 1 100% ui-block-a
2 ui-grid-a 2 50% / 50% ui-block-a | ข
3 ui-grid-b 3 33% / 33% / 33% ui-block-a | b | c
4 ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a | b | c | d
5 ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a | b | c | d | e

ปุ่ม

มันระบุปุ่มคลิกได้ที่มีเนื้อหาเช่นข้อความหรือภาพที่ใช้คลาสUI-BTN เลิกใช้งานแล้วในเวอร์ชัน 1.4 ใช้UI-BTNแอตทริบิวต์แทนการใช้ข้อมูลบทบาท = "ปุ่ม"แอตทริบิวต์

ตารางต่อไปนี้แสดงรายการองค์ประกอบปุ่มที่ใช้กับแอตทริบิวต์ข้อมูล

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-corners

กำหนดว่าปุ่มควรมีมุมมนหรือไม่

จริง | เท็จ
2

data-icon

กำหนดไอคอนของปุ่ม

ค่าเริ่มต้นคือไม่มีไอคอน
3

data-iconpos

เป็นการกำหนดตำแหน่งของไอคอน

ซ้าย | ขวา | ด้านบน | ด้านล่าง
4

data-iconshadow

กำหนดว่าไอคอนของปุ่มควรมีเงาหรือไม่

จริง | เท็จ
5

data-inline

กำหนดว่าปุ่มควรอยู่ในบรรทัดหรือไม่

จริง | เท็จ
6

data-mini

กำหนดว่าปุ่มควรแสดงในขนาดที่เล็กกว่าหรือขนาดปกติ

จริง | เท็จ
7

data-shadow

กำหนดว่าปุ่มควรมีเงาหรือไม่

จริง | เท็จ
8

data-theme

จะแสดงสีของชุดรูปแบบสำหรับปุ่ม

จดหมาย (az)

ช่องทำเครื่องหมาย

ตารางต่อไปนี้แสดงรายการองค์ประกอบช่องทำเครื่องหมายที่ใช้กับ type = "checkbox".

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-mini

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

จริง | เท็จ
2

data-role

หยุดการจัดรูปแบบของช่องทำเครื่องหมายเป็นปุ่ม

ไม่มี
3

data-theme

จะแสดงสีของชุดรูปแบบสำหรับช่องทำเครื่องหมาย

จดหมาย (az)

พับได้

ตารางต่อไปนี้แสดงรายการองค์ประกอบที่ยุบได้ที่ใช้กับ data-role = "collapsible" แอตทริบิวต์

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-collapsed

เป็นการระบุว่าควรปิดหรือขยายเนื้อหา

จริง | เท็จ
2

data-collapsed-cue-text

จะแสดงข้อเสนอแนะสำหรับผู้ใช้ที่มีซอฟต์แวร์โปรแกรมอ่านหน้าจอ

ค่าเริ่มต้นคือการยุบเนื้อหา
3

data-collapsed-icon

กำหนดไอคอนของปุ่มที่พับได้

ไอคอนเริ่มต้นคือ "บวก"
4

data-content-theme

จะแสดงสีของธีมสำหรับเนื้อหาที่พับได้

จดหมาย (az)
5

data-expanded-cue-text

จะแสดงข้อเสนอแนะสำหรับผู้ใช้ที่มีซอฟต์แวร์โปรแกรมอ่านหน้าจอ

ค่าเริ่มต้นคือการขยายเนื้อหา
6

data-expanded-icon

จะแสดงปุ่มที่พับได้เมื่อคุณขยายเนื้อหา

ไอคอนเริ่มต้นคือ "ลบ"
7

data-iconpos

เป็นการกำหนดตำแหน่งของไอคอน

ซ้าย | ขวา | ด้านบน | ด้านล่าง
8

data-inset

กำหนดว่าปุ่มที่พับได้ควรแสดงด้วยมุมโค้งมนและระยะขอบหรือไม่

จริง | เท็จ
9

data-mini

กำหนดว่าปุ่มที่พับได้ควรแสดงในขนาดที่เล็กกว่าหรือขนาดปกติ

จริง | เท็จ
10

data-theme

จะแสดงสีของชุดรูปแบบสำหรับปุ่มที่พับได้

จดหมาย (az)

ชุดพับได้

ตารางต่อไปนี้แสดงรายการองค์ประกอบชุดที่ยุบได้ที่ใช้กับไฟล์ data-role = "collapsibleset" แอตทริบิวต์

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-collapsed-icon

กำหนดไอคอนของปุ่มที่พับได้

ไอคอนเริ่มต้นคือ "บวก"
2

data-content-theme

จะแสดงสีของธีมสำหรับเนื้อหาที่พับได้

จดหมาย (az)
3

data-expanded-icon

จะแสดงปุ่มที่พับได้เมื่อคุณขยายเนื้อหา

ไอคอนเริ่มต้นคือ "ลบ"
4

data-iconpos

เป็นการกำหนดตำแหน่งของไอคอน

ซ้าย | ขวา | ด้านบน | ด้านล่าง
5

data-inset

กำหนดว่าปุ่มที่พับได้ควรแสดงด้วยมุมโค้งมนและระยะขอบหรือไม่

จริง | เท็จ
6

data-mini

กำหนดว่าปุ่มที่พับได้ควรแสดงในขนาดที่เล็กกว่าหรือขนาดปกติ

จริง | เท็จ
7

data-theme

จะแสดงสีของชุดรูปแบบสำหรับปุ่มที่พับได้

จดหมาย (az)

กลุ่มควบคุม

ตารางต่อไปนี้แสดงรายการองค์ประกอบกลุ่มควบคุมที่ใช้กับ data-role = "controlgroup" แอตทริบิวต์ -

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-exclude-invisible

กำหนดว่าจะยกเว้นเด็กที่มองไม่เห็นในการกำหนดมุมโค้งมน

จริง | เท็จ
2

data-mini

กำหนดว่ากลุ่มควรแสดงในขนาดที่เล็กกว่าหรือขนาดปกติ

จริง | เท็จ
3

data-theme

จะแสดงสีของธีมสำหรับกลุ่มควบคุม

จดหมาย (az)
4

data-type

ระบุว่ากลุ่มควรแสดงในรูปแบบแนวนอนหรือแนวตั้ง

แนวนอน | แนวตั้ง

กล่องโต้ตอบ

ตารางต่อไปนี้แสดงรายการองค์ประกอบโต้ตอบที่ใช้กับ data-dialog="true" แอตทริบิวต์

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-close-btn

เป็นการกำหนดตำแหน่งของปุ่มปิด

ซ้าย | ขวา | ไม่มี
2

data-close-btn-text

เป็นการกำหนดข้อความสำหรับปุ่มปิด

ข้อความ
3

data-corners

กำหนดว่ากล่องโต้ตอบควรแสดงด้วยมุมมนหรือไม่

จริง | เท็จ
4

data-dom-cache

ระบุว่าแคช DOM ต้องล้างหรือไม่สำหรับแต่ละเพจ

จริง | เท็จ
5

data-overlay-theme

เป็นการกำหนดสีซ้อนทับของหน้าโต้ตอบ

จดหมาย (az)
6

data-theme

กำหนดสีธีมของหน้าโต้ตอบ

จดหมาย (az)
7

data-title

กำหนดหัวเรื่องของหน้าโต้ตอบ

ข้อความ

การเพิ่มประสิทธิภาพ

ตารางต่อไปนี้แสดงรายการองค์ประกอบการปรับปรุงที่ใช้กับ data-enhance="false" or data-ajax = "false" แอตทริบิวต์

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-enhance

คุณสามารถจัดรูปแบบหน้าได้โดยตั้งค่าแอตทริบิวต์นี้เป็น "true" คุณไม่สามารถจัดรูปแบบเพจได้หากตั้งค่าเป็น "เท็จ"

จริง | เท็จ
2

data-ajax

ระบุว่าเพจต้องโหลดจาก Ajax หรือไม่

จริง | เท็จ

แถบเครื่องมือคงที่

ตารางต่อไปนี้แสดงรายการองค์ประกอบของแถบเครื่องมือที่ใช้กับ data-position = "fixed" แอตทริบิวต์

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-disable-page-zoom

เป็นการกำหนดว่าผู้ใช้สามารถปรับขนาด / ซูมหน้าได้หรือไม่

จริง | เท็จ
2

data-fullscreen

กำหนดแถบเครื่องมือต้องอยู่ในตำแหน่งด้านบนและ / หรือด้านล่าง

จริง | เท็จ
3

data-tap-toggle

ระบุว่าผู้ใช้สามารถสลับการมองเห็นแถบเครื่องมือเมื่อแตะได้หรือไม่

จริง | เท็จ
4

data-transition

แสดงผลการเปลี่ยนแปลงเมื่อคุณแตะหรือคลิกองค์ประกอบ

สไลด์ | จาง | ไม่มี
5

data-update-page-padding

อัปเดตช่องว่างภายในของหน้าโดยใช้การปรับขนาดการเปลี่ยนแปลงและการอัปเดตเหตุการณ์เค้าโครง

จริง | เท็จ
6

data-visible-on-page-show

จะกำหนดการมองเห็นแถบเครื่องมือเมื่อเพจพาเรนต์ถูกแสดง

จริง | เท็จ

พลิกสลับสวิตช์

ตารางต่อไปนี้แสดงรายการองค์ประกอบการสลับการพลิกที่ใช้กับ data-role = "flipswitch" แอตทริบิวต์ -

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-mini

กำหนดว่าสวิตช์ควรแสดงในขนาดที่เล็กกว่าหรือขนาดปกติ

จริง | เท็จ
2

data-on-text

เป็นการกำหนดข้อความ "เปิด" บนสวิตช์พลิก

ค่าเริ่มต้นคือ "เปิด"
3

data-off-text

เป็นการกำหนดข้อความ "ปิด" บนสวิตช์พลิก

ค่าเริ่มต้นคือ "ปิด"

ส่วนท้าย

ตารางต่อไปนี้แสดงรายการองค์ประกอบส่วนท้ายที่ใช้กับแอตทริบิวต์data-role = "footer" -

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-id

กำหนดรหัสเฉพาะ

ข้อความ
2

data-position

กำหนดว่าควรวางส่วนท้ายไว้ที่ด้านล่างหรืออยู่ในแนวเดียวกับเนื้อหาของหน้า

อินไลน์ | แก้ไขแล้ว
3

data-fullscreen

กำหนดว่าควรวางส่วนท้ายไว้ที่ด้านล่างและเหนือเนื้อหาของหน้าหรือไม่

จริง | เท็จ
4

data-theme

เป็นการกำหนดสีธีมของส่วนท้าย

จดหมาย (az)

หัวข้อ

ตารางต่อไปนี้แสดงรายการองค์ประกอบส่วนหัวที่ใช้กับ data-role = "header" แอตทริบิวต์

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-id

กำหนดรหัสเฉพาะ

ข้อความ
2

data-position

กำหนดว่าควรวางตำแหน่งส่วนหัวที่ด้านล่างหรืออยู่ในแนวเดียวกับเนื้อหาของหน้า

อินไลน์ | แก้ไขแล้ว
3

data-fullscreen

กำหนดว่าควรวางตำแหน่งส่วนหัวที่ด้านล่างและเหนือเนื้อหาของหน้าหรือไม่

จริง | เท็จ
4

data-theme

เป็นการกำหนดสีธีมของส่วนหัว

จดหมาย (az)

อินพุต

ตารางต่อไปนี้แสดงรายการองค์ประกอบอินพุตที่ใช้กับ type = "text|search|etc" แอตทริบิวต์

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-clear-btn

กำหนดว่าองค์ประกอบอินพุตควรมีปุ่มใสหรือไม่

จริง | เท็จ
2

data-clear-btn-text

เป็นการกำหนดข้อความสำหรับปุ่มล้าง

ข้อความ
3

data-mini

กำหนดว่าอินพุตควรแสดงในขนาดที่เล็กกว่าหรือขนาดปกติ

จริง | เท็จ
4

data-role

หยุดการจัดรูปแบบอินพุตหรือพื้นที่ข้อความเป็นปุ่ม

ไม่มี
5

data-theme

กำหนดสีธีมขององค์ประกอบอินพุต

จดหมาย (az)

ลิงค์

ตารางต่อไปนี้แสดงรายการองค์ประกอบลิงก์ที่ใช้กับ jQuery Mobile

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-ajax

ระบุว่าเพจต้องโหลดผ่าน Ajax หรือไม่

จริง | เท็จ
2

data-direction

ใช้สำหรับการเปลี่ยนย้อนกลับ

ย้อนกลับ
3

data-dom-cache

ระบุว่าแคช jQuery DOM ต้องชัดเจนหรือไม่สำหรับเพจ

จริง | เท็จ
4

data-prefetch

ใช้เพื่อดึงข้อมูลหน้าเว็บลงใน DOM ล่วงหน้า

จริง | เท็จ
5

data-rel

ระบุลักษณะการทำงานของลิงค์

กลับ | โต้ตอบ | ภายนอก | ป๊อปอัพ
6

data-transition

เป็นการกำหนดการเปลี่ยนจากหน้าหนึ่งไปอีกหน้าหนึ่ง

จาง | พลิก | ไหล | ป๊อป | สไลด์ | slidedown | สไลด์เฟด | สไลด์อัพ | เลี้ยว | ไม่มี
7

data-position-to

เป็นการกำหนดตำแหน่งของกล่องป๊อปอัป

ต้นกำเนิด | ตัวเลือก jQuery | หน้าต่าง

รายการ

ตารางต่อไปนี้แสดงองค์ประกอบรายการที่ใช้กับ data-role = "listview" แอตทริบิวต์

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-autodividers

จะแบ่งรายการโดยอัตโนมัติ

จริง | เท็จ
2

data-count-theme

กำหนดสีของชุดรูปแบบขององค์ประกอบการนับ

จดหมาย (az)
3

data-divider-theme

กำหนดสีของชุดรูปแบบสำหรับตัวแบ่งรายการ

จดหมาย (az)
4

data-filter

ใช้เพื่อกรองค่ารายการในกล่องค้นหา

จริง | เท็จ
5

data-filter-placeholder

เป็นการกำหนดข้อความบางส่วนในช่องค้นหา

ข้อความ
6

data-filter-theme

กำหนดสีของธีมสำหรับตัวกรองการค้นหา

จดหมาย (az)
7

data-icon

มีไอคอนสำหรับรายการ

ค่าเริ่มต้นคือไม่มีไอคอน
8

data-inset

กำหนดว่ารายการควรแสดงด้วยมุมโค้งมนและระยะขอบหรือไม่

จริง | เท็จ
9

data-split-icon

กำหนดไอคอนสำหรับปุ่มแยก

ไอคอนเริ่มต้นคือ "arrow-r"
10

data-split-theme

กำหนดสีของชุดรูปแบบสำหรับปุ่มแยก

จดหมาย (az)
11

data-theme

เป็นการกำหนดสีของชุดรูปแบบสำหรับรายการ

จดหมาย (az)

รายการ

ตารางต่อไปนี้แสดงองค์ประกอบรายการที่ใช้กับ data-role = "listview" แอตทริบิวต์

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-filtertext

ใช้เพื่อกรองค่ารายการโดยใช้ข้อความในกล่องค้นหา

ข้อความ
2

data-icon

มีไอคอนสำหรับรายการ

ค่าเริ่มต้นคือไม่มีไอคอน
3

data-role

กำหนดตัวแบ่งสำหรับรายการ

รายการแบ่ง
4

data-theme

เป็นการกำหนดสีของชุดรูปแบบสำหรับรายการ

จดหมาย (az)

Navbar

ตารางต่อไปนี้แสดงรายการองค์ประกอบ navbar ที่ใช้กับ data-role = "navbar" แอตทริบิวต์

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-icon

มีไอคอนสำหรับรายการ

ค่าเริ่มต้นคือไม่มีไอคอน
2

data-iconpos

เป็นการกำหนดตำแหน่งสำหรับไอคอน

ซ้าย | ขวา | ด้านบน | ด้านล่าง | notext

หน้า

ตารางต่อไปนี้แสดงรายการองค์ประกอบของหน้าที่ใช้กับ data-role = "page" แอตทริบิวต์

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-dom-cache

ระบุว่าแคช DOM ต้องล้างหรือไม่สำหรับแต่ละเพจ

จริง | เท็จ
2

data-overlay-theme

เป็นการกำหนดสีซ้อนทับของหน้าโต้ตอบ

จดหมาย (az)
3

data-theme

กำหนดสีของธีมสำหรับเพจ

จดหมาย (az)
4

data-title

มีชื่อสำหรับเพจ

ค่าเริ่มต้นคือไม่มีไอคอน
5

data-url

ใช้เพื่ออัปเดต URL

url

ป๊อปอัพ

ตารางต่อไปนี้แสดงรายการองค์ประกอบป๊อปอัปที่ใช้กับ data-role = "popup" แอตทริบิวต์

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-corners

กำหนดว่าป๊อปอัปควรแสดงด้วยมุมโค้งมนและระยะขอบหรือไม่

จริง | เท็จ
2

data-dismissible

เป็นการกำหนดว่าควรปิดป๊อปอัปโดยคลิกภายนอกหรือไม่

จริง | เท็จ
3

data-history

กำหนดว่าป๊อปอัปควรแสดงประวัติของรายการเมื่อเปิดหรือไม่

จริง | เท็จ
4

data-overlay-theme

เป็นการกำหนดสีซ้อนทับของกล่องป๊อปอัพ

จดหมาย (az)
5

data-shadow

จะแสดงเงาของกล่องป๊อปอัป

จริง | เท็จ
6

data-theme

กำหนดสีของธีมสำหรับกล่องป๊อปอัป

จดหมาย (az)
7

data-tolerance

เป็นการกำหนดขอบของหน้าต่าง

30, 15, 30, 15

ปุ่มตัวเลือก

ตารางต่อไปนี้แสดงรายการองค์ประกอบปุ่มตัวเลือกที่ใช้กับ type = "radio" แอตทริบิวต์

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-mini

กำหนดว่าปุ่มควรแสดงในขนาดที่เล็กกว่าหรือขนาดปกติ

จริง | เท็จ
2

data-role

จะหยุดรูปแบบของปุ่มตัวเลือกเป็นปุ่มที่ปรับปรุงแล้ว

ไม่มี
3

data-theme

กำหนดสีของชุดรูปแบบสำหรับปุ่มตัวเลือก

จดหมาย (az)

เลือก

ตารางต่อไปนี้แสดงรายการองค์ประกอบเลือกที่ใช้กับ jQuery Mobile

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-icon

มีไอคอนสำหรับองค์ประกอบที่เลือก

ค่าเริ่มต้นคือ "arrow-d"
2

data-iconpos

เป็นการกำหนดตำแหน่งของไอคอน

ซ้าย | ขวา | ด้านบน | ด้านล่าง
3

data-inline

กำหนดว่าปุ่มควรอยู่ในบรรทัดหรือไม่

จริง | เท็จ
4

data-mini

กำหนดว่าการเลือกควรแสดงในขนาดที่เล็กกว่าหรือขนาดปกติ

จริง | เท็จ
5

data-native-menu

ใช้เมนูแบบกำหนดเองเมื่อตั้งค่าเป็นเท็จ

จริง | เท็จ
6

data-overlay-theme

เป็นการกำหนดสีซ้อนทับสำหรับเมนูเลือกแบบกำหนดเอง

จดหมาย (az)
7

data-placeholder

ใช้เพื่อตั้งค่าองค์ประกอบตัวเลือกของการเลือกที่ไม่ใช่เนทีฟ

จริง | เท็จ
8

data-role

หยุดการจัดรูปแบบขององค์ประกอบที่เลือกเป็นปุ่ม

ไม่มี
9

data-theme

จะแสดงสีของชุดรูปแบบสำหรับองค์ประกอบที่เลือก

จดหมาย (az)

ตัวเลื่อน

ตารางต่อไปนี้แสดงรายการองค์ประกอบแถบเลื่อนที่ใช้กับ type = "range" แอตทริบิวต์

ซีเนียร์ ข้อมูลแอตทริบิวต์และคำอธิบาย มูลค่า
1

data-highlight

ไฮไลต์แถบเลื่อน

จริง | เท็จ
2

data-mini

กำหนดว่าแถบเลื่อนควรแสดงในขนาดที่เล็กกว่าหรือขนาดปกติ

จริง | เท็จ
3

data-role

จะหยุดการจัดรูปแบบของตัวควบคุมแถบเลื่อนเป็นปุ่ม

ไม่มี
4

data-theme

จะแสดงสีของธีมสำหรับตัวควบคุมแถบเลื่อน

จดหมาย (az)
5

data-track-theme

จะแสดงสีของธีมสำหรับแทร็กตัวเลื่อน

จดหมาย (az)