คุณสมบัติ Data jQuery Mobile

jQuery Data Attribute

jQuery Mobile ใช้ HTML5 data-* บริการสร้างลักษณะที่เหมาะสมสำหรับการสัมผัสสำหรับอุปกรณ์เคลื่อนที่

ในรายการอ้างอิงด้านล่าง ตัวเลขหนักกำหนดค่าเริ่มต้น

Button

ส่วนของลิงก์ที่มี data-role="button" โดยเมื่อมีโซ่ด้านนอกนี้ ตัวองค์ประกอบปุ่ม ลิงก์ และช่องข้อมูลจะถูกกำหนดสไตล์ปุ่มโดยอัตโนมัติ ไม่จำเป็นต้องมี data-role="button"

Data แอตทริบิวต์ ค่า การอธิบาย
data-corners true | false กำหนดว่าปุ่มมีมุมโค้งหรือไม่
data-icon Icons Reference กำหนดอัญรรค์ปุ่ม โดยมาตราฐานไม่มีอัญรรค์ปุ่ม
data-iconpos left | right | top | bottom | notext กำหนดตำแหน่งของภาพวาด
data-iconshadow true | false กำหนดว่าอัญรรค์ปุ่มมีเงาหรือไม่
data-inline true | false กำหนดว่าปุ่มควรอยู่ในแถวหรือไม่
data-mini true | false กำหนดขนาดของปุ่มว่าเล็กหรือปกติ
data-shadow true | false กำหนดว่าปุ่มมีเงาหรือไม่
data-theme letter (a-z) กำหนดสีหลักของปุ่ม

คำเตือน：ถ้าต้องการรวมกลุ่มปุ่มหลายตัว ใช้โดยเลือกโซ่ด้านนอกที่มี属性 data-role="controlgroup" และ data-type="horizontal|vertical" เพื่อกำหนดว่าจะรวมปุ่มตามแนวนอนไหลหรือตามแนวตั้ง

Checkbox

label และ input ที่มี type="checkbox" มีคู่กัน จะถูกตั้งรูปแบบเป็นปุ่มอัตโนมัติ ไม่จำเป็นต้องมี data-role

Data แอตทริบิวต์ ค่า การอธิบาย
data-mini true | false กำหนดว่าตัวเลือกควรมีขนาดเล็กหรือปกติ
data-role none ป้องกัน jQuery Mobile จากการตั้งรูปแบบตัวเลือกเป็นปุ่ม
data-theme letter (a-z) กำหนดสีหลักของตัวเลือก

คำเตือน：หากต้องการรวมกันหลายๆตัวเลือก ใช้ data-role="controlgroup" และ data-type="horizontal|vertical" เพื่อกำหนดการรวมกันทั้งระดับนอนหรือตั้งฝั่งของตัวเลือก

Collapsible

ตัวแทนของชื่อหัวข้อ หลังจากนั้นคือแทงที่อยู่ในตัวแทนขององค์กรที่มี attribute data-role="collapsible"

Data แอตทริบิวต์ ค่า การอธิบาย
data-collapsed true | false กำหนดว่าเนื้อหาควรปิดหรือแสดงออก
data-collapsed-icon Icons Reference กำหนดไอคอนของปุ่มย่อย โดยมาตรฐานคือ “plus”
data-content-theme letter (a-z) กำหนดสีหลักของเนื้อหาที่สามารถย่อยออกมา และเพิ่มมุมโค้งเข้าไปในเนื้อหาที่สามารถย่อยออกมา
data-expanded-icon Icons Reference กำหนดไอคอนของปุ่มย่อยเมื่อเนื้อหาถูกแสดง โดยมาตรฐานคือ “ลูกเตือน”
data-iconpos left | right | top | bottom กำหนดตำแหน่งของภาพวาด
data-inset true | false กำหนดว่าปุ่มย่อยควรมีรูปแบบมุมโค้งและเส้นบรรเลื่องหรือไม่
data-mini true | false กำหนดว่าปุ่มย่อยออกมีขนาดเล็กหรือปกติ
data-theme letter (a-z) กำหนดสีหลักของปุ่มย่อย

