jQuery UI 設計主題 · W3School jQuery UI 教程

# jQuery UI 設計主題 ### 文件結構主題是以特定的方式來增加他們的易用性。通常，文件目錄結構如下所示： * `themename/` – 您的主題必須完全包含在一個單獨的以主題名稱命名的文件夾內。 * `themename/themename.css` – 這是基本的 CSS 文件。無論使用了哪個插件，該文件都必須在每個使用主題的頁面中引用。該文件應該是輕量級的，只包括要點。 * `themename/themename.pluginname.css` – 您支持的每個插件都需要一個 CSS 文件。插件的名稱應直接包含在文件名中。例如，如果您為 tabs（標簽頁）插件進行主題化，則有：`themename.tabs.js`。 * `themename/img.png` – 您的主題可以包含圖像。它們可以根據您的喜好進行命名，這里沒有特定的命名慣例。如需了解主題文件結構是如何完成的實例，請訪問 [jQuery UI 基本主題](https://github.com/jquery/jquery-ui/tree/master/themes/base)。 ### 定義樣式為主題編寫樣式是非常簡單的，這是因為主題的靈活性。所有的主題都應該有一個基本的 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` 文件只包括全局通用的樣式信息，特定插件的樣式信息不在這里進行定義。這里的樣式對所有主題都是適用的。不用擔心一個主題會占據多個文件 - 這些會在創建和下載的過程被簡化。