使用JQuery UI进行更换皮肤功能
主题：基于JQuery的换皮肤功能.
效果：
应用范围：网站或系统，可以更换指定皮肤
其他说明：
原理很简单，其实大家在学习JavaScript与CSS的时候应该就试过，使用js变更字体颜色的操作：
document.getelementByid("div_Description").style.color='red';
同样的道理，我们可以对 <head><link id='skin'>指定其href，实现相应的换肤效果。
源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" id="skin"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/plugins/jquery-ui-1.8.14.custom/external/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
function changecss(str) {
$("#skin").attr("href", str) //改变一下href属性其实这里已经完成
/*
$("#skin", window.frames[0].document).attr("href", str);//应用于子窗体
$(window.parent.document).find("#skin").attr("href", str);//应用于父窗体
*/
/*
$.cookie("css_skin", str)//这里是记录一下cookie,防止刷新就回到原来的css路径
下载路径:http://plugins.jquery.com/files/jquery.cookie.js.txt
*/
}
$(document).ready(function () {
/*
使用cookie 中存储 的样式要求，此方式还可以扩展换成从数据表中获取样式
if ($.cookie("css_skin") != null) {
changecss($.cookie("css_skin"));
}
*/
});
</script>
<script type="text/javascript">
$(function () {
$('ul#Pager li,table.ui-list .ui-list-row').hover(
function () { $(this).addClass('ui-state-hover'); },
function () { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
#themes{font-size: 14px; font-weight: bold; text-align: right;}
#themes ul ,#themes li{ list-style:none;float:right; padding:10px}
body{font: 72.5% "Trebuchet MS" , sans-serif;margin: 50px;margin-top: 0px;}
.demoHeaders{margin-top: 2em;}
/*jquery extended ui Pager*/
.ui-pager{margin: 0;padding: 0;}
.ui-pager .ui-pager-item{margin: 2px;padding: 4px 0;cursor: pointer;float: left;list-style: none;}
.ui-pager span, .ui-pager span.ui-icon,.ui-pager a{float: left;margin:0 4px;height:16px;}
/*jquery extended ui List*/
.ui-list {width:100%;border: 1px solid #C6C6C6; empty-cells:hide; border-collapse: collapse}
.ui-list .ui-list-header th,.ui-list .ui-list-header td,
.ui-list .ui-list-row td {border:#c0c0c0 1px solid !important;border-bottom:none;line-height:16px;+line-height:18px;padding: 3px 7px 3px 6px;+padding: 2px 7px 2px 6px;}
.ui-list .ui-list-row td {overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;font-weight:normal;}
</style>
</head>
<body>
<div id="themes">
Chanage Themes :
<ul>
<li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/black-tie/jquery-ui.css')">
black-tie</a></li>
<li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/blitzer/jquery-ui.css')">
blitzer</a> </li>
<li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css')">
smoothness</a> </li>
<li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/flick/jquery-ui.css')">
flick</a></li>
<li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/le-frog/jquery-ui.css')">
le-frog</a></li>
</ul>
</div>
<h2 class="demoHeaders">
Pager</h2>
<ul id="Pager" class="ui-pager ui-widget ui-helper-clearfix">
<li class="ui-pager-item ui-state-default ui-corner-all"><a class="">第一页</a></li>
<li class="ui-pager-item ui-state-default ui-corner-all"><a class="ui-icon ui-icon-circle-triangle-w">
前一页</a></li>
<li class="ui-pager-item ui-state-default ui-corner-all ui-state-active"><span>1</span></li>
<li class="ui-pager-item ui-state-default ui-corner-all"><a href="#" class="">2</a></li>
<li class="ui-pager-item ui-state-default ui-corner-all"><a href="#" class="">3</a></li>
<li class="ui-pager-item ui-state-default ui-corner-all"><a href="#" class="ui-icon ui-icon-circle-triangle-e">
下一页</a></li>
<li class="ui-pager-item ui-state-default ui-corner-all"><a class="">最后一页</a></li>
</ul>
<h2 class="demoHeaders">
List</h2>
<table class="ui-list ui-corner-all">
<tr class="ui-list-header ui-state-default">
<th class="">1 Columns</th><th class="">2 Columns</th><th class="">3 Columns</th><th class="">4 Columns</th><th class="">5 Columns</th><th class="">6 Columns</th><th class="">7 Columns</th>
</tr>
<tr class="ui-list-row">
<td>First</td><td>Second</td><td>Third</td><td>four</td><td>five</td><td>six</td><td>seven</td>
</tr>
<tr class="ui-list-row">
<td>First</td><td>Second</td><td>Third</td><td>four</td><td>five</td><td>six</td><td>seven</td>
</tr>
<tr class="ui-list-row">
<td>First</td><td>Second</td><td>Third</td><td>four</td><td>five</td><td>six</td><td>seven</td>
</tr>
</table>
</body>
</html>
支持博主
关于邵珠庆博客
文章标签
记事邵珠庆博客
最近文章
最近评论
- 发表在《中国翻墙网民状况调查》
- 发表在《教你如何简单获取新浪微博短地址接口》
- 发表在《教你如何简单获取新浪微博短地址接口》
- 发表在《教你如何简单获取新浪微博短地址接口》
- 发表在《教你如何简单获取新浪微博短地址接口》
博客日历
| 一 | 二 | 三 | 四 | 五 | 六 | 日 |
|---|---|---|---|---|---|---|
| « 8月 | ||||||
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 | ||||
目录分类
文章归档
- 2022年8月 (2)
- 2022年7月 (1)
- 2022年3月 (1)
- 2021年10月 (3)
- 2021年1月 (1)
- 2020年4月 (3)
- 2020年3月 (3)
- 2020年2月 (2)
- 2020年1月 (3)
- 2019年12月 (2)
- 2019年11月 (3)
- 2019年10月 (2)
- 2019年9月 (2)
- 2019年8月 (4)
- 2019年7月 (2)
- 2019年6月 (2)
- 2019年5月 (2)
- 2019年4月 (3)
- 2019年3月 (2)
- 2019年2月 (3)
- 2019年1月 (2)
- 2018年12月 (2)
- 2018年11月 (2)
- 2018年10月 (3)
- 2018年9月 (2)
- 2018年8月 (2)
- 2018年7月 (1)
- 2018年6月 (2)
- 2018年5月 (3)
- 2018年4月 (2)
- 2018年3月 (6)
- 2018年2月 (7)
- 2018年1月 (3)
- 2017年11月 (2)
- 2017年10月 (2)
- 2017年9月 (5)
- 2017年8月 (4)
- 2017年7月 (8)
- 2017年6月 (5)
- 2017年5月 (14)
- 2017年4月 (8)
- 2017年3月 (5)
- 2017年2月 (2)
- 2017年1月 (1)
- 2016年12月 (1)
- 2016年11月 (5)
- 2016年10月 (3)
- 2016年9月 (2)
- 2016年8月 (1)
- 2016年7月 (2)
- 2016年6月 (2)
- 2016年5月 (5)
- 2016年4月 (5)
- 2016年3月 (2)
- 2016年2月 (1)
- 2016年1月 (2)
- 2015年12月 (2)
- 2015年11月 (1)
- 2015年10月 (3)
- 2015年9月 (2)
- 2015年8月 (4)
- 2015年7月 (5)
- 2015年6月 (6)
- 2015年5月 (3)
- 2015年4月 (8)
- 2015年3月 (6)
- 2015年2月 (4)
- 2015年1月 (5)
- 2014年12月 (2)
- 2014年11月 (5)
- 2014年10月 (5)
- 2014年9月 (1)
- 2014年8月 (2)
- 2014年7月 (4)
- 2014年6月 (1)
- 2014年5月 (9)
- 2014年4月 (5)
- 2014年3月 (1)
- 2014年2月 (1)
- 2014年1月 (5)
- 2013年12月 (4)
- 2013年11月 (12)
- 2013年10月 (6)
- 2013年9月 (7)
- 2013年8月 (8)
- 2013年7月 (15)
- 2013年6月 (9)
- 2013年5月 (12)
- 2013年4月 (8)
- 2013年3月 (11)
- 2013年2月 (9)
- 2013年1月 (21)
- 2012年12月 (8)
- 2012年11月 (7)
- 2012年10月 (19)
- 2012年9月 (16)
- 2012年8月 (13)
- 2012年7月 (10)
- 2012年6月 (11)
- 2012年5月 (11)
- 2012年4月 (8)
- 2012年3月 (8)
- 2012年2月 (11)
- 2012年1月 (8)
- 2011年12月 (18)
- 2011年11月 (32)
- 2011年10月 (17)
- 2011年9月 (18)
- 2011年8月 (11)
- 2011年7月 (55)
- 2011年6月 (1)
- 2011年5月 (4)
- 2011年4月 (2)
- 2011年3月 (1)
- 2011年1月 (3)
- 2010年12月 (1)
- 2010年11月 (6)
- 2010年9月 (5)
- 2010年8月 (2)
- 2010年7月 (3)
- 2010年6月 (7)
- 2010年5月 (3)
- 2010年4月 (4)
- 2010年3月 (8)
- 2010年2月 (2)
- 2010年1月 (2)
- 2009年12月 (2)
- 2009年11月 (1)
- 2009年10月 (1)
- 2009年8月 (1)
- 2009年7月 (2)
- 2009年5月 (1)
- 2009年4月 (1)
- 2009年3月 (1)
- 2009年2月 (1)
- 2009年1月 (1)
- 2008年12月 (1)
- 2008年11月 (2)
- 2008年10月 (1)
- 2008年8月 (5)
- 2008年7月 (2)
- 2008年6月 (1)
- 2008年5月 (3)
- 2008年4月 (11)
- 2008年3月 (1)
- 2008年2月 (1)
- 2008年1月 (1)
- 2007年12月 (1)
- 2007年11月 (3)
- 2007年10月 (1)
- 2007年9月 (1)
- 2007年8月 (1)
- 2007年7月 (1)
- 2007年6月 (1)
- 2007年5月 (1)
