jQuery切换网页皮肤并保存到Cookie示例代码

以下是源代码：


代码如下:

<!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>
<title>jquery实现页面皮肤切换并保存</title><base target="_blank" />
<link href="http://keleyi.com/keleyi/phtml/jqtexiao/25/css/default.css" rel="stylesheet" type="text/css" />
<link href="http://keleyi.com/keleyi/phtml/jqtexiao/25/css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
<!-- 引入jQuery -->
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<!-- 引入jQuery的cookie插件 -->
<script src="http://keleyi.com/keleyi/phtml/jqtexiao/25/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", "http://keleyi.com/keleyi/phtml/jqtexiao/25/css/" + skinName + ".css"); //设置不同皮肤
$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
}
//]]>
</script>
</head>
<body>
<div><h2>jQuery皮肤无刷新切换并保存</h2>
<div>请点击下面的各种演示的小方框设定以下内容的皮肤,当关闭页面后再开，以下内容还是设定的颜色。因为保存到cookie，所以一段时间后打开页面，仍然为最后设置的眼色。
<br /><a href="http://keleyi.com/keleyi/phtml/jqtexiao/25.htm" style="color:blue;text-decoration:none;">新开在线体验窗口</a></div></div>
<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"><a href="http://keleyi.com/menu/jquery/">jQuery</a></h1>
</div>
</div>

<div id="div_side_1">
<div id="game">
<h1 class="title"><a href="http://keleyi.com/a/bjad/ifjrn3s1.htm">原文</a></h1>
</div>
</div>

</body>
</html>

赞 (0)

