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