How to use jQuery.cookie.js plug-in to realize skin change function
This article mainly explains "how to use the jQuery.cookie.js plug-in to achieve the skin change function", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to use the jQuery.cookie.js plug-in to achieve skin change function"!
Let's take a look at how to use cookie.js.
Import first:
And then you can use it.
$.cookie ('the_cookie'); / / read cookie value
$.cookie ('the_cookie','the_value'); / / set the value of cookie
$.cookie ('the_cookie','the_value', {expires:7,path:'/',domain:'example.com',secure:true}); / / create a new cookie. "expires" is the valid number of days, "path" is the save path, "domain" is the domain name of the web page that created cookie, and "secure" is whether the transmission of cookie uses security protocol (HTTPS).
$.cookie ('the_cookie','the_value'); / / create a cookie
$.cookie ('the_cookie',null); / / Delete a cookie
Attach the code:
The use of cookie
.huanFu {
Float:right
}
.huanFuulli {
Width:30px;height:30px
List-style:none
Margin:05px
Float:left
Cursor:pointer
Border:1pxsolid#000
}
.fu1 {background-color:#F00;}
.fu2 {background-color:#0F0;}
.fu3 {background-color:#00F;}
.fu4 {background-color:#FF0;}
.huanFuulli.select {border:3pxsolid#000;margin-top:-3px;}
$(function () {)
$(".huanFuulli") .on ("click", function () {
VarpiFu=$ (this) .attr ("fuName"); / / get the funame value of the selected skin
$("body") .attr ("class", piFu); / / add a class value to the body, that is, add the corresponding background color
$(this) .addClass ("select") .siblings () .removeClass ("select"); / / only the selected li has a large black box selection, and the rest remove the large black box selection effect
$.cookie ("MySkin", piFu, {path:'/',expires:10}); / / create a cookie and save it to the local cookie
})
VarcookieSkin=$.cookie ("MySkin"); / / fetch the saved value from the local cookie
If (cookieSkin) {
$(".huanFuulli [fuName='" + cookieSkin+ "']") .addClass ("select") .siblings () .removeClass ("select"); / / only the selected li is selected with a large black box, and the rest is selected without a large black box.
$("body") .attr ("class", cookieSkin); / / add a class value to the body, that is, add the corresponding background color
} else {
$("body") .attr ("class", "fu1"); / / if the local cookie has no record, the red background is used by default.
}
})
At this point, I believe you have a deeper understanding of "how to use the jQuery.cookie.js plug-in to achieve skin-changing function". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
