jQuery UI 設(shè)計(jì)主題

2021-10-18 17:22 更新

jQuery UI 設(shè)計(jì)主題

文件結(jié)構(gòu)

主題是以特定的方式來(lái)增加他們的易用性。通常，文件目錄結(jié)構(gòu)如下所示：

  • themename/– 您的主題必須完全包含在一個(gè)單獨(dú)的以主題名稱命名的文件夾內(nèi)。
  • themename/themename.css– 這是基本的CSS文件。無(wú)論使用了哪個(gè)插件，該文件都必須在每個(gè)使用主題的頁(yè)面中引用。該文件應(yīng)該是輕量級(jí)的，只包括要點(diǎn)。
  • themename/themename.pluginname.css– 您支持的每個(gè)插件都需要一個(gè)CSS文件。插件的名稱應(yīng)直接包含在文件名中。例如，如果您為tabs（標(biāo)簽頁(yè)）插件進(jìn)行主題化，則有：themename.tabs.js。
  • themename/img.png– 您的主題可以包含圖像。它們可以根據(jù)您的喜好進(jìn)行命名，這里沒有特定的命名慣例。

如需了解主題文件結(jié)構(gòu)是如何完成的實(shí)例，請(qǐng)?jiān)L問(wèn)jQuery UI 基本主題。

定義樣式

為主題編寫樣式是非常簡(jiǎn)單的，這是因?yàn)橹黝}的靈活性。

所有的主題都應(yīng)該有一個(gè)基本的CSS class。這個(gè)主要的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ā)生了一些重要的事情：

  • 我們同時(shí)向文檔中加載兩個(gè)主題。
  • 整個(gè)頁(yè)面機(jī)器所有內(nèi)容，是根據(jù)themename的樣式進(jìn)行主題化的。
  • 然而，帶有ui-othertheme class的<div>及其中的每個(gè)元素（包括模態(tài)對(duì)話框）都是根據(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; }

請(qǐng)注意，themename.css文件只包括全局通用的樣式信息，特定插件的樣式信息不在這里進(jìn)行定義。這里的樣式對(duì)所有主題都是適用的。不用擔(dān)心一個(gè)主題會(huì)占據(jù)多個(gè)文件 - 這些會(huì)在創(chuàng)建和下載的過(guò)程被簡(jiǎn)化。

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)