使用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>