主題是以特定的方式來增加他們的易用性。通常，文件目錄結(jié)構(gòu)如下所示：
themename/ – 您的主題必須完全包含在一個單獨(dú)的以主題名稱命名的文件夾內(nèi)。themename/themename.css – 這是基本的 CSS 文件。無論使用了哪個插件，該文件都必須在每個使用主題的頁面中引用。該文件應(yīng)該是輕量級的，只包括要點(diǎn)。themename/themename.pluginname.css – 您支持的每個插件都需要一個 CSS 文件。插件的名稱應(yīng)直接包含在文件名中。例如，如果您為 tabs（標(biāo)簽頁）插件進(jìn)行主題化，則有：themename.tabs.js。themename/img.png – 您的主題可以包含圖像。它們可以根據(jù)您的喜好進(jìn)行命名，這里沒有特定的命名慣例。如需了解主題文件結(jié)構(gòu)是如何完成的實(shí)例，請?jiān)L問 jQuery UI 基本主題。
為主題編寫樣式是非常簡單的，這是因?yàn)橹黝}的靈活性。
所有的主題都應(yīng)該有一個基本的 CSS class。這個主要的 class 允許用戶啟用禁用主題。您的根 class 的格式應(yīng)該是 .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>
在上面的實(shí)例中，發(fā)生了一些重要的事情：
<div>及其中的每個元素（包括模態(tài)對話框）都是根據(jù) othertheme 的樣式進(jìn)行主題化的。如果我們打開 themename.css 文件進(jìn)行查看，我們可以看到如下代碼：
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 文件只包括全局通用的樣式信息，特定插件的樣式信息不在這里進(jìn)行定義。這里的樣式對所有主題都是適用的。不用擔(dān)心一個主題會占據(jù)多個文件 - 這些會在創(chuàng)建和下載的過程被簡化。
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請聯(lián)系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權(quán)所有
