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)