jQuery UI 設計主題


檔案結構

主題是以特定的方式來增加他們的易用性。通常，檔案目錄結構如下所示：

  • themename/ – 您的主題必須完全包含在一個單獨的以主題名稱命名的資料夾內。

  • themename/themename.css – 這是基本的 CSS 檔案。無論使用了哪個插件，該文件都必須在每個使用主題的頁面中引用。該文件應該是輕量級的，只包括要點。

  • themename/themename.pluginname.css – 您支援的每個外掛程式都需要一個 CSS 檔案。插件的名稱應直接包含在檔案名稱中。例如，如果您為 tabs（標籤頁）外掛程式進行主題化，則有：themename.tabs.js。

  • themename/img.png – 您的主題可以包含圖像。它們可以根據您的喜好進行命名，這裡沒有特定的命名慣例。

如需了解主題檔案結構是如何完成的實例，請造訪 jQuery UI 基本主題。

定義樣式

為主題寫樣式是非常簡單的，這是因為主題的彈性。

所有的主題都應該有一個基本的 CSS class。這個主要的 class 允許使用者啟用停用主題。您的根 class 的格式應該是 .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 class 的<div>及其中的每個元素（包括模態對話框）都是根據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 檔案只包括全域通用的樣式訊息，特定外掛程式的樣式資訊不在這裡定義。這裡的樣式對所有主題都是適用的。不用擔心一個主題會佔據多個文件 - 這些會在創建和下載的過程被簡化。