相关推荐

  • Android应用开发中实现apk皮肤文件换肤的思路分析

    Android应用开发中实现apk皮肤文件换肤的思路分析

    在android的项目开发中,都会遇到后期功能拓展增强与主程序代码变更的现实矛盾,也就是程序的灵活度. 由于linux平台的安全机制,再加上dalvik的特殊机制,各种权限壁垒,使得开发一个灵活多变的程序,变得比较困难,不像pc平台下那么容易. 这里实际上可以借鉴传统软件中扩展程序的方法: 也就是插件的实现. 如目前所有的浏览器,比如我们使用的eclipse,以及很多优秀的软件,都使用了此种方式. 这样轻松实现了软件的功能扩展,而升级功能时只用更新对应插件, 而不是需要更新整个应用,降低了程序的

  • 仿墨迹天气在Android App中实现自定义zip皮肤更换

    仿墨迹天气在Android App中实现自定义zip皮肤更换

    在这里谈一下墨迹天气的换肤实现方式,不过首先声明我只是通过反编译以及参考了一些网上其他资料的方式推测出的换肤原理, 在这里只供参考. 若大家有更好的方式, 欢迎交流. 墨迹天气下载的皮肤就是一个zip格式的压缩包,在应用的时候把皮肤资源释放到墨迹天气应用的目录下,更换皮肤时新的皮肤资源会替换掉老的皮肤资源每次加载的时候就是从手机硬盘上读取图片,这些图片资源的命名和程序中的资源的命名保持一致,一旦找不到这些资源,可以选择到系统默认中查找.这种实现是直接读取了外部资源文件,在程序运行时通过代码显示的

  • JQuery UI皮肤定制

    JQuery UI皮肤定制

    http://jqueryui.com/themeroller/进入此页面便可以定制自己的UI皮肤了  如上图,在网页的左侧的tab栏上单击Gallery选项,便会在下方列出Jquery官方提供的皮肤,点击任意一套皮肤下面的Edit便会跳到Rool Your Own,在你选中的皮肤基础上便可定制出自己想要的皮肤,定制过程是所见即所得,所有用起来很方便,定制完后,点击Rool Your Own下方的Download theme跳到下载页面, 在下载页面右侧点击Download按钮就可以把皮肤下载到

  • jQuery无刷新切换主题皮肤实例讲解

    jQuery无刷新切换主题皮肤实例讲解

    主题皮肤切换功能在很多网站和系统中应用,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验.本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能. 实现该功能的原理就是通过点击定义的主题样式,改变页面当前引用的主题CSS文件,并且将当前的主题样式写入cookie中或者写入数据库中,以便下次该用户重新访问页面时,调用的就是上次设置好的主题样式. 准备主题皮肤样式 首先,我准备了三个样式表CSS文件,分别是三种风格的主题皮肤,将其引入页面,放置在页面的<head>之间. <

  • ASP、PHP与javascript根据时段自动切换CSS皮肤的代码

    根据时间自动调整站点风格是不错的想法,这种根据时间自动调整站点风格也不是什么新鲜事,记得好久以前也见过类似的文章或方法,只不过当时没有特别注意.下面说一下它们的实现方法,目前网上有这样两种实现方法: 一.采用服务端的代码 ASP版本: <link rel="stylesheet" type="text/css" href=" <% if hour(now)<12 then response.write "morning.css&

  • js仿百度切换皮肤功能（html+css）

    js仿百度切换皮肤功能（html+css）

    js仿百度切换皮肤效果:(换肤出来一个div,选择你想要的图片,作为网页背景,保存) 要点:cookie保存状态 html代码: <body> <div id="header"> <div id="header_con"> <div class="dbg"><a href="javascript:;" onclick="showImgBox()">

  • JQuery给网页更换皮肤的方法

    本文实例讲述了JQuery给网页更换皮肤的方法.分享给大家供大家参考.具体分析如下: 为了更好的提升用户体验,很多网页都有换肤的功能,那么这是怎么实现的那,其实,换肤只不过是在对应的位置改了Css样式罢了!! 下面就演示如何简单的换肤 在设计HTmL代码时,注意一些小技巧,可以将皮肤选项按钮的id设置成和皮肤样式文件名称相同,这样皮肤切换的操作就简单多了样式连接要带一个有Id样式的连接表,通过操作该链接的href属性的值,从而实现换肤.即: 用户点击完就可以换肤了,但是,当用户刷新或者关闭浏览器

  • python实现360皮肤按钮控件示例

    复制代码 代码如下: #!/usr/bin/python  #-*-coding:utf-8-*- from PyQt4.QtGui import *from PyQt4.QtCore import *from PyQt4.Qt import * class ChangeSkinWidget(QWidget): def __init__(self,parent = None):  super(ChangeSkinWidget,self).__init__(parent)  self.setFix

  • 一步一步实现iOS主题皮肤切换效果

    一步一步实现iOS主题皮肤切换效果

    本文实例为大家分享了iOS主题皮肤切换代码,供大家参考,具体内容如下 1. 主题皮肤功能切换介绍 主题切换就是根据用户设置不同的主题,来动态改变用户的界面,通常会改变navigationBar背景图片.tabBar背景图片.tabBar中的按钮的图片和选中的背景图片.navigationItem.title 标题的字体颜色.UI中其他元素控件 下载源代码地址: http://xiazai.jb51.net/201609/yuanma/ThemeSkinSetup(jb51.net).rar 2.

  • jQuery切换网页皮肤并保存到Cookie示例代码

    以下是源代码: 复制代码 代码如下: <!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> <title>j

  • jQuery实现拖拽页面元素并将其保存到cookie的方法

    本文实例讲述了jQuery实现拖拽页面元素并将其保存到cookie的方法.分享给大家供大家参考,具体如下: 实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中 好了,开始 1.准备工作 a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张) 2.页面 上代码 <div class="img_list" id="img_list"&g

  • 如何决定是否将登录内容保存到Cookie里？

    login.htm <% @ Language=&#106avascript %><%if (Request.Cookies("SavedLogin").HasKeys) {    Response.Redirect("checklogin.asp?Cookie=1")}%> <html><head> <title>精彩春风之登录页面</title> </head><b

  • PHP实现将浏览历史页面网址保存到cookie的方法

    本文实例讲述了PHP实现将浏览历史页面网址保存到cookie的方法.分享给大家供大家参考.具体如下: 将浏览历史页面网址保存到cookie,大致的思路如下面的代码,与实际应用有些差别. 复制代码 代码如下: <?php /*******  说明:cookie只能保存字符串 本实例中,需要保存多个URL(历史访问记录),思路是先将URL数组转为字符串,然后保存,读取时,再循环读取 *******/ //先假设当前URL为:http://localhost/php/?id=1 $id = $_GET

  • python爬取网页数据到保存到csv

    python爬取网页数据到保存到csv

    目录 任务需求: 爬取网址: 网址页面: 代码实现结果: 代码实现: 完整代码: 总结 任务需求: 爬取一个网址,将网址的数据保存到csv中. 爬取网址: https://www.iqiyi.com/ranks1/1/0?vfrm=pcw_home&vfrmblk=&vfrmrst=712211_dianyingbang_rebo_title 网址页面: 代码实现结果: 代码实现: 导入包: import requests import parsel import csv 设置csv文件格

  • 使用SSM+Layui+Bootstrap实现汽车维保系统的示例代码

    使用SSM+Layui+Bootstrap实现汽车维保系统的示例代码

    本项目主要实现对汽车维修厂的信息化管理功能,主要包含三个角色:管理员,维修师傅,客户.实现的主要功能包含用户管理.配置管理.汽车管理.故障管理.供应商管理.配件管理.维修订单管理.统计信息.公告管理.个人信息管理.主要业务流程:用户在系统内发起汽车维修申请定单,管理员根据情况将定单分配给维修师傅,维修师傅接受任务后开始维修,并根据情况申请配件,处理完成后由管理员生成最终支付订单结算费用,客户进入系统进行费用支付,并可以查看自己相应的维修记录和费用信息等等. 技术架构: 后台开发:SSM框架 前端

  • Vue + Scss 动态切换主题颜色实现换肤的示例代码

    根据预设的配色方案,在前端实现动态切换系统主题颜色. 大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量.这里可以选择持久化Vux或接口来保存用户选择的主题. 一.首先需要给项目下载配置Scss 1.安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { t

  • 如何实现修改密码时密码框显示保存到cookie的密码

    只要在input框中加入AUTOCOMPLETE="OFF" 即可 复制代码 代码如下: <input name="pwd" id="password" type="password" class=" required" AUTOCOMPLETE="OFF" />

  • 用JQuery在网页中实现分隔条功能的代码

    用JQuery在网页中实现分隔条功能的代码

    Javascript代码如下,将该代码保存成JS文件后在HTML中引用. 复制代码 代码如下: jQuery.noConflict(); jQuery.fn.extend({ jsplit: function (j) { return this.each(function () { j = j || {}; j.Btn = j.Btn || {}; j.Btn.oBg = j.Btn.oBg || {}; j.Btn.cBg = j.Btn.cBg || {}; var jun = { MaxW

  • Python实现读取目录所有文件的文件名并保存到txt文件代码

    代码: (使用os.listdir) 复制代码 代码如下: import os def ListFilesToTxt(dir,file,wildcard,recursion):     exts = wildcard.split(" ")     files = os.listdir(dir)     for name in files:         fullname=os.path.join(dir,name)         if(os.path.isdir(fullname)

随机推荐