jquery ui動態切換主題的一種實現方式

這兩天看coreservlets上的jQuery教程，雖然比較老了，不過講得還是不錯。

最后一部分講jQuery ui 主題切換，用他介紹的方法實現不了。于是自己修改了下，可以了。

代碼如下：

html部分：

<fieldset?class="ui-widget">

<legend>Changing?Themes?(Skins)?at?Run?Time</legend>

<div?class="ui-widget-content?ui-corner-all"

?????id="themes-div">

??<input?type="radio"?name="themes"?value="black-tie"/>Black?Tie

??<input?type="radio"?name="themes"?value="blitzer"/>Blitzer

??<input?type="radio"?name="themes"?value="le-frog"/>Le?Frog

??<input?type="radio"?name="themes"?value="smoothness"/>Black?Tie<br/>

??<input?type="radio"?name="themes"?value="start"/>Start

??<input?type="radio"?name="themes"?value="trontastic"/>Trontastic

??<input?type="radio"?name="themes"?value="ui-darkness"/>UI-Darkness

??<input?type="radio"?name="themes"?value="my-theme"/>My?Theme(downloaded)

??<input?type="radio"?name="themes"?value="jquery-ui"/>UI?Lightness?(Default)

</div>

</fieldset>?

js部分：

var?uiDemo?=?{};?//?To?avoid?name?conflicts??

uiDemo.switchToTheme?=?function(themeName)?{?

? ??var?$link?=?$("link[href$='jquery-ui.css']"); //獲取link節點

? ? $link.attr("href","./css/"+themeName+"/jquery-ui.css"); //改變link節點的href屬性

};

uiDemo.switchToSelectedTheme?=?function()?{

??var?theme?=?$(this).val();

??uiDemo.switchToTheme(theme);

};

$(function()?{?

? ??$("#themes-div?input").click(uiDemo.switchToSelectedTheme);

});?

附他的實現方式：

uiDemo.switchToTheme?=?function(themeName)?{

?var?attributes?=?{?

????type:?"text/css",

????rel:?"stylesheet",

????href:?"css/"?+?themeName?+?"/jquery-ui.css"

??};

??var?styleSheetLink?=?$("<link>",?attributes);

??$("head").append(styleSheetLink);

};

其他部分相同。

來自為知筆記(Wiz)