Collapsible Set

เนื้อหาที่สามารถย่อยออกมาในตัวแทนขององค์กรที่มี attribute data-role="collapsible-set"

Data แอตทริบิวต์ ค่า การอธิบาย
data-collapsed-icon Icons Reference กำหนดไอคอนของปุ่มย่อย โดยมาตรฐานคือ “เพิ่ม”
data-content-theme letter (a-z) กำหนดสีหลักของเนื้อหาที่สามารถย่อยออกมา
data-expanded-icon Icons Reference กำหนดไอคอนของปุ่มย่อยเมื่อเนื้อหาถูกแสดง โดยมาตรฐานคือ “ลูกเตือน”
data-iconpos left | right | top | bottom | notext กำหนดตำแหน่งของภาพวาด
data-inset true | false กำหนดว่าโครงสร้าง collapsibles มีรูปแบบมุมโค้งและเส้นบรรเลื่อง
data-mini true | false กำหนดว่าปุ่มย่อยออกมีขนาดเล็กหรือปกติ
data-theme letter (a-z) กำหนดสีหลักของชุดที่สามารถย่อยออกมา

Content

ตัวแทนขององค์กรที่มี属性 data-role="content"。

Data แอตทริบิวต์ ค่า การอธิบาย
data-theme letter (a-z) กำหนดสีหลักของเนื้อหา โดยมาตรฐานคือ "c"。

Controlgroup

ตัวแทน <div> หรือ <fieldset> ที่มี属性 data-role="controlgroup" ที่มีการรวมกันหลายๆปุ่มที่มีรูปแบบเดียวกัน input (บนลิงก์ที่เป็นปุ่ม、ตัวเลือกตามตัวเลือก、ตัวเลือกต่างของคอนโฟร์ม、โปรแกรมเลือก)

Data แอตทริบิวต์ ค่า การอธิบาย
data-mini true | false กำหนดว่าโครงสร้างที่มีขนาดเล็กหรือปกติ。
data-type horizontal | vertical กำหนดการแสดงทั้งระดับนอนหรือตั้งฝั่ง。

Dialog

ตัวแทนของ data-role="dialog" หรือสมาชิกที่มี data-rel="dialog"。

Data แอตทริบิวต์ ค่า การอธิบาย
data-close-btn-text sometext กำหนดข้อความของปุ่มปิดของโต๊ะโคม
data-dom-cache true | false กำหนดว่าจะล้างความทรงจำ DOM ของ jQuery สำหรับหน้าเดี่ยวๆ (ถ้าตั้งเป็น true ต้องใช้การจัดการ DOM และทดสอบทั้งหมดของอุปกรณ์เคลื่อนที่)
data-overlay-theme letter (a-z) กำหนดสีที่ติดตั้ง (background) ของหน้าการประมวลคำพูด
data-theme letter (a-z) กำหนดสีหลักของหน้าการจัดการข้อความ
data-title sometext กำหนดข้อความของหัวข้อหน้าการจัดการข้อความ

Enhancement

โคนที่มีคุณสมบัติ data-enhance="false" หรือ data-ajax="false"

Data แอตทริบิวต์ ค่า การอธิบาย
data-enhance true | false ถ้าตั้งเป็น "true" (ค่าเริ่มต้น), jQuery Mobile จะเพิ่มสไตล์หน้าอัตโนมัติเพื่อที่จะเหมาะสมกับอุปกรณ์เคลื่อนที่ ถ้าตั้งเป็น "false" ฟรามเมอร์เมาะจะไม่ตั้งสไตล์หน้า
data-ajax true | false กำหนดว่าจะโหลดหน้าด้วย AJAX หรือไม่

หมายเหตุ:data-enhance="false" ตัวอย่าง เช่น ใช้ร่วมกับ $.mobile.ignoreContentEnabled=true" เพื่อหยุดการเพิ่มสไตล์หน้าโดยอัตโนมัติของ jQuery Mobile

