รูปแบบการออกแบบ 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 ไฟล์รวมถึงข้อมูลที่มีสไตล์เฉพาะสากลทั่วโลกข้อมูลสำหรับรูปแบบวิดเจ็ตโดยเฉพาะอย่างยิ่งไม่ได้ที่นี่มีการกำหนดไว้ นี่คือรูปแบบของทุกหัวข้อมีผลบังคับใช้ ไม่ต้องกังวลเกี่ยวกับหัวข้อจะครอบครองหลายไฟล์ - เหล่านี้จะง่ายในขั้นตอนของการสร้างและการดาวน์โหลด