Latest web development tutorials

jQuery UI tema desain

Struktur File

Tema adalah cara khusus untuk meningkatkan kemudahan penggunaan. Biasanya, struktur direktori file adalah sebagai berikut:

  • themename/ - topik Anda harus benar-benar terkandung dalam nama topik terpisah bernama folder.
  • themename/themename.css - ini adalah file CSS dasar. Apapun yang plug-in, file tersebut harus dirujuk dalam setiap halaman menggunakan tema. file harus ringan, hanya mencakup poin utama.
  • themename/themename.pluginname.css - masing widget dukungan Anda membutuhkan file CSS. Nama plugin harus langsung dimasukkan dalam nama file. Misalnya, jika Anda theming tab (tab) plug-in, ada: themename.tabs.js .
  • themename/img.png - Tema Anda dapat berisi gambar. Mereka dapat diberi nama sesuai dengan preferensi Anda, tidak ada konvensi penamaan tertentu.

Untuk mempelajari bagaimana struktur file tema selesai contoh, kunjungi jQuery UI dasar tema .

Gaya kustom

Menulis gaya tema yang sangat sederhana, itu adalah karena tema fleksibilitas.

Semua topik harus memiliki kelas CSS dasar. Kelas topik utama memungkinkan pengguna untuk mengaktifkan dinonaktifkan. Format kelas root anda harus .ui-themename . Dan menggunakannya dalam sebuah file HTML sebagai berikut: 

<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, beberapa hal penting yang terjadi:

  • Kami juga memuat dua tema untuk dokumen.
  • Semua mesin seluruh isi halaman, dilakukan sesuai dengan tema gaya THEMENAME.
  • Namun, dengan kelas ui-othertheme dari <div> dan setiap elemen (termasuk kotak dialog modal) dilakukan sesuai dengan tema gaya othertheme.

Jika kita membuka themename.css file untuk melihat, kita dapat melihat kode 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; }

Harap dicatat, themename.css berkas hanya mencakup informasi gaya global yang universal, informasi gaya untuk widget tertentu tidak di sini untuk didefinisikan. Berikut gaya semua topik yang berlaku. Jangan khawatir tentang topik akan menempati beberapa file - ini akan disederhanakan dalam proses menciptakan dan men-download.