jQuery UI CSS กรอบ API

กรอบ jQuery UI CSS

jQuery UI รวมถึงกรอบ CSS ที่มีประสิทธิภาพเพื่อสร้างเครื่องมือ jQuery ที่กำหนดเองและการออกแบบ กรอบมีต้องเรียนอินเตอร์เฟซผู้ใช้ทั่วไปและสามารถนำมาใช้ในการบำรุงรักษา jQuery UI ThemeRoller โดยการสร้างองค์ประกอบ UI ของคุณเองโดยใช้กรอบ jQuery UI CSS คุณจำเป็นต้องใช้อนุสัญญา Sharemark ในการสั่งซื้อที่จะเสียบในการรวมรหัสชุมชน

เรียนกรอบ

เป็นรูปแบบคลาส CSS ต่อไปนี้ได้รับการแก้ไขให้เป็นไปตามโครงสร้างหรือไม่ว่าจะเป็น themable (สีแบบอักษร, พื้นหลัง, ฯลฯ ) ที่กำหนดไว้ใน ui.core.css และ ui.theme.css สองไฟล์ ชั้นเรียนเหล่านี้ได้รับการออกแบบสำหรับองค์ประกอบส่วนติดต่อผู้ใช้เพื่อให้บรรลุความสอดคล้องภาพตลอดการประยุกต์ใช้โดย jQuery UI ThemeRoller ของส่วนประกอบของชุดรูปแบบ

Helper เค้าโครง

• .ui-helper-hidden : องค์ประกอบของการประยุกต์ใช้ display: none
• .ui-helper-hidden-accessible : องค์ประกอบของการประยุกต์ใช้ในการเข้าถึงที่ซ่อนอยู่ (ตำแหน่งแน่นอนตามหน้า)
• .ui-helper-reset : พื้นฐานองค์ประกอบ UI รูปแบบการตั้งค่า รีเซ็ตองค์ประกอบต่างๆเช่น: padding , margin , text-decoration , รูปแบบรายการและอื่น ๆ
• .ui-helper-clearfix : การประยุกต์ใช้คุณสมบัติบรรจุภัณฑ์ปกครององค์ประกอบลอย
• .ui-helper-zfix : สำหรับ <iframe> องค์ประกอบใช้ iframe "แก้ไข" CSS

ภาชนะ Widget

• .ui-widget : ชั้นบนด้านนอกของภาชนะที่จะใช้ทั้งหมดของวิดเจ็ต การประยุกต์ใช้เครื่องมือสำหรับตัวอักษรและขนาดตัวอักษร แต่ยังอยู่ในตัวอักษรเดียวกันจากองค์ประกอบของแบบฟอร์มใบสมัครและแบบอักษรขนาด 1em ที่จะรับมือกับ Windows เบราว์เซอร์สืบทอด
• .ui-widget-header : ชื่อโปรแกรมประยุกต์คอนเทนเนอร์ชั้น ขององค์ประกอบและข้อความของเด็ก, การเชื่อมโยง, ไอคอนใช้หัวข้อภาชนะสไตล์
• .ui-widget-content : เนื้อหาระดับของการใช้ภาชนะ ขององค์ประกอบและข้อความเด็กของการเชื่อมโยงเนื้อหาไอคอนแอปพลิเคสไตล์คอนเทนเนอร์ (สามารถนำไปใช้กับชื่อองค์ประกอบปกครองหรือพี่น้อง)

รัฐแบบโต้ตอบ

• .ui-state-default : คลิกที่ปุ่มองค์ประกอบสามารถนำมาใช้ชั้น ขององค์ประกอบและข้อความเด็กของการเชื่อมโยงแอพลิเคชันไอคอน "คลิกได้เริ่มต้น" ภาชนะสไตล์
• .ui-state-hover : เมาส์ระงับเมื่อนำมาใช้ในองค์ประกอบปุ่มคลิกได้เมื่ออยู่บนชั้น ขององค์ประกอบและข้อความเด็กของการเชื่อมโยงแอพลิเคชันไอคอน "คลิกได้โฉบ" สไตล์คอนเทนเนอร์
• .ui-state-focus : การประยุกต์ใช้ชั้นเมื่อโฟกัสของแป้นพิมพ์ในองค์ประกอบปุ่มคลิกได้ ขององค์ประกอบและข้อความเด็กของการเชื่อมโยงแอพลิเคชันไอคอน "คลิกได้โฉบ" สไตล์คอนเทนเนอร์
• .ui-state-active : การประยุกต์ใช้ชั้นเมื่อคลิกเมาส์สามารถคลิกองค์ประกอบปุ่ม ขององค์ประกอบและข้อความเด็กของการเชื่อมโยงแอพลิเคชันไอคอน "คลิกได้งาน" รูปแบบภาชนะ

คิวพร้อมท์อินเตอร์แอคที

