有时候一个网页可以有多个皮肤进行选择，也就是不同的背景，或是一整套新的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. Android快捷键

    Android快捷键ALT+/ :在布局文件中,提示输入的内容Shift + Ctrl +  / :注释Shift + Ctrl +  \ :解除注释

  2. Effective C++笔记：构造/析构/赋值运算

    条款05:了解C++默默编写并调用哪些函数 默认构造函数.拷贝构造函数.拷贝赋值函数.析构函数构成了一个类的脊梁,只有良好的处理这些函数的定义才能保证类的设计良好性. 当我们没有人为的定义上面的几个函 ...

  3. Codeforces Gym 100203G G - Good elements 标记暴力

    G - Good elementsTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/ ...

  4. 在CentOS 6上搭建私有的Docker Registry

    在CentOS 6上搭建私有的Docker Registry v2Registry概念 :Registry是一个无状态的, 高可扩展的服务器端应用程序, 用于存储和分发Docker Image. 依赖 ...

  5. JavaScript案例二：在末尾添加节点

    简单实现通过JavaScript来增加HTML节点 <!DOCTYPE html> <html> <head> <title>JavaScript在末尾 ...

  6. 【word xml】将word转化为xml格式后，如何在xml中卫word添加分页符

    1.首先在xml中找到我们需要添加分页符的位置 例如:我需要在这个第一部分上面添加一个分页符 2.找到这个[第一部分]这个位置之后,开始往上找,找到对应的位置 3.在</w:pPr>下方添 ...

  7. 记录sqoop同步失败问题解决过程，过程真的是很崎岖。(1月6日解决)

    记录sqoop同步失败问题解决过程,过程真的是很崎岖.事发原因:最近突然出现sqoop export to mysql时频繁出错.看了下日志是卡在某条数据过不去了,看异常.看sqoop生成的mr并未发 ...

  8. SGU326 Perspective（指派问题）

    题目简单吧,如果知道题目要干嘛的话. 每个比赛指定A赢或者B赢使它们赢得次数不超过1赢得次数.建立一个二分图模型,X部比赛,Y部队伍,用最大流求解,如果最后最大流等于比赛场数就有解. 然而我还是掉坑里 ...

  9. BZOJ3571 : [Hnoi2014]画框

    题目是要求最小乘积最小权匹配, 将一种方案看做一个二维点(x,y),x=a值的和,y=b值的和,所有方案中只有在下凸壳上的点才有可能成为最优解 首先要求出两端的方案l,r两个点 l就是a值的和最小的方 ...

  10. 洛谷 P1008 三连击 Label：水

    题目描述 将1,2,…,9共9个数分成三组,分别组成三个三位数,且使这三个三位数构成1:2:3的比例,试求出所有满足条件的三个三位数. 输入输出格式 输入格式: 木有输入 输出格式: 若干行,每行3个 ...