jQuery Mobile - คุณสมบัติข้อมูล
ปุ่ม
มันระบุปุ่มคลิกได้ที่มีเนื้อหาเช่นข้อความหรือภาพที่ใช้คลาส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) |