เมื่อ $.mobile.ignoreContentEnabled ถูกตั้งเป็น true ลิงก์หรือองค์ประกอบฟอร์มที่มี data-ajax="false" ในโคนนั้นจะถูกละเลยโดยฟรามเมอร์เมาะ

Fieldcontainer

โคนที่มี data-role="fieldcontain" ที่เป็นลูกของ label/form

Fixed Toolbar

โคนที่มีคุณสมบัติ data-role="header" หรือ data-role="footer" และมีคุณสมบัติ data-position="fixed"

Data แอตทริบิวต์ ค่า การอธิบาย
data-disable-page-zoom true | false กำหนดว่าผู้ใช้มีความสามารถย่อยหรือขยายหน้าหรือไม่
data-fullscreen true | false กำหนดว่าทางบาร์เมนูจะต้องอยู่ที่ด้านบนและหรือด้านล่าง
data-tap-toggle true | false กำหนดว่าผู้ใช้มีความสามารถเปลี่ยนสถานะที่ทางบาร์เมนูที่มีความเห็นได้ด้วยการกดหรือคลิก
data-transition slide | fade | none กำหนดความเปลี่ยนแปลงของตัวแทนเมื่อมีการกดหรือคลิก
data-update-page-padding true | false กำหนดการปรับความห่างของด้านบน ด้านล่าง และด้านในของหน้าเมื่อมีการ resize หรือ transition หรือ การเกิดเหตุ "updatelayout" (jQuery Mobile ส่วนใหญ่จะปรับความห่างของด้านในเมื่อเกิดเหตุ "pageshow")
data-visible-on-page-show true | false กำหนดความเห็นได้ที่ของทางบาร์เมนูของหน้าในหน้าพ่อ

Flip Toggle Switch

องค์ประกอบ <select> ที่มี data-role="slider" และสอง <option> ในละแวก

Data แอตทริบิวต์ ค่า การอธิบาย
data-mini true | false กำหนดขนาดปุ่มเลือกเป็นขนาดเล็กหรือปกติ
data-role none ป้องกันไม่ให้ jQuery Mobile ตั้งรูปแบบปุ่มเลือกเป็นปุ่ม
data-theme letter (a-z) กำหนดสีประจำปุ่มเลือก
data-track-theme letter (a-z) กำหนดสีประจำรายละเอียด

หลังเรื่อง

องค์ประกอบที่มี data-role="footer"

Data แอตทริบิวต์ ค่า การอธิบาย
data-id sometext กำหนด ID แห่งเดียวโดยมีความจำเป็นสำหรับหลังเรื่องที่คงอยู่ตลอดเวลา
data-position inline | fixed กำหนดว่าหลังเรื่องจะมีความสัมพันธ์เป็น inline หรือคงอยู่ด้านล่าง
data-fullscreen true | false กำหนดว่าหลังเรื่องจะมีตำแหน่งตลอดเวลาอยู่ด้านล่างและคลุมเนื้อหาหน้า (เห็นได้เล็กน้อย)
data-theme letter (a-z) กำหนดสีประจำหลังเรื่อง

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

หัวเรื่อง

องค์ประกอบที่มี data-role="header"

Data แอตทริบิวต์ ค่า การอธิบาย
data-id sometext กำหนด ID แห่งเดียวโดยมีความจำเป็นสำหรับหัวเรื่องที่คงอยู่ตลอดเวลา
data-position inline | fixed กำหนดว่าหัวเรื่องจะมีความสัมพันธ์เป็น inline หรือคงอยู่ด้านบน
data-fullscreen true | false กำหนดว่าหัวเรื่องจะมีตำแหน่งตลอดเวลาอยู่ด้านบนและคลุมเนื้อหาหน้า (เห็นได้เล็กน้อย)
data-theme letter (a-z) กำหนดสีประจำหัวเรื่อง

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

ลิงก์

