jQuery คลาส CSS
มือถือ jQuery ใช้คลาส CSS สไตล์องค์ประกอบที่แตกต่าง
สำหรับรายชื่ออ้างอิงด้านล่างเราได้รวมคลาส CSS สำหรับรูปแบบที่พบบ่อย
เรียนทั่วโลก
ชั้นเรียนเหล่านี้สามารถเพิ่มวิดเจ็ตบนมือถือ jQuery ( buttons, toolbars, panels, tables, lists ฯลฯ .. ):
| ชั้น | ลักษณะ |
|---|---|
| ui-corner-all | เพิ่มมุมโค้งมนเพื่อให้องค์ประกอบ |
| ui-shadow | เพิ่มเงาองค์ประกอบ |
| ui-overlay-shadow | เพิ่มเงาซ้อนทับองค์ประกอบ |
| ui-mini | ทำให้องค์ประกอบที่มีขนาดเล็ก |
เรียนปุ่ม
นอกเหนือจากการเรียนในระดับโลกคุณสามารถเพิ่มชั้นเรียนต่อไปนี้เพื่อ <a> หรือ <button> องค์ประกอบ (ไม่ <input> ปุ่ม):
| ชั้น | ลักษณะ |
|---|---|
| ui-btn | ต้องเพิ่ม <a> องค์ประกอบถ้าคุณต้องการให้พวกเขาที่จะเรียกขานเป็นปุ่ม |
| ui-btn-inline | แสดงแบบอินไลน์ปุ่ม |
| ui-btn-icon-top | ตำแหน่งไอคอนเหนือข้อความปุ่ม |
| ui-btn-icon-right | ตำแหน่งไอคอนทางด้านขวาของข้อความปุ่ม |
| ui-btn-icon-bottom | ตำแหน่งไอคอนด้านล่างข้อความปุ่ม |
| ui-btn-icon-left | ตำแหน่งไอคอนทางด้านซ้ายของข้อความปุ่ม |
| ui-btn-icon-notext | แสดงเฉพาะไอคอน |
| ui-btn-a|b | ระบุสีของปุ่ม. "a" เป็นค่าเริ่มต้น (พื้นหลังสีเทาที่มีข้อความสีดำ) ในขณะที่ "b" จะเปลี่ยนสีไปยังพื้นหลังสีดำมีข้อความสีขาว |
เรียนไอคอน
ทุกชั้นเรียนไอคอนใช้ได้สำหรับ <a> และ <button> องค์ประกอบ (ดู เอกสารอ้างอิงไอคอน สำหรับวิธีการใช้ไอคอนบนองค์ประกอบอื่น ๆ ):
| ชั้น | ไอคอนคำอธิบาย | ไอคอน |
|---|---|---|
| ui-icon-action | แอคชั่น (ลูกศรชี้ตามเข็มนาฬิกาลอยออกมาจากกล่อง) | |
| ui-icon-alert | เครื่องหมายอัศเจรีย์ภายในรูปสามเหลี่ยม | |
| ui-icon-audio | เสียง / ลำโพง | |
| ui-icon-arrow-d-l | ลงลูกศรซ้าย | |
| ui-icon-arrow-d-r | ลงลูกศรขวา | |
| ui-icon-arrow-u-l | ขึ้นลูกศรซ้าย | |
| ui-icon-arrow-u-r | ขึ้นลูกศรขวา | |
| ui-icon-arrow-l | ลูกศรซ้าย | |
| ui-icon-arrow-r | ลูกศรขวา | |
| ui-icon-arrow-u | ลูกศรขึ้น | |
| ui-icon-arrow-d | ลูกศรลง | |
| ui-icon-back | กลับ (ลูกศรโค้งลอยทวนขึ้นไป) | |
| ui-icon-bars | สามแถบแนวนอนมากกว่ากัน | |
| ui-icon-bullets | กระสุนสามแนวนอนมากกว่ากัน | |
| ui-icon-calendar | ปฏิทิน | |
| ui-icon-camera | กล้อง | |
| ui-icon-carat-d | กะรัตลง | |
| ui-icon-carat-l | กะรัตซ้าย | |
| ui-icon-carat-r | กะรัตขวา | |
| ui-icon-carat-u | ขึ้นกะรัต | |
| ui-icon-check | เครื่องหมายถูก | |
| ui-icon-clock | นาฬิกา | |
| ui-icon-cloud | เมฆ | |
| ui-icon-comment | แสดงความคิดเห็น / ข้อความ | |
| ui-icon-delete | ลบ | |
| ui-icon-edit | แก้ไข / ดินสอ | |
| ui-icon-eye | ตา | |
| ui-icon-forbidden | ป้ายห้าม | |
| ui-icon-forward | ไปข้างหน้า - (ลูกศรโค้งลอยตามเข็มนาฬิกาขึ้นไป) | |
| ui-icon-gear | เกียร์ | |
| ui-icon-grid | ตะแกรง | |
| ui-icon-heart | หัวใจ / สัญลักษณ์ความรัก | |
| ui-icon-home | บ้าน | |
| ui-icon-info | ข้อมูล | |
| ui-icon-location | ที่ตั้ง | |
| ui-icon-lock | ล็อค / กุญแจ | |
| ui-icon-mail | จดหมาย / Letter | |
| ui-icon-minus | เครื่องหมายลบ | |
| ui-icon-navigation | การเดินเรือ | |
| ui-icon-phone | โทรศัพท์ | |
| ui-icon-power | เพาเวอร์ (เปิด / ปิด) | |
| ui-icon-plus | กากบาท | |
| ui-icon-recycle | เข้าสู่ระบบรีไซเคิล | |
| ui-icon-refresh | รีเฟรช - ลูกศรวงกลม | |
| ui-icon-search | ค้นหา / แว่นขยาย | |
| ui-icon-shop | ช็อป / กระเป๋า | |
| ui-icon-star | ดาว | |
| ui-icon-tag | แท็ก | |
| ui-icon-user | ผู้ใช้ / คน | |
| ui-icon-video | กล้องวิดีโอ |
การเรียนการสอนรูปแบบ
jQuery มือถือให้สองชั้นชุดรูปแบบ: A (สีเทา) และ B (สีดำ) แต่คุณยังสามารถสร้างตัวเองค่าระดับของคุณเอง - ตลอดทางขึ้นไปยังตัวอักษร "z" (ดูธีมบท) ตารางด้านล่างแสดงการเรียนรูปแบบที่มีอยู่ ตัวอักษร (az) หมายความว่าคุณสามารถระบุตัวอักษรจาก A ถึง Z ตัวอย่างเช่น: ui-bar-a หรือ ui-bar-b ฯลฯ
| ชั้น | ลักษณะ |
|---|---|
| ui-bar-(a-z) | ระบุสีสำหรับบาร์ - ส่วนหัวส่วนท้ายและแถบอื่น ๆ |
| ui-body-(a-z) | ระบุสีสำหรับบล็อกเนื้อหา - บานหน้าต่างเนื้อหาของหน้าเว็บ (เลิกใช้ในรุ่น 1.4.0) รายการ ListView, ป๊อบอัพ collapsibles, รถเลื่อนและแผง |
| ui-btn-(a-z) | ระบุสีสำหรับปุ่ม (และไอคอน) |
| ui-group-theme-(a-z) | ระบุสีสำหรับ controlgroups, listviews และชุดพับ |
| ui-overlay-(a-z) | ระบุสีพื้นหลังของหน้าเว็บที่โต้ตอบป๊อปอัพหน้าและภาชนะอื่น ๆ ที่ปรากฏอยู่ด้านบนของ |
| ui-page-theme-(a-z) | ระบุสีสำหรับหน้าเว็บ |
เรียนกริด
คอลัมน์ในตารางมีความกว้างเท่ากัน (และ 100% กว้างทั้งหมด) โดยไม่มีพรมแดน, พื้นหลัง, ขอบหรือ padding มีห้ากริดรูปแบบที่สามารถนำมาใช้:
| ชั้นกริด | คอลัมน์ | ความกว้างของคอลัมน์ | สอดคล้องกับ | ตัวอย่าง |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการร่อน, อ่าน บทมือถือ jQuery กริด