有时候一个网页可以有多个皮肤进行选择，也就是不同的背景，或是一整套新的css，能使整个页面变成另一种风格。

这个功能可以用jQuery来实现。外加cookie插件。有了cookie，就可以长时间的保存选择后的背景样式，而不至于每次刷新界面都会转入默认的画面。

效果如下：

代码之div+css研读：

<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>
#div_side_0,#div_side_1

{

    float:left;

    width:120px;

    height:450px;

    }

#skin

{

    margin:10px;

    padding:5px;

    width:210px;

    padding-right:0px;

    list-style:none;

    border: 1px solid #CCCCCC;

    overflow:hidden;//
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。 
    }

#skin li{

    float:left;

    margin-right:5px;

    width:15px;

    height:15px;

    text-indent:-999px;/*text-indent是用来设定文本块中第一行的缩进*/

    overflow:hidden;

    display:block;　　　　 /*
　　　　　　　　　　　　　　　　none 此元素不会被显示。
　　　　　　　　　　　　　　　　block 此元素将显示为块级元素，此元素前后会带有换行符。
　　　　　　　　　　　　　　　　inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
　　　　　　　　　　　　　　　　*/

    cursor:pointer;

    background-image:url(theme.gif);

}

#skin_0{

    background-position:0px 0px;

}

#skin_1{

    background-position:15px 0px;

}

#skin_2{

    background-position:35px 0px;

}

#skin_3{

    background-position:55px 0px;

}

#skin_4{

    background-position:75px 0px;

}

#skin_5{

    background-position:95px 0px;

}

#skin_0.selected{

    background-position:0px 15px  !important;

}

#skin_1.selected{

    background-position:15px 15px !important;

}

#skin_2.selected{

    background-position:35px 15px !important;

}

#skin_3.selected{

    background-position:55px 15px !important;

}

#skin_4.selected{

    background-position:75px 15px !important;

}

#skin_5.selected{

    background-position:95px 15px !important;

}

在html部分，通过一个ul、li来进行导航的布局。两个div进行内容的布局。在ul中设置了margin、padding、width、list-style、border、overflow等值。

在li中设置了float、width、height等。这里的背景图片用的很巧妙。

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。巧妙的利用了position+位置的组合。

当选中时，x位置不变，y位置向下移动15px，这样就会出现打钩的那个画面。这种处理非常之巧妙。
用一个图片，解决了很多问题。

下面进行jQuery代码的研读

版本一：

<script type="text/javascript">

        //<![CDATA[

        $(function(){

            var $li =$("#skin li");

            $li.click(function(){

                $("#"+this.id).addClass("selected")           //当前<li>元素选中，this是js对象，$(this)是jQuery对象。

                        .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中

                $("#cssfile").attr("href","css/"+this.id+".css"); //设置不同皮肤

            })

        })

        //]]>

</script>

这里是简单的实现了效果，更换按钮，更换皮肤。

但是并没有实现cookie。

这段代码主要实现两个动作，一个是变换按钮的选中状态，一个是改变相应的皮肤css。通过js对象this获得标签为this.id的jQuey对象，这种处理也很巧妙。

另一个，将css文件名命名与属性id相结合，也很巧妙。

修改cssfile的属性值href为新的css。

版本二：

<script type="text/javascript">

        //<![CDATA[

        $(function(){

            var $li =$("#skin li");

            $li.click(function(){

                $("#"+this.id).addClass("selected")                //当前<li>元素选中

                            .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中

                $("#cssfile").attr("href","css/"+ (this.id) +".css"); //设置不同皮肤

                $.cookie( "MyCssSkin" ,  this.id , { path: '/', expires: 10 });

            });

            var cookie_skin = $.cookie( "MyCssSkin");//将MyCssSkin这个cookie值this.id赋给变量cookie_skinif (cookie_skin) {

                    $("#"+cookie_skin).addClass("selected")                //当前<li>元素选中

                                      .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中

                    $("#cssfile").attr("href","css/"+ cookie_skin +".css"); //设置不同皮肤

                    $.cookie( "MyCssSkin" ,  cookie_skin  , { path: '/', expires: 10 });

            }

        })

        //]]>

    </script>

这里面多了一个动作，就是设置了cookie。

然后通过cookie值是否存在来做出相应的动作，如果cookie值存在，就直接将皮肤设为cookie值的值。

这里用到的是jQuery的cookie插件。

jQuery操作cookie的插件,大概的使用方法如下

$.cookie('the_cookie'); //读取Cookie值
$.cookie(’the_cookie’, ‘the_value’); //设置cookie的值
$.cookie(’the_cookie’, ‘the_value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});//新建一个cookie 包括有效期 路径 域名等
$.cookie(’the_cookie’, ‘the_value’); //新建cookie
$.cookie(’the_cookie’, null); //删除一个cookie

不过这段代码不好的地方，就是有大量的重复代码，可以模块化，函数化。这也是代码优化的一种。

版本三：

