CSS 换肤实现

一、换肤原理

网页换肤的基本原理:

使用 JS 切换对应的 CSS 样式表。例如导航网站 Hao123 的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie或者H5的session技术 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项。

工作流程就出来了:访问网页——JS 读取 Cookie || session ——如果没有,使用默认皮肤——如果有,使用指定皮肤;用户点击换肤选项——JS 控制替换对应的 CSS 样式表——将皮肤选项写进 Cookie | | session 保存。

 

逻辑思维图:

 

 

二、搭建前端工程

 

1、单项目换肤实现

 

 

1css文件:

 

全局:global.css

全局样式为全站公用,为页面样式基础,页面中必须包含。

结构:layout.css

页面结构类型复杂,并且公用类型较多时使用。多用在首页级页面和产品类页面中。

私有:style.css

独立页面所使用的样式文件,页面中必须包含。

模块 module.css

产品类页面应用,将可复用类模块进行剥离后,可与其它样式配合使用。

主题 themes.css

实现换肤功能时应用。

2data目录

用于存放测试接口数据,用于前后台对接之前测试功能。通长用json格式文件模拟

 

3、Framework目录

用于存放框架

 

 

4、JS目录

JS文件以功能切割js文件代码

 

App.js:存放页面MVC框架

Controller:存放功能模块的控制器

Directive:存放操作dom的指令

Filter:过滤器操作

Service:公用服务类

5Less目录

 

Less:文件目录用于存放控制全局的基础样式,如需变更颜色字体等将会在less中修改一次性装换为CSS.

6、src目录

 

用于存放静态资源:图片,背景等。

7tpls目录

 

如果是单页面应用将会存放:文档片段代码。

非单页面应用:将会存放分页html.

2、多项目工程之间应用换肤

不同的项目可能定制不同的主题皮肤,虽有不同但又共通点,要实现换肤功能在不同项目之间反复使用,需要前期规划号CSS方向。

 

相同点:

1、所有项目项目之间引用相同的模板初始化化文件。统一所有浏览器的基础样式

2、定义相同的class类名,即使不同项目,样式不同,但其中的web组件相同,通过定义web组件名从而通过名称控制CSS样式。达到样式的复用。

如:手风琴组件 class名称统一为accordion 公共CSS文件中定义accordion的基础样式,在各自的项目中也可以操作accordion CSS从而定制不同颜色,背景。

不同点:

1、各个项目之间的样式风格不统一,每个项目都有自己不同的themes css文件,根据客户的要求进行样式调整。

2、Web项目布局不统一,如手风琴导航与面包屑导航,对不同的项目应当合理引入组件CSS,而不能为了省事加载所有公共类样式,这样只会增加不必要的请求书与客户端内存的压力。

多工程目录

 

commonProject为公共基础目录

里面的css文件下

Common放入的是全局静态的CSS如页面初始化

webAppSubgroup文件夹下放入是web基础组件,如accordionslide等基础组件

ProjiectAProjectB结构相同 目录功能参考单个项目

项目与项目之间的引入可以通过require.js或者依赖javaWeb基础类库实现,

达到按需载入的目的。

3、换肤动态加载CSS模板

HTML代码如下:

<p>前端开发是我的一个职业目标,我喜欢前端开发,热爱前端开发,喜欢制作各种各样的页面效果p><inputtype="button" data-value="default" class="targetElem" value="default"/><inputtype="button" data-value="green" class="targetElem" value="green"/><inputtype="button" data-value="red" class="targetElem" value="red"/><inputtype="button" data-value="orange" class="targetElem" value="orange"/>

CSS代码

 default.css 代码如下:

@charset "utf-8";/* CSS Document */

*{padding:0;margin:0;}

h2{color:#00C;}

p{color:#006;}

orange.css代码如下:

@charset "utf-8";/* CSS Document */

*{padding:0;margin:0;}

h2{color:#C60;}

p{color:#C33;}

green.css代码如下:

@charset "utf-8";/* CSS Document */

*{padding:0;margin:0;}

h2{color:#060;}

p{color:#060;}

red.css代码如下:

@charset "utf-8";/* CSS Document */

*{padding:0;margin:0;}

h2{color:#F00;}

p{color:#F00;}

JS代码如下:

/**

 * JS实现换肤功能

 */// Google Chrome只支持在线网站的cookie的读写操作,对本地htmlcookie操作是禁止的。

// name1=value1;name2=value2;name3=value3;name4=value4

 function Skin(options) {

 

    this.config = {

        targetElem    :  '.targetElem',

        link           :  '#link'

    };

    this.cache = {

        defaultList   : ['default','green','red','orange']

    };

 

    this.init(options);

 }

 

 Skin.prototype = {    

    constructor: Skin,

    init: function(options) {

        this.config = $.extend(this.config,options || {});

        var self =this,

            _config = self.config;

        $(_config.targetElem).each(function(index,item) {      

            $(item).unbind('click');

            $(item).bind('click',function(){

                var attr = $(this).attr('data-value');

                self._doSthing(attr);

            });

        });

        //判断是否是谷歌游览器 谷歌游览器因为不支持cookie在本地上存储 所以引入了HTML5

        if(window.navigator.userAgent.indexOf("Chrome") !== -1) {

            var tempCookeie = self._loadStorage("skinName"),

                t;

            if(tempCookeie != "null") {

                t = tempCookeie;

            }else {

                t = 'default';

            }

            self._setSkin(t);

        }else {

            var tempCookeie = self._getCookie("skinName");

            self._setSkin(tempCookeie);

        }    

    },

    /*

     * 进行判断 来设置css样式

     */

    _doSthing: function(attr) {

        var self =this,

            _config = self.config,

            _cache = self.cache;

        if(window.navigator.userAgent.indexOf("Chrome") !== -1) {

            self._doStorage(attr);

            var istrue = localStorage.getItem(attr);

            self._setSkin(attr);

        }else {

            var istrue = self._getCookie(attr);

            if(istrue) {

                for(var i = 0; i < _cache.defaultList.length; i++) {

                    if(istrue == _cache.defaultList[i]) {

                        self._setSkin(_cache.defaultList[i]);

                    }

                }

            }

        }

        

    },

    /*

     * 改变样式

     */

    _setSkin: function(skinValue){

        

        var self =this,

            _config = self.config;

        

        if(skinValue) {

            $(_config.link).attr('href',"style/"+skinValue+".css");

        }

        if(window.navigator.userAgent.indexOf("Chrome") !== -1) {

            self._saveStorage(skinValue);

        }else {

            self._setCookie("skinName",skinValue,7);

        }

        

    },

    /*

     * 重新

     */

    _doStorage: function(attr) {

        var self =this;

        self._saveStorage(attr);

    },

    /*

     * html5获取本地存储

     */

    _loadStorage: function(attr) {

        var str = localStorage.getItem(attr);

        return str;

    },

    /*

     * HTML5本地存储

     */

    _saveStorage:function(skinValue) {

        var self =this;

        localStorage.setItem("skinName",skinValue);

    },

    /*

     * getCookie

     */

    _getCookie: function(name) {

        var self =this,

            _config = self.config;

        var arr = document.cookie.split("; ");

        for(var i = 0; i < arr.length; i+=1) {

            var prefix = arr[i].split('=');

            if(prefix[0] == name) {

                return prefix[1];

            }

        }

        return name;

    },

    /*

     * _setCookie

     */

    _setCookie: function(name,value,days) {

        var self =this;

 

        if (days){

            var date =new Date();

            date.setTime(date.getTime()+(days*24*60*60*1000));

            var expires = "; expires="+date.toGMTString();

        }else {

            var expires = "";

        }

        document.cookie = name+"="+value+expires+"; path=/";

    },

    /*

     * removeCookie

     */

    _removeCookie: function(name) {

        var self =this;

        //调用_setCookie()函数,设置为1天过期,计算机自动删除过期cookie

        self._setCookie(name,1,1);

    }

 };

// 初始化

$(function(){

    new Skin({});

});

 

 

三、注意点

1[强制] CSS样式层叠表中所有公共样式非特殊要求,严禁覆盖其公共样式中的非定制样式。

只修改要定制的主题样式属性,id ,class,标签 名称要与global.css保持一致.

Ex:

/*bad*/

//global文件下的CSS

.a{

    displayinline-bloak;//global.css

text-align:center

}

//themes文件下的css

.b{

background:#ddd;//themes.css

}

错误原因:class名称不一致 更换样式不代表更换页面标签 跟换主题时页面标签中的classa,所有themes.css及使加载也不会重新渲染DOM

/*good*/

//global文件下的CSS

.a{

displayinline-bloak;//global.css

text-align:center;

}

//themes文件下的css

.a{

background:#ddd;//themes.css

}

2、使用Cookie的问题

    如果是本地启动的项目,因为没有放到任何服务器下面所以我直接放在桌面上 点击页面打开,突然发现 "谷歌游览器不支持cookie在本地存储"。所以针对这个问题在谷歌游览器下没有用cookie存储,而是用了上面介绍的HTML5中的localStorage作本地存储功能。通过setItem设置key名 然后通过getItem获取key名 进而获取值。

 cookie sessionStoragelocalStorage共同点及区别

 共同点:

   都是在浏览器端存储的数据,且同源的。

 区别:

     1. 存储大小不一样: cookie存储数据有限制 做多只能是4KBsessionStoragelocalStorage可以存储5MB甚至更多数据。

     2. cookie 数据始终在同源的http请求中携带,即cookie在浏览器和服务器间来回传递。而sessionStoragelocalStorage不会自动把数据发给服务器,仅在本地保存。

     3. 数据有效期不同: sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持; localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

    4. 作用域不同, sessionStorage不在 不同的浏览器窗口中共享,即使是同一个页面; localStorage在所有同源窗口中都是共享的;cookie也是在 所有同源窗口中都是共享的。

 

你可能感兴趣的:(js,css,html,html5,h5)