ทุกลิงก์ รวมถึงลิงก์ที่มี data-role="button" และปุ่มส่งฟอร์ม

Data แอตทริบิวต์ ค่า การอธิบาย
data-ajax true | false กำหนดว่าจะโหลดหน้าด้วย AJAX หรือไม่ เพื่อปรับปรุงประสบการณ์ผู้ใช้และทางอนุรักษ์ ถ้าตั้งเป็น false จะมีการทำการเรียกหน้าปกติโดย jQuery Mobile
data-direction reverse กลับความเคลื่อนไหวทางอนุรักษ์ (ใช้เมื่อหน้าหรือดาล็อก)
data-dom-cache true | false กำหนดว่าจะล้างความทรงจำ jQuery DOM ของหน้าต่างเดี่ยว (ถ้าค่าเป็น true คุณจะต้องสนใจการจัดการ DOM และทดสอบทั้งหมดของอุปกรณ์มือถือ)
data-prefetch true | false กำหนดว่าจะเก็บหน้าเพื่อใช้ใน DOM หรือไม่ ให้มันสามารถใช้ได้ทันทีเมื่อผู้ใช้เข้าถึง
data-rel back | dialog | external | popup กำหนดตัวเลือกเกี่ยวกับวิธีที่ลิงก์จะเปิด กลับ - ย้ายไปข้างหลังในประวัติ ดาล็อก - เปิดหน้าเป็นดาล็อก ไม่บันทึกลงในประวัติ ภายนอก - ลิงก์ไปยังโดเมนอื่น เปิด - เปิดหน้าต่างประกาย
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none กำหนดวิธีการเปลี่ยนไปยังหน้าต่อไปจากหน้าปัจจุบัน ดูเพิ่มเติมเกี่ยวกับ jQuery Mobile transition
data-position-to origin | jQuery selector | window กำหนดตำแหน่งของ popup ต้นกำเนิด - โดยเริ่มต้น jQuery selector - ปรากฎขึ้นบนตัวแทนที่กำหนด. หน้าต่าง - ปรากฎขึ้นในกลางหน้าจอ.

รายการ

ตัวแทน <ol> หรือ <ul> ที่มีคุณสมบัติ data-role="listview".

Data แอตทริบิวต์ ค่า การอธิบาย
data-autodividers true | false กำหนดว่าจะแบ่งรายการอัตโนมัติหรือไม่.
data-count-theme letter (a-z) กำหนดสีหลักของหลอดนับ. โดยเริ่มต้นคือ "c".
data-divider-theme letter (a-z) กำหนดสีหลักของขอบเขตรายการ. โดยเริ่มต้นคือ "b".
data-filter true | false กำหนดว่าจะเพิ่มแถวกรองในรายการหรือไม่.
data-filter-placeholder sometext กำหนดข้อความในแถวกรอง. โดยเริ่มต้นคือ "Filter items...".
data-filter-theme letter (a-z) กำหนดสีหลักของโปรแกรมกรองค้นหา. โดยเริ่มต้นคือ "c".
data-icon Icons Reference กำหนดรูปภาพสัญลักษณ์ของรายการ.
data-inset true | false กำหนดว่าจะเพิ่มรูปแบบรันเวลล์และมุมมองด้านนอกเพื่อรายการ.
data-split-icon Icons Reference กำหนดรูปภาพสัญลักษณ์ของปุ่มแบ่ง. โดยเริ่มต้นคือ "arrow-r".
data-split-theme letter (a-z) กำหนดสีหลักของปุ่มแบ่ง. โดยเริ่มต้นคือ "b".
data-theme letter (a-z) กำหนดสีหลักของรายการ.

รายการ

ตัวแทน <li> ใน <ol> หรือ <ul> ที่มีคุณสมบัติ data-role="listview".

