首页 > Web开发 > 详细

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

时间:2015-07-11 06:39:18      阅读:299      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!