一開始，我準(zhǔn)備去動(dòng)手，自己修改CSS文件。這被證明是個(gè)非常費(fèi)力不討好的事情。

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

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

　　第二個(gè)TAB頁(yè)打開后，就發(fā)現(xiàn)原來他們已經(jīng)準(zhǔn)備好了很多的主題。這對(duì)于我這樣的懶人很合適，這么多的樣式總有一個(gè)是我想要的。

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

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

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

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

　　左邊：選擇你要顯示的對(duì)象；

　　中間：是運(yùn)行時(shí)的實(shí)際效果顯示的地方，點(diǎn)擊【View Source】能顯示源代碼；

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

　　最后，再次強(qiáng)烈推薦jQuery UI。

最新評(píng)論