jQuery UI 定制

您已經(jīng)了解了jQuery UI下載生成器（Download Builder）如何定制一個(gè)包含您所需選項(xiàng)的自定義版本的值，在本節(jié)內(nèi)容中，您將看到其他的定制方式。

jQuery UI 基礎(chǔ)：使用選項(xiàng)

jQuery UI 中的每個(gè)插件都有一個(gè)默認(rèn)配置，默認(rèn)配置值一般是根據(jù)最基本最常見的使用情況設(shè)置的。如果您想要讓某個(gè)插件設(shè)置成非默認(rèn)值，您可以使用 "options" 重寫它的默認(rèn)設(shè)置。選項(xiàng)是一組屬性，作為參數(shù)傳遞給 jQuery UI 小部件。例如，滑塊（slider）小部件具有 orientation 選項(xiàng)，該選項(xiàng)允許您指定滑塊是水平的還是垂直的。為了設(shè)置滑塊的該選項(xiàng)，您只需將它作為一個(gè)參數(shù)傳遞，如下所示：

$( "#mySliderDiv" ).slider({
    orientation: "vertical"
});

您可以傳遞更多不同的選項(xiàng)，每個(gè)選項(xiàng)之間用逗號(hào)分隔：

$( "#mySliderDiv" ).slider({
    orientation: "vertical",
    min: 0,
    max: 150,
    value: 50
});

請(qǐng)記得選項(xiàng)需放在大括號(hào) { } 內(nèi)。上面的實(shí)例只是一個(gè)簡(jiǎn)單的講解，如需獲取整套 jQuery UI 小部件的詳細(xì)信息，請(qǐng)查看 jQuery UI 實(shí)例。

視覺定制：設(shè)計(jì)一個(gè) jQuery UI 主題

如果您想要設(shè)計(jì)自己的主題，jQuery UI 提供了一個(gè)非常完美的用于主題定制的應(yīng)用程序，這就是 ThemeRoller。具體定制請(qǐng)?jiān)L問 jQuery UI ThemeRoller。

ThemeRoller 為所有使用 jQuery UI 小部件設(shè)計(jì)的元素提供了一個(gè)自定義接口。當(dāng)您調(diào)整左欄中的"levers"，右欄中的小部件將根據(jù)您的設(shè)計(jì)進(jìn)行顯示。ThemeRoller 的 Gallery 選項(xiàng)卡提供了一些與設(shè)計(jì)主題，與下載生成器（Download Builder）頁(yè)面提供的一樣。您可以基于這些主題做調(diào)整，或者直接下載。

ThemeRoller 實(shí)例

下載主題

當(dāng)您點(diǎn)擊 ThemeRoller 頁(yè)面中的 "Download theme" 按鈕，將跳轉(zhuǎn)到下載生成器（Download Builder）頁(yè)面，您的自定義主題會(huì)在主體下拉菜單中自動(dòng)選中。您可以進(jìn)一步配置下載包。一旦下載完成，您將看到 example.html 頁(yè)面使用了您自定義的主題。

提示： 如果您需要編輯您的主題，只需打開 CSS 文件，找到第 43 行，"To view and modify this theme, visit ..."，該 url 即為在 ThemeRoller 中打開主題進(jìn)行編輯的鏈接。

上一篇：jQuery UI 使用下一篇：jQuery UI 工作原理