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 相关文章推荐
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
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 array_unique之后json_encode需要注意
2011/01/02 PHP
深入php多态的实现详解
2013/06/09 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
Python实现远程调用MetaSploit的方法
2014/08/22 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
服务员岗位职责
2014/01/29 职场文书
便利店投资创业计划书
2014/02/08 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
敬老月活动总结
2014/08/28 职场文书
委托书的样本
2015/01/28 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python