<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")                 //当前<li>元素选中

                              .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中

                $("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤

                $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });

        }

        //]]>

    </script>

用到就调用函数，参数变化即可。

jQuery之换肤与cookie插件的更多相关文章

  1. 第一百八十七节，jQuery，知问前端--cookie 插件，注册成功后生成cookie，显示登录状态

    jQuery,知问前端--cookie 插件 学习要点: 1.使用 cookie 插件 2.注册直接登录 Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登 录信息.购 ...

  2. duilib入门之贴图描述、类html文本描述、动态换肤、Dll插件、资源打包

    转载自duilib入门文档 贴图描述: Duilib的表现力丰富很大程度上得益于贴图描述的简单强大.Duilib的贴图描述分为简单模式和复杂模式两种. 简单模式使用文件名做为贴图描述内容,在这种方式下 ...

  3. jquery网页换肤+jquery的cookie+动态调用css样式文件,可以的

    比较具有参考性,代码全贴(当然,还需要一张图片需要的留个邮箱,看到就发) 贴在这儿吧,修改一下css的引用位置应该可以用 <%@ page language="java" c ...

  4. Android主题换肤 无缝切换

    2016年7月6日 更新:主题换肤库子项目地址:ThemeSkinning,让app集成换肤更加容易.欢迎star以及使用,提供改进意见. 更新日志: v1.3.0:增加一键切换切换字体(初版)v1. ...

  5. 网页换肤,模块换肤,jQuery的Cookie插件使用（转）

    具体效果如下: 第一次加载如下图: 然后点击天蓝色按钮换成天蓝色皮肤如下图: 然后关闭网页重新打开或者在打开另一个网页如下图: 因为皮肤用Cookie保存了下来,所以不会重置 具体的实现代码如下: & ...

  6. jquery.cookie中的操作之与换肤

    jquery.cookie.js的插件,插件的源代码如下: /** * Cookie plugin * * Copyright (c) 2006 Klaus Hartl (stilbuero.de) ...

  7. cookie 换肤

    jquery.Cookies.js /** * Cookie plugin * * Copyright (c) 2006 ziqiu.zhang * Dual licensed under the M ...

  8. cookie记忆换肤功能实战Demo

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. Android App插件式换肤实现方案

    背景 目前很多app都具有换肤功能,用户可以根据需要切换不同的皮肤,为使我们的App支持换肤功能,给用户提供更好的体验,在这里对换肤原理进行研究总结,并选择一个合适的换肤解决方案. 换肤介绍 App换 ...

随机推荐

  1. SAE Java开发问题汇总

    转自:http://binary.duapp.com/2012/10/275.html 1.sae上传了war后不报错,却出现一片空白: 原因:上传war包不能包含servlet-api和xmlsec ...

  2. js实现快速排序（in-place）简述

    快速排序,又称划分交换排序.以分治法为策略实现的快速排序算法. 本文主要要谈的是利用javascript实现in-place思想的快速排序 分治法: 在计算机科学中,分治法是建基于多项分支递归的一种很 ...

  3. 图解VS2010打包全过程（转）

    最近刚刚打包发布了用VS2010开发的一个收费系统,借此讲一讲打包过程,供大家参考. 首先打开已经完成的工程,如图: 下面开始制作安装程序包. 第一步:[文件]——[新建]——[项目]——安装项目. ...

  4. HDU 4348 To the moon 可持久化线段树

    To the moon Problem Description BackgroundTo The Moon is a independent game released in November 201 ...

  5. loj 1021(状压dp+记忆化搜索）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=25887 题目大意:给定的一个某进制下的排列,问它的全排列有多少个能 ...

  6. AppInventor学习笔记（三）——油漆桶应用学习

    一.组件设置 1.画笔颜色选项 选取3个Button,然后改名为红.黄.绿三种颜色,然后进行相应属性的设置. 在这里有个问题就是如何放在一行.. 将3个按钮放进这个方框里面就可以变成一行了. 2.画布 ...

  7. Android 在资源文件（res/strings.xml）定义一维数组，间接定义二维数组

    经常我们会在资源文件(res/strings.xml)定义字符串,一维数组,那定义二维数组?直接定义二维数组没找到,可以间接定义. 其实很简单,看过用过一次就可以记住了,一维数组估计大家经常用到,但是 ...

  8. POJ 3352 (边双连通分量)

    题目链接: http://poj.org/problem?id=3352 题目大意:一个连通图中,至少添加多少条边,使得删除任意一条边之后,图还是连通的. 解题思路: 首先来看下边双连通分量的定义: ...

  9. COJ885 LCS？？？

    试题描述 输入两个字符串A.B,输出他们的最长连续公共子串长度. 输入 第一行为一个字符串A. 第二行为一个字符串B. 输出 输出他们的最长连续公共子串长度. 输入示例 ababab bababbab ...

  10. (转)js:字符串(string)转json

    第一种方式: 使用js函数eval(); testJson=eval(testJson);是错误的转换方式. 正确的转换方式需要加(): testJson = eval("(" + ...