Home > Developer > Web Develop
Sometimes a Web page can have multiple skins to choose from, that is, different backgrounds, or a whole new set of CSS, to make the entire page into another style.
This feature can be implemented with jquery. Plus a cookie plugin. With a cookie, you can save the selected background style for a long time without having to go to the default screen every time you refresh the interface.
The effect is as follows:
Div+css of code:
<body> <ul id= "Skin" > <li id= "skin_0" title= "Gray" class= "selected" > Gray </li> < Li id= "skin_1" title= "purple" > Purple </li> <li id= "skin_2" title= "Red" > Red </li> <li id= "Skin_3 "Title=" Turquoise "> Turquoise </li> <li id=" skin_4 "title=" Orange "> Orange </li> <li id=" Skin_5 "title=" Light green > Light green </li> </ul> <div id= "Div_side_0" > <div id= "News" >
#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 | Span style= "font-size:14pt" > default value. The content is not trimmed and is rendered outside the element box. |
| hidden | |
| scroll | |
| auto | if inside is trimmed, the browser displays a scroll bar to view the rest of the content. |
| inherit | Specifies that the value of the overflow property should be inherited from the parent element. |
} #skin li{float:left; margin-right:5px; width:15px; height:15px; Text-indent:-999px;/*text-indent is used to set the indentation of the first line in a text block */Overflow:hidden; Display:block; /*
None This element is not displayed.
Block This element will be displayed as a block-level element with a newline character before and after this element.
inline Default. This element is displayed as an inline element with no line break before or after the element.
*/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;}
In the HTML section, the layout is navigated by a UL and Li. Two div for the layout of the content. In the UL set the margin, padding, width, list-style, border, overflow equivalent.
float, width, height, etc. are set in Li. The background picture here is very ingenious.
The Background-position property sets the starting position of the background image.
This property sets the position of the background image (defined by Background-image), and the background image will start at this point if it is to be repeated. Skillfully utilizes the combination of the position+ position.
When selected, the X position is unchanged, and the Y position moves downward by 15px, so that the screen of the tick appears. This kind of processing is very ingenious.
With a picture, solve a lot of problems.
The following is a reading of the jquery code
Version One:
<script type= "Text/javascript" > //<![ cdata[ $ (function () { var $li =$ ("#skin li"); $li. Click (function () { $ ("#" +this.id). AddClass ("selected") //Current <li> element selected, this is the JS object, $ (this) is a jquery object. . Siblings (). Removeclass ("selected"); Remove the other peers <li> elements of the selected $ ("#cssfile"). attr ("href", "css/" +this.id+ ". css");//Set different skins }) }) //] ]></script>Here is the simple implementation of the effect, replace the button, replace the skin.
However, cookies are not implemented.
This code mainly implements two actions, one is the selected state of the transform button, and the other is to change the corresponding skin CSS. It is also ingenious to get the Jquey object labeled This.id through the JS object this.
Another, combining CSS file names with attribute IDs, is also ingenious.
Modify the Cssfile property value href to the new CSS.
Version two:
<script type= "Text/javascript" >//<! [Cdata[$ (function () {var $li =$ ("#skin li"); $li. Click (function () {$ ("#" +this.id). AddClass ("selected")//Current <li> element selected . siblings (). Removeclass ("selected"); Remove the other peers <li> elements of the selected $ ("#cssfile"). attr ("href", "css/" + (this.id) + ". css"); Set different skin $.cookie ("Mycssskin", This.id, {path: '/', expires:10}); }); var Cookie_skin = $.cookie ("Mycssskin");//Mycssskin This cookie value this.id assigns the variable cookie_skinif (cookie_skin) { $ ("#" +cookie_skin). AddClass ("selected")//Current <li> element selected. Siblings () . Removeclass ("selected"); Remove the other peers <li> elements of the selected $ ("#cssfile"). attr ("href", "css/" + Cookie_skin + ". css"); Set different skin $.cookie ("Mycssskin", Cookie_skin, {path: '/', expires:10}); } }) ]]> </script>
One more action in this is to set up a cookie.
The cookie value is then made to act accordingly, and if the cookie value exists, the skin is set directly to the value of the cookie value.
Here is the jquery cookie plugin.
jquery operation Cookie Plug-in, probably using the following methods
$.cookie (' The_cookie '); Read Cookie value
$.cookie (' The_cookie ', ' the_value '); Set the value of a cookie
$.cookie (' The_cookie ', ' The_value ', {expires:7, path: '/', Domain: ' jquery.com ', secure:true});//Create a new cookie including the validity path domain name, etc.
$.cookie (' The_cookie ', ' the_value '); New Cookie
$.cookie (' The_cookie ', null); Delete a cookie
However, this code is not a good place, there is a lot of duplicate code, can be modular, functional. This is also a kind of code optimization.
Version three:
<script type= "Text/javascript" > //<![ cdata[ $ (function () { var $li =$ ("#skin li"); $li. Click (function () { Switchskin (this.id); }); var Cookie_skin = $.cookie ("Mycssskin");//optimize the code to modularize the function if (cookie_skin) { Switchskin (Cookie_skin); } }); function Switchskin (skinname) { $ ("#" +skinname). AddClass ("selected") //Current <li> element selected . Siblings (). Removeclass ("selected"); Remove the other peers <li> elements of the selected $ ("#cssfile"). attr ("href", "css/" + Skinname + ". css");//Set different skin $.cookie (" Mycssskin ", skinname, {path: '/', expires:10}); } ]]> </script>Use to call the function, the parameters can be changed.
jquery skinning and Cookie plugin
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