Data แอตทริบิวต์ ค่า การอธิบาย
data-filtertext sometext กำหนดข้อความที่ต้องการค้นหาขณะกระทำการกรอง. ข้อความนี้ ไม่ใช่ข้อความของรายการที่จริงๆ ที่จะถูกค้นหา.
data-icon Icons Reference กำหนดรูปภาพสัญลักษณ์ของรายการ.
data-role list-divider กำหนดขอบเขตของรายการ.
data-theme letter (a-z) กำหนดสีหลักของรายการ.

หมายเหตุ:คุณสมบัติ data-icon มีผลบริบทเฉพาะรายการที่มีลิงก์.

Navbar

ตัวแทน <li> ในตัวแทนที่มีคุณสมบัติ data-role="navbar".

Data แอตทริบิวต์ ค่า การอธิบาย
data-icon Icons Reference กำหนดรูปภาพสัญลักษณ์ของรายการ.
data-iconpos left | right | top | bottom | notext กำหนดตำแหน่งของภาพวาด

คำเตือน：แถวนำทางรับมาจากตัวแทนพ่อของตน data-theme-swatch. การตั้งค่า data-theme ให้แถวนำทางไม่สามารถทำได้. สามารถตั้งค่า data-theme แยกต่อลิงก์ใน navbar ได้.

Page

ตัวแทนที่มีคุณสมบัติ data-role="page".

Data แอตทริบิวต์ ค่า การอธิบาย
data-add-back-btn true | false เพิ่มปุ่มกลับอัตโนมัติ มีเพียงแค่ในหัวเพจ.
data-back-btn-text sometext กำหนดข้อความของปุ่มกลับ.
data-back-btn-theme letter (a-z) กำหนดสีหลักของปุ่มกลับ.
data-close-btn-text letter (a-z) กำหนดข้อความของปุ่มปิดบนหน้ากล่าว.
data-dom-cache true | false กำหนดว่าจะล้างความทรงจำ jQuery DOM ของหน้าต่างเดี่ยว (ถ้าค่าเป็น true คุณจะต้องสนใจการจัดการ DOM และทดสอบทั้งหมดของอุปกรณ์มือถือ)
data-overlay-theme letter (a-z) กำหนดสีที่ติดตั้ง (background) ของหน้าการประมวลคำพูด
data-theme letter (a-z) กำหนดสีประจำหัวข้อหน้า โดยเริ่มต้นคือ "c"
data-title sometext กำหนดหัวข้อหน้า
data-url url ค่านี้ใช้สำหรับปรับปรุง URL ไม่ใช่สำหรับขอหน้าต่าง

Popup

container ที่มี data-role="popup"

Data แอตทริบิวต์ ค่า การอธิบาย
data-corners true | false กำหนดว่า popup จะมีมุมรอบเรียบหรือไม่
data-overlay-theme letter (a-z) กำหนดสีที่ติดตั้ง (background) ของ popup โดยเริ่มต้น หรือ "none" กำหนดเป็นโปร่ง
data-shadow true | false กำหนดว่า popup จะมีเงาหรือไม่
data-theme letter (a-z) กำหนดสีประจำหัวข้อของ popup โดยเริ่มต้น หรือ "none" กำหนดเป็นโปร่ง
data-tolerance 30, 15, 30, 15 กำหนดระยะทาง (top, right, bottom, left) จากขอบของหน้าต่าง

anchor ที่มี data-rel="popup"

Data แอตทริบิวต์ ค่า การอธิบาย
data-position-to origin | jQuery selector | window กำหนดตำแหน่งของ popup Origin - โดยเริ่มต้น หรือ popup ตั้งอยู่บนลิงก์ที่เปิด jQuery selector - popup ตั้งอยู่บนองค์ประกอบที่กำหนด Window - popup ตั้งอยู่ที่กลางหน้าจอของหน้าต่าง
data-rel popup ใช้สำหรับประกาศตัวแบบ popup
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none กำหนดวิธีการเปลี่ยนไปยังหน้าต่อไปจากหน้าปัจจุบัน ดูเพิ่มเติมเกี่ยวกับ jQuery Mobile transition

Radio Button

