jQuery Mobile - คลาส CSS
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" เพื่อปรับแต่งรูปลักษณ์ของแอปพลิเคชัน คุณสามารถสร้างคลาสธีมของคุณเองได้โดยการต่อท้ายตัวอักษร (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 |