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);};
其他部分相同。