label และ input ที่มี type="radio" จะถูกตั้งเป็นรูปแบบปุ่มโดยอัตโนมัติ โดยไม่จำเป็นต้องมี data-role

Data แอตทริบิวต์ ค่า การอธิบาย
data-mini true | false กำหนดขนาดของปุ่ม หรือว่าจะเล็กหรือตายตัว
data-role none จัดการเพื่อให้ปุ่มเลือกแบบเดียวมีรูปแบบ enhanced buttons ของ jQuery Mobile
data-theme letter (a-z) กำหนดสีประจำหัวข้อของปุ่มเลือกแบบเดียว

คำเตือน：เพื่อการรวมกันของปุ่มเลือกแบบเดียวหลายตัว ใช้ data-role="controlgroup" และ data-type="horizontal|vertical" เพื่อกำหนดว่าจะรวมปุ่มเป็นแบบนอร์มัลหรือแบบตั้งแต่นอก

Select

ทุก element <select> จะถูกกำหนดเป็นสไตล์ปุ่มอัตโนมัติ และไม่จำเป็นต้องมี data-role

Data แอตทริบิวต์ ค่า การอธิบาย
data-icon Icons Reference กำหนดภาพวาดของ element select โดยเริ่มต้นค่าเป็น "arrow-d"
data-iconpos left | right | top | bottom | notext กำหนดตำแหน่งของภาพวาด
data-inline true | false กำหนดว่า element select จะแสดงเป็น inline หรือไม่
data-mini true | false กำหนดขนาดของ element select ว่าเล็กหรือปกติ
data-native-menu true | false ถ้าตั้งค่าเป็น false จะใช้โซ่เลือกที่ทำเป็นการกำหนดเองโดย jQuery ของตัวเอง (หากคุณต้องการให้โซ่เลือกมีรูปแบบเดียวกันทั้งหมดบนเครื่องมือความโคมมานี่ทั้งหมด ให้ใช้นี้)
data-overlay-theme letter (a-z) กำหนดสีหลังของโซ่เลือกที่ทำเป็นการกำหนดเองโดย jQuery (ใช้กับ data-native-menu="false")
data-placeholder true | false สามารถกำหนดบน element <option> ที่ไม่ใช้งานโดยรากฐาน
data-role none จัดตั้งสไตล์ปุ่มเลือกสำหรับ element select ด้วย jQuery Mobile
data-theme letter (a-z) กำหนดสีหลังของ element select

คำเตือน：ถ้าต้องการรวม multiple select รวมกัน ใช้ data-role="controlgroup" และ data-type="horizontal|vertical" ที่จะกำหนดว่าจะวางระดับนึง

Slider

input ที่มี attribute "type="range" จะถูกกำหนดเป็นสไตล์ปุ่มอัตโนมัติ และไม่จำเป็นต้องมี data-role

Data แอตทริบิวต์ ค่า การอธิบาย
data-highlight true | false กำหนดว่าจะแสดงสีเน้นสลิทเตอร์หรือไม่
data-mini true | false กำหนดขนาดของสลิทเตอร์ว่าเล็กหรือปกติ
data-role none จัดตั้งสไตล์ของปุ่มเลื่อนสลิทเตอร์ด้วย jQuery Mobile
data-theme letter (a-z) กำหนดสีหลังของวิตเกตอร์ที่เกี่ยวข้องกับสลิทเตอร์ (input, handle, และ track)
data-track-theme letter (a-z) กำหนดสีหลังของรางสลิทเตอร์

Text input & Textarea

input หรือ textarea ที่มี attribute "type="text|search|etc." จะถูกกำหนดสไตล์อัตโนมัติ และไม่จำเป็นต้องมี data-role

Data แอตทริบิวต์ ค่า การอธิบาย
data-mini true | false กำหนดว่า input จะเป็นขนาดเล็กหรือปกติ
data-role none ทำให้ jQuery Mobile ที่มี input/textarea มีรูปแบบปุ่ม
data-theme letter (a-z) กำหนดสีหลักของโทรตัวป้อน