一開始，我準備去動手，自己修改CSS文件。這被證明是個非常費力不討好的事情。

　　有一次在jQuery UI的主頁【http://jqueryui.com/home】停留的時候，一個單詞很快吸引了我的注意：【themeable】，這不就是“可變主題的”的意思嗎？于是我進入到【http://jqueryui.com/themeroller/】這里，發(fā)現了下圖的這個地方，他們官網的人把主題的更換叫做“主題滾輪”（哈哈哈，翻譯水平一般，信達雅也不知道滿足了多少）。

　　第一個TAB頁里說的是【滾出我們自己的主題樣式】。打開下面各個分項后，可以自己定義自己需要的樣式，定義好以后，點那個下載的按鈕就可以下載自己定義好的一套主題樣式了。這比自己動手去改CSS文件什么的方便多了。

　　第二個TAB頁打開后，就發(fā)現原來他們已經準備好了很多的主題。這對于我這樣的懶人很合適，這么多的樣式總有一個是我想要的。

　　選中自己喜歡的樣式，點擊下載按鈕，會自動轉到下載頁面，然后就能把自己想要的主題樣式包給下載下來了。也可以在下載頁面的【Theme】區(qū)的下拉框里選擇自己需要的主題，我選擇的是【Cupertino】。

　　兩個壓縮包下載下來（注意：不同的主題樣式，壓縮包名稱是一樣的，保存時別覆蓋了），解壓以后就發(fā)現，不同的主題其實只有CSS文件夾中的內容不同，也就是主題包的資源不同（主題包資源包括圖片和CSS文件）。其它的都是一樣的，文件夾文件名都一樣，甚至于文件里面的元素的命名都是一樣的。

　　在應用的項目工程中，只需要將主題包和【jquery-ui-1.8.4.custom.min.js】文件加入工程，就可以使用可變主題的jQuery UI了。如圖：

 　　我們所要做的就是在需要使用jQuery UI的頁面中添加對于CSS文件和JS文件的引用即可。我一般是在母版頁里添加。

　　左邊：選擇你要顯示的對象；

　　中間：是運行時的實際效果顯示的地方，點擊【View Source】能顯示源代碼；

　　右邊：是選中對象的一些擴展功能的示例，選擇不同的功能，顯示區(qū)即會有隨之變化，源代碼區(qū)也會跟著變更；例如：上圖選擇【Open on mouseover】，Tab控件的Tab Page則由原來需要點擊才能切換變成了只需要鼠標移動上去就可以切換了。

　　最后，再次強烈推薦jQuery UI。

最新評論