切換 jQuery UI 的佈景主題

jQuery UI 官方的布景主題(theme)切換工具目前已經失效,這裡簡要說明如何以組態檔來達成手動切換佈景主題,以及如何使用 Super Theme Switcher 來動態切換佈景主題。

底下的範例程式碼,是直接拿上一篇 jQuery Grid 逐步教學的範例來修改,所以只會提關鍵步驟,點到為止。jQuery UI 套件的版本為 v1.9.2。

上次的 jqGrid 範例並沒有特別指定使用哪個佈景主題,所以是預設的 Smoothness 主題。再把上回範例的執行結果貼上來:


接著來看如何手動切換佈景主題。

手動切換佈景主題

先到 jQuery UI 網站下載你想要的佈景主題,參考右圖,點 Gallery,便可預覽所有預先定義的佈景主題樣式。此時在預覽圖上點一下,右邊示範區域會直接套用你目前點選的主題,方便你更仔細地查看此佈景主題的風格。

找到你想要的主題之後,點其預覽圖下方的 Download 按鈕,即可進入下載頁面。

下載頁面可讓你勾選需要哪些元件。採用預設值,也就是全選。然後點 Download 按鈕便可下載。

下載的檔名會是 jquery-ui-{版本號碼}.custom.zip。解壓縮之後,其中的 development-bundle\themes\ 資料夾底下會包含兩個資料夾,一個是 base,一個是你選擇的主題。把這兩個資料夾都加入範例專案的 Content\themes 資料夾下。

如果還需要別的佈景主題,就重複上述步驟。這裡我加入了 Sunny 和 Redmond 兩套主題,參考下圖:


我們打算把主題的名稱放在應用程式組態檔裡面,以後要切換主題時,只修改組態檔就好。所以接著在 web.config 中加入一個參數:

<appSettings>
    <add key="jQueryTheme" value="sunny"/>
</appSettings>

接著修改 App_Start\BundleConfig.cs 當中用來打包佈景主題的程式碼:

string themeName = System.Configuration.ConfigurationManager.AppSettings["jQueryTheme"];
string themeFolder = "~/Content/themes/" + themeName;

bundles.Add(new StyleBundle(themeFolder + "/css").Include(
            themeFolder + "/jquery.ui.core.css",
            themeFolder + "/jquery.ui.resizable.css",
            themeFolder + "/jquery.ui.selectable.css",
            themeFolder + "/jquery.ui.accordion.css",
            themeFolder + "/jquery.ui.autocomplete.css",
            themeFolder + "/jquery.ui.button.css",
            themeFolder + "/jquery.ui.dialog.css",
            themeFolder + "/jquery.ui.slider.css",
            themeFolder + "/jquery.ui.tabs.css",
            themeFolder + "/jquery.ui.datepicker.css",
            themeFolder + "/jquery.ui.progressbar.css",
            themeFolder + "/jquery.ui.theme.css",
            "~/Content/jquery.jqGrid/ui.jqgrid.css"     // jqGrid
            ));

別忘了還有 Views\Shared\_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @{
        string theme = System.Configuration.ConfigurationManager.AppSettings["jQueryTheme"];
        if (String.IsNullOrEmpty(theme))
        {
            theme = "base";
        }
    }
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/" + theme + "/css")    
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryjqgrid")
</head>
<body>
    @RenderBody()

    @RenderSection("scripts", required: false)
</body>
</html>

執行結果:


若要切換成 Redmond 主題,到 web.config 中把 jQueryTheme 參數值改為 "redmond" 即可。

動態切換佈景主題

由於 jQuery UI 的主題切換工具目前暫時失效(可能等一段時日就會恢復吧),若要讓使用者任意切換佈景主題,就得想別的辦法,例如 Super Theme Switcher

這工具的用法非常簡單,只要下載該套件,將完整原始碼加入此範例專案的 Content 目錄下:


然後在 View 頁面中加入幾行程式碼就行了:

<script type="text/javascript" src="/Content/ThemeSwitcher/jquery.themeswitcher.js"></script>

<script type="text/javascript">

    jQuery(document).ready(function () {
        var grid = $('#grid');
        grid.jqGrid({
          // (省略)
        });

        $("#switcher").themeswitcher({
            imgpath: "/Content/ThemeSwitcher/images/",
            loadTheme: "Smoothness"
        });
    });
</script>

<div id="switcher"></div>
<!-- 以下標籤是用來呈現 jqGrid -->
<table id="grid">
</table>
<div id="pager">
</div>


其中那個 id 為 "switcher" 的 <div> 標籤會變成一個 combobox,使用者便可透過此下拉清單選擇並即時套用佈景主題。執行結果如下圖:


值得一提的是,Super Theme Switcher 是直接抓取 Google CDN 上面的各套 jQuery UI 佈景主題,所以我的範例專案中雖然只有 Base、Sunny、和 Redmond 這三套布景主題,對它並無影響。也就是說,我們的網頁是直接使用 jQuery UI 線上提供的全套佈景主題。

小結

有了這些布景主題,對於需要快速建立美觀介面又缺乏藝術天分的我來說,實在太方便了!
Happy coding :)
Copyright © 2012. Huan-Lin 學習筆記 - All Rights Reserved
Powered by Blogger
Template Design by Cool Blogger Tutorials
Published by Templates Doctor