jquery学习笔记切换皮肤

最新推荐文章于 2024-04-18 17:17:12 发布

fendou4533

最新推荐文章于 2024-04-18 17:17:12 发布

阅读量625

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/fendou4533/article/details/8752075

版权

jquery 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <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" />
    
   <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
   
   <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")                 //当前<li>元素选中
                              .siblings().removeClass("selected"); //去掉其它同辈<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>

default.css

*{
    margin:0px;
    padding:0px;
}
body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
}
#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;
    }
#skin li{
   float:left;
    margin-right:5px;
    width:15px;
    height:15px;
   text-indent:-999px;
   overflow:hidden;
   display:block;
   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;
}
.title
{
    cursor:pointer;}
h1{
   margin:10px;
   padding:10px 20px;
   width:60px;
   color:#ffffff;
   font-size:14px;
}
a:link {
   text-decoration: none;
   color: #333333;
}
a:visited {
   color: #333333;
   text-decoration: none;
}
a:hover {
   color: #000000;
   text-decoration: underline;
}

skin_1.css

h1{
background:#BB3BD9;
}

skin_2.css

h1{
background:#E31559;
}

jquery.cookie.js

/**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/

/**
* Create a cookie with the given name and value and other optional parameters.
*
* @example $.cookie('the_cookie', 'the_value');
* @desc Set the value of a cookie.
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie', null);
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
*       used when the cookie was set.
*
* @param String name The name of the cookie.
* @param String value The value of the cookie.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
*                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
*                             If set to null or omitted, the cookie will be a session cookie and will not be retained
*                             when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
*                        require a secure protocol (like HTTPS).
* @type undefined
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/

/**
* Get the value of a cookie with the given name.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String name The name of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
jQuery.cookie = function(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        // CAUTION: Needed to parenthesize options.path and options.domain
        // in the following expressions, otherwise they evaluate to undefined
        // in the packed version for some reason...
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};