jQuery UI 官方的布景主題(theme)切換工具目前已經失效,這裡簡要說明如何以組態檔來達成手動切換佈景主題,以及如何使用 Super Theme Switcher 來動態切換佈景主題。
別忘了還有 Views\Shared\_Layout.cshtml:
執行結果:
若要切換成 Redmond 主題,到 web.config 中把 jQueryTheme 參數值改為 "redmond" 即可。
底下的範例程式碼,是直接拿上一篇 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 中加入一個參數:
接著修改 App_Start\BundleConfig.cs 當中用來打包佈景主題的程式碼:
<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 頁面中加入幾行程式碼就行了:
其中那個 id 為 "switcher" 的 <div> 標籤會變成一個 combobox,使用者便可透過此下拉清單選擇並即時套用佈景主題。執行結果如下圖:
值得一提的是,Super Theme Switcher 是直接抓取 Google CDN 上面的各套 jQuery UI 佈景主題,所以我的範例專案中雖然只有 Base、Sunny、和 Redmond 這三套布景主題,對它並無影響。也就是說,我們的網頁是直接使用 jQuery UI 線上提供的全套佈景主題。
這工具的用法非常簡單,只要下載該套件,將完整原始碼加入此範例專案的 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 :)
Happy coding :)
沒有留言: