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