• .ui-state-highlight : เพื่อเน้นการใช้งานหรือเลือกองค์ประกอบชั้น ขององค์ประกอบและข้อความของเด็ก, การเชื่อมโยงแอพลิเคชันไอคอน "ไฮไลท์" รูปแบบภาชนะที่ใช้บรรจุ
• .ui-state-error : ข้อผิดพลาดการใช้งานภาชนะข้อความองค์ประกอบคลาส ขององค์ประกอบและข้อความของเด็ก, การเชื่อมโยงไอคอนโปรแกรม "ข้อผิดพลาด" รูปแบบภาชนะที่ใช้บรรจุ
• .ui-state-error-text : ไม่เพียง แต่กับสีพื้นหลังของข้อผิดพลาดโปรแกรมชั้นข้อความ มันสามารถนำมาใช้ในรูปแบบฉลากที่จะย่อยสีไอคอนข้อผิดพลาดไอคอนโปรแกรม
• .ui-state-disabled : ปิดการใช้งานองค์ประกอบ UI ใช้ความทึบแสงสลัว ก็หมายความว่าองค์ประกอบของรูปแบบที่กำหนดไว้แล้วที่จะเพิ่มรูปแบบพิเศษ
• .ui-priority-primary : ชั้นความสำคัญอันดับแรกการใช้งานปุ่ม การประยุกต์ใช้ข้อความเป็นตัวหนา
• .ui-priority-secondary : ชั้นอันดับที่สองการใช้งานปุ่ม การประยุกต์ใช้องค์ประกอบข้อความน้ำหนักปกติใช้ความโปร่งใสเล็กน้อย

ไอคอน

สถานะและรูปภาพ

• .ui-icon : คลาสพื้นฐานขององค์ประกอบที่ไอคอนของแอพลิเคชัน กำหนดขนาดของ 16px สี่เหลี่ยมที่ซ่อนอยู่ภายในข้อความของ "เนื้อหา" ผีสางสถานะตั้งค่าภาพพื้นหลัง หมายเหตุ: .ui-icon ระดับจะได้รับเทพดาภาพพื้นหลังที่แตกต่างกันขึ้นอยู่กับภาชนะที่แม่ของมัน ยกตัวอย่างเช่น ui-state-default ภาชนะ ui-icon องค์ประกอบตาม ui-state-default สีไอคอนสี

ประเภทไอคอน

ในคำสั่ง .ui-icon หลังเลิกเรียนแล้วคุณสามารถประกาศวินาทีความเร็วของประเภทของไอคอนของชั้นเรียน ภายใต้สถานการณ์ปกติระดับไอคอนตรงตามไวยากรณ์ .ui-icon-{icon type}-{icon sub description}-{direction}

ยกตัวอย่างเช่นรูปสามเหลี่ยมชี้ไปทางขวาดังนี้ .ui-icon-triangle-1-e

jQuery UI ของ ThemeRoller ในคอลัมน์การแสดงตัวอย่างให้เต็มรูปแบบของไอคอนกรอบ CSS เลื่อนเมาส์ไปที่ไอคอนเพื่อดูชื่อชั้น

ภาพอื่น ๆ

รัศมีผู้ช่วย

• .ui-corner-tl : มุมบนด้านซ้ายของรัศมีองค์ประกอบแอพลิเคชัน
• .ui-corner-tr : ที่มุมขวาบนของรัศมีองค์ประกอบแอพลิเคชัน
• .ui-corner-bl : มุมล่างซ้ายของรัศมีองค์ประกอบแอพลิเคชัน
• .ui-corner-br : ที่มุมขวาล่างของรัศมีองค์ประกอบแอพลิเคชัน
• .ui-corner-top : มุมบนซ้ายของรัศมีองค์ประกอบแอพลิเคชัน
• .ui-corner-bottom : องค์ประกอบของมุมซ้ายล่างของรัศมีการประยุกต์ใช้
• .ui-corner-right : องค์ประกอบในแนวทแยงขวาบนและล่างรัศมีของแอพลิเคชัน
• .ui-corner-left : องค์ประกอบในแนวทแยงซ้ายบนและล่างรัศมีของแอพลิเคชัน
• .ui-corner-all : มุมทั้งสี่ของรัศมีการประยุกต์ใช้องค์ประกอบ

ฝาครอบและเงา

• .ui-widget-overlay : เพื่อให้ครอบคลุม 100% ของความกว้างของหน้าจอและความสูงของแอพลิเคชันและการตั้งค่าสีพื้นหลัง / พื้นผิวและความทึบแสงของหน้าจอ
• .ui-widget-shadow : ประเภทของความคุ้มครองการประยุกต์ใช้การตั้งค่าความทึบชดเชย / ชดเชยซ้ายและเงา "หนา." ความหนาของทุกฝ่ายในเงาตั้งอัตรากำไรขั้นต้น (ขยาย) ถูกนำไปใช้ ชดเชยโดยการตั้งค่าเพิ่ม (ส่วนเพิ่ม) และด้านซ้ายเพิ่ม (ส่วนเพิ่ม) ถูกนำมาใช้ (สามารถบวกก็สามารถลบ)