JQuery给网页更换皮肤的方法


Posted in Javascript onMay 30, 2015

本文实例讲述了JQuery给网页更换皮肤的方法。分享给大家供大家参考。具体分析如下:

为了更好的提升用户体验,很多网页都有换肤的功能,那么这是怎么实现的那,其实,换肤只不过是在对应的位置改了Css样式罢了!!

下面就演示如何简单的换肤

在设计HTmL代码时,注意一些小技巧,可以将皮肤选项按钮的id设置成和皮肤样式文件名称相同,这样皮肤切换的操作就简单多了样式连接要带一个有Id样式的连接表,通过操作该链接的href属性的值,从而实现换肤。即: 用户点击完就可以换肤了,但是,当用户刷新或者关闭浏览器时,皮肤又会被初始化,所以考虑用CooKie保存当前选择:

<!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="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!--  引入jQuery的cookie插件 -->
 <script src="js/jquery.cookie.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
 $(function(){
  var $li =$("#skin li");
  $li.click(function(){
  switchSkin( this.id );
  });
  var cookie_skin = $.cookie( "MyCssSkin");
  if (cookie_skin) {
  switchSkin( cookie_skin );
  }
 });
 function switchSkin(skinName){
   $("#"+skinName).addClass("selected").siblings().removeClass("selected");
  //当前<li>元素选中
  //去掉其它同辈<li>元素的选中
  $("#cssfile").attr("href","css/"+ skinName +".css");
  //设置不同皮肤
  $.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
 }
 //]]>
 </script>
</head>
<body>
<ul id="skin">
 <li id="skin_0" title="灰色" class="selected">灰色</li>
 <li id="skin_1" title="紫色">紫色</li>
 <li id="skin_2" title="红色">红色</li>
 <li id="skin_3" title="天蓝色">天蓝色</li>
 <li id="skin_4" title="橙色">橙色</li>
 <li id="skin_5" title="淡绿色">淡绿色</li>
</ul>
<div id="div_side_0">
<div id="news">
   <h1 class="title">时事新闻</h1>
 </div>
  </div>
  <div id="div_side_1">
 <div id="game">
  <h1 class="title">娱乐新闻</h1>
 </div>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery 3D球状导航的文章分类
Jul 06 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
jQuery实现给页面换肤的方法
May 30 #Javascript
js获取滚动距离的方法
May 30 #Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 #Javascript
Javascript实现div层渐隐效果的方法
May 30 #Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 #Javascript
Jquery解析json字符串及json数组的方法
May 29 #Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 #Javascript
You might like
php防注入及开发安全详细解析
2013/08/09 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
页面使用密码保护代码
2013/04/10 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
Python验证企业工商注册码
2015/10/25 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
详解如何设置Python环境变量?
2019/05/13 Python
python 穷举指定长度的密码例子
2020/04/02 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
链表面试题-一个链表的结点结构
2015/05/04 面试题
大学生通用个人的自我评价
2014/02/10 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
委托书的格式
2014/08/01 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
岳麓书院导游词
2015/02/03 职场文书
经理岗位职责范本
2015/04/15 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
初中历史教学反思
2016/02/19 职场文书