รูปแบบการออกแบบ jQuery UI การ
โครงสร้างของไฟล์
ธีมเป็นวิธีที่เฉพาะเจาะจงเพื่อเพิ่มความสะดวกในการใช้งาน โดยปกติโครงสร้างไดเรกทอรีของแฟ้มจะเป็นดังนี้:
-
themename/
- หัวข้อของคุณจะต้องอยู่อย่างเต็มที่ในโฟลเดอร์ชื่อหัวข้อที่แยกต่างหากชื่อ -
themename/themename.css
- นี้เป็นไฟล์ CSS พื้นฐาน โดยไม่คำนึงถึงปลั๊กอินไฟล์จะต้องได้รับการอ้างอิงในแต่ละหน้าโดยใช้รูปแบบ แฟ้มควรจะมีน้ำหนักเบามีเพียงจุดหลัก -
themename/themename.pluginname.css
- เครื่องมือแต่ละคุณต้องสนับสนุนไฟล์ css ชื่อของปลั๊กอินที่ควรจะรวมโดยตรงในชื่อไฟล์ ตัวอย่างเช่นถ้าคุณ theming ของแท็บ (แท็บ) plug-in ที่มี:themename.tabs.js
-
themename/img.png
- รูปแบบของคุณสามารถมีภาพ พวกเขาสามารถตั้งชื่อตามความต้องการของคุณไม่มีการตั้งชื่อที่เฉพาะเจาะจง
เพื่อเรียนรู้วิธีโครงสร้างไฟล์รูปแบบที่เป็นที่เรียบร้อยแล้วกรณีแวะไปที่ jQuery UI รูปแบบพื้นฐาน
ลักษณะที่กำหนดเอง
เขียนรูปแบบรูปแบบที่ง่ายมากก็คงเป็นเพราะรูปแบบมีความยืดหยุ่น
หัวข้อที่ทุกคนต้องมีคลาส CSS พื้นฐาน ชั้นหัวข้อหลักช่วยให้ผู้ใช้เปิดใช้งานคนพิการ รูปแบบระดับรากของคุณควรจะ .ui-themename
และใช้ในไฟล์ HTML ดังนี้
<html> <head> <title>My Site</title> <link rel="stylesheet" href="themename/themename.css" /> <link rel="stylesheet" href="othertheme/othertheme.css" /> <link rel="stylesheet" href="othertheme/othertheme.dialog.css" /> </head> <body class="ui-themename"> <div class="ui-othertheme"> <div class="ui-dialog">This is a modal dialog.</div> </div> </body> </html>
ในตัวอย่างข้างต้นบางสิ่งที่สำคัญที่เกิดขึ้น:
- นอกจากนี้เรายังโหลดสองรูปแบบเอกสาร
- ทุกเครื่องเนื้อหาหน้าทั้งหมดจะดำเนินการให้สอดคล้องกับรูปแบบของรูปแบบ THEMENAME
- แต่ด้วยระดับ UI-othertheme ของ
<div>
และแต่ละองค์ประกอบ (รวมถึงกล่องโต้ตอบ modal) จะดำเนินการให้สอดคล้องกับรูปแบบของรูปแบบ othertheme
ถ้าเราเปิด themename.css
ไฟล์สำหรับการดูเราสามารถมองเห็นรหัสต่อไปนี้:
body.ui-themename { background:#111; color:snow; } .ui-themename a, a.ui-themename { color:#68D; outline:none; } .ui-themename a:visited, a.ui-themename:visited { color:#D66; } .ui-themename a:hover, a.ui-themename:hover { color:#FFF; }
โปรดทราบ themename.css
ไฟล์รวมถึงข้อมูลที่มีสไตล์เฉพาะสากลทั่วโลกข้อมูลสำหรับรูปแบบวิดเจ็ตโดยเฉพาะอย่างยิ่งไม่ได้ที่นี่มีการกำหนดไว้ นี่คือรูปแบบของทุกหัวข้อมีผลบังคับใช้ ไม่ต้องกังวลเกี่ยวกับหัวข้อจะครอบครองหลายไฟล์ - เหล่านี้จะง่ายในขั้นตอนของการสร้างและการดาวน์โหลด