Tema reka bentuk UI jQuery


Struktur Fail

Tema direka bentuk dengan cara khusus untuk meningkatkan kemudahan penggunaannya. Biasanya, struktur direktori fail kelihatan seperti ini:

  • themename/ – Tema anda mesti terkandung sepenuhnya dalam folder berasingan yang dinamakan sempena tema.

  • themename/themename.css – Ini ialah fail CSS asas. Tidak kira pemalam mana yang digunakan, fail ini mesti dirujuk dalam setiap halaman tempat tema digunakan. Dokumen itu hendaklah ringan dan mengandungi hanya yang penting.

  • themename/themename.pluginname.css – Setiap pemalam yang anda sokong memerlukan fail CSS. Nama pemalam hendaklah dimasukkan terus dalam nama fail. Contohnya, jika anda bertemakan pemalam tab, anda akan mempunyai: themename.tabs.js.

  • themename/img.png – Tema anda boleh mengandungi imej. Mereka boleh dinamakan mengikut kehendak anda, tiada konvensyen penamaan khusus.

Untuk contoh cara struktur fail tema dilakukan, lawati Tema Asas UI jQuery.

Menentukan Gaya

Gaya penulisan untuk tema adalah sangat mudah kerana fleksibiliti tema.

Semua tema harus mempunyai kelas CSS asas. Kelas utama ini membolehkan pengguna mendayakan dan melumpuhkan tema. Kelas akar anda hendaklah dalam format .ui-themename. Dan penggunaannya dalam fail HTML kelihatan seperti ini: 

<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>

Dalam contoh di atas, sesuatu yang penting berlaku:

  • Kami memuatkan ke dalam dokumen pada masa yang sama Dua tema.

  • Semua kandungan keseluruhan halaman bertemakan mengikut gaya nama tema.

  • Walau bagaimanapun, <div> dengan kelas ui-tema lain dan setiap elemen di dalamnya (termasuk dialog modal) bertemakan mengikut gaya tema lain.

Jika kita membuka fail themename.css untuk melihatnya, kita boleh melihat kod berikut: 

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; }

Sila ambil perhatian bahawa fail themename.css hanya termasuk yang biasa di seluruh dunia maklumat gaya , maklumat gaya khusus pemalam tidak ditakrifkan di sini. Gaya di sini boleh digunakan untuk semua tema. Jangan risau tentang tema yang menggunakan berbilang fail - ini akan dipermudahkan semasa proses penciptaan dan muat turun.