บทช่วยสอน jQuery UI CSS กรอบ API ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ jQuery UI CSS กรอบ API
jQuery UI รวมถึงกรอบ CSS ที่มีประสิทธิภาพเพื่อสร้างเครื่องมือ jQuery ที่กำหนดเองและการออกแบบ กรอบมีต้องเรียนอินเตอร์เฟซผู้ใช้ทั่วไปและสามารถนำมาใช้ในการบำรุงรักษา jQuery UI ThemeRoller โดยการสร้างองค์ประกอบ UI ของคุณเองโดยใช้กรอบ jQuery UI CSS คุณจำเป็นต้องใช้อนุสัญญา Sharemark ในการสั่งซื้อที่จะเสียบในการรวมรหัสชุมชน
เป็นรูปแบบคลาส CSS ต่อไปนี้ได้รับการแก้ไขให้เป็นไปตามโครงสร้างหรือไม่ว่าจะเป็น themable (สีแบบอักษร, พื้นหลัง, ฯลฯ ) ที่กำหนดไว้ใน ui.core.css
และ ui.theme.css
สองไฟล์ ชั้นเรียนเหล่านี้ได้รับการออกแบบสำหรับองค์ประกอบส่วนติดต่อผู้ใช้เพื่อให้บรรลุความสอดคล้องภาพตลอดการประยุกต์ใช้โดย jQuery UI ThemeRoller ของส่วนประกอบของชุดรูปแบบ
.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 .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
: ประเภทของความคุ้มครองการประยุกต์ใช้การตั้งค่าความทึบชดเชย / ชดเชยซ้ายและเงา "หนา." ความหนาของทุกฝ่ายในเงาตั้งอัตรากำไรขั้นต้น (ขยาย) ถูกนำไปใช้ ชดเชยโดยการตั้งค่าเพิ่ม (ส่วนเพิ่ม) และด้านซ้ายเพิ่ม (ส่วนเพิ่ม) ถูกนำมาใช้ (สามารถบวกก็สามารถลบ)