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)

转载于:https://www.cnblogs.com/homer3000/p/4637835.html