Jquery UI Theme 切换

前台使用jquery UI时,可以用下面的方法实现几个不同Theme之间的切换

1. 需要:jquery-1.3.2.min.js    jquery.cookie.js    jquery-ui-1.7.2.custom.min.js

2. 下载两个主题south-street和ui-lightness

3. 页面css链接(默认为ui-lightness主题):

type="text/css"  href="<%=contextPath%>/css/theme-ui-lightness/jquery-ui-1.7.2.custom.css" rel=”stylesheet” type=”text/css” media=”screen” id=”skin”/>

4. 切换js:

function changecss(str) {
    var csshref                                                       //当义变量
    csshref=$("#skin").attr("href");                       //取得skin的css链接
    csshref=csshref.replace(/theme[/S]*/g,str);       //把原来路径的ui-lightness替换成我们自己的str
    csshref=$("#skin").attr("href",csshref);           //改变href属性其实这里已经完成
    $.cookie("css_skin",str) ;                                 //记录cookie,防止刷新就回到原来的css路径
}

5.载入

$(function()
{
  //如果cookie不为空的时候就读取cookie的路径
  if($.cookie("css_skin")!=null)
  {
    changecss($.cookie("css_skin"));
  }
}
)

你可能感兴趣的:(jquery,ui,stylesheet,css,function,null)