码迷,mamicode.com
首页 > Web开发 > 详细

jquery ui动态切换主题的一种实现方式

时间:2015-07-11 06:39:24      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:

这两天看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);
};

其他部分相同。






jquery ui动态切换主题的一种实现方式

标签:

原文地址:http://www.cnblogs.com/homer3000/p/4637835.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!