html页面换肤的简单实例
来源:互联网 发布:长湖镇人类 知乎 编辑:程序博客网 时间:2024/03/29 07:33
利用iQuery实现简单的页面换肤功能
昨天,王老师突然蹦出个想法:能不能实现地图背景皮肤切换的功能,当时听到这个的时候给我的第一感觉就是腾讯QQ空间自定义皮肤功能。然后他还展示了他以前做过的网站,实现换肤的功能,感觉他做得有点复杂,他把css样式表存放在数据库中的,用户登录进来以后自定义自己中意的皮肤后保存,然后数据库就保存了当前用户的css信息,这样下一次用户再一次进入该网站后就会默认显示上一次用户保存的样式。这个方案固然可行,但是我发现一个最大的问题就是页面加载的速度不是很快,每一次切换后都要从数据库中去读取。
抱着这样的问题,我一直在寻找问题的解决方案。偶然看到网上一篇博文,他是用cookie来保存用户选择的样式表,两个的效果一对比明显的用cookie快了不止一点啊!
下面我分析一下jQery cookie实现保存用户数据的方法
<script type="text/javascript"> //换肤方法 $(function () { //为ul中li元素添加点击方法 $('#selectColor li').click(function () { //选择当前样式,移除旧样式 $("#" + this.id).addClass("selected").siblings().removeClass("selected"); $('#mycolor').attr("href", "css/" + (this.id) + ".css"); //将所选的颜色存入cookie中 $.cookie("MyCookie", this.id, { path: '/', expires: 10 }); }); var cookieskin = $.cookie("MyCookie");//初始化cookie的name if (cookieskin) { //判断是否存在name,存在则保存 $("#" + cookieskin).addClass("selected").siblings().removeClass("selected"); $('#mycolor').attr("href", "css/" + (cookieskin) + ".css"); $.cookie("MyCookie", cookieskin, { path: '/', expires: 10 }); } }) </script>
0 0
- html页面换肤的简单实例
- 页面换肤实例
- WPF换肤的简单实例
- 简单的换肤
- asp.net简单实现页面换肤
- HTML与CSS简单页面效果实例
- 个人简介 - HTML/CSS简单页面实例
- HTML与CSS简单页面效果实例
- HTMl与CSS简单页面页面效果实例
- 一个简单的html页面
- 简单的HTML登录页面
- 框架页面的换肤实现
- 页面的换入
- 支持换肤功能的窗口实例
- 支持换肤功能的窗口实例
- CSS基础-37HTML与CSS简单页面效果实例
- extjs换肤实例
- Android简单的换肤demo
- c 和 c++ 中的文件路径表示
- Checkmarx 支持“心脏出血”漏洞的代码扫描
- 用 opencv 中旋转函数 写的 电子钟
- C语言基础—基础语法
- 从日期转化为星期几?
- html页面换肤的简单实例
- VMware Workstation 无法恢复错误: (vmx)
- Jpush
- [伯努利数] poj 1707 Sum of powers
- 个人新博客
- 递归和迭代区别(以前查询资料整理)
- Delphi连接SQL Server 2000【转载】
- Apache软件基金会 项目
- hibernate学习(word文档备注不能正常显示,如有错误,忘不吝指正)