兼容IE8及以上的换肤控件

来源：互联网发布：ios 大众点评源码编辑：程序博客网时间：2024/06/05 02:55

写了一个兼容到IE8的简单换肤控件（只支持换颜色~），实现换肤功能

代码实现
changeSkin.js

/* * 基于jquery的换肤功能 * 在有业务需要进行换肤的情况下使用 *  * @param option 参数 * */function ChangeSkin(option) {    var _default = {        tarDom: null,        setDom : null,        bgColor: null,        fontColor: null,    };    var othis = this;    //深度遍历缓存当前颜色    othis.settings = $.extend(true, _default, option);    othis.tarDom = $(this.settings.tarDom);    othis.setDom = $(this.settings.setDom);    othis.init = function() {        var str = '<ul class="color-controller">';        $.each(othis.settings.bgColor, function(i, val) {            str += '<li>' +                '<div style="width:20px;height:20px;background-color:' +                val +                ';color:' +                othis.settings.fontColor +                '">' +                '</div>' +                '</li>';        });        str += '</ul>'        othis.tarDom.html(str);        othis.isHasLocal();        othis.Onclick();    }}ChangeSkin.prototype = {    isHasLocal :function(){        var othis = this;        var xxx = this.judgeBrown;        if(xxx){            if(othis.getBylocalStorage()){                othis.setDom.css({'background-color':othis.getBylocalStorage()});            }            else {            }        } else {            if(othis.getByCookie()){                othis.setDom.css({'background-color':othis.getByCookie()});            }        }    },    Onclick: function() {        var othis = this;        var xxx = this.judgeBrown;        this.tarDom.on('click', 'li', function() {            var that = $(this);            var bgColor = that.find('div').css('background-color');            console.log(bgColor)            if(xxx) {                //现代                othis.saveBylocalStorage(bgColor);                othis.setDom.css({'background-color':othis.getBylocalStorage()});            } else {                //老版                othis.saveByCookie(bgColor);                othis.setDom.css({'background-color':othis.getByCookie()});            }        })    },    judgeBrown: function() {        var browser = navigator.appName;        var b_version = navigator.appVersion;        var version = b_version.split(";");        var trim_Version = version[1].replace(/[ ]/g, "");        if(browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") {            alert("IE 6.0");            /*$('.color-controller').on('click','li',function(){            });*/            return false;        } else if(browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") {            alert("IE 7.0");            return false;        } else if(browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0") {            alert("IE 8.0");            return false;        } else if(browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") {            alert("IE 9.0");            return false;        } else {            /*现代浏览器*/            alert("现代浏览器");            return true;        }    },    saveBylocalStorage: function(color) {        /*现代浏览器本地缓存方式*/        localStorage.setItem('zy_bgColor_12138', color);    },    getBylocalStorage: function() {        var value = localStorage.getItem('zy_bgColor_12138');        return value;    },    delBylocalStorage: function() {        localStorage.removeItem('zy_bgColor_12138');    },    saveByCookie: function(color) {        /*老版浏览器本地缓存方式*/        var date = new Date();        date.setDate(date.getDate() + ltime); //失效时间        return document.cookie = 'zy_bgColor_12138' + '=' + color + ';Expires=' + date.toGMTString();    },    getByCookie: function() {        var arr,            reg = new RegExp("(^| )" + "zy_bgColor_12138" + "=([^;]*)(;|$)");        if(arr = document.cookie.match(reg)) {            return arr[2];        } else {            return null;        }    },    delByCookie: function() {        othis.saveByCookie('zy_bgColor_12138', 1, -10);    }};

html页面以及引用

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/jquery-1.11.0.js"></script>        <script type="text/javascript" src="js/changeSkin.js"></script>    </head>    <body id="body">        <div id="cccc"></div>    </body>    <script type="text/javascript">        window.onload = function() {            var x = new ChangeSkin({                tarDom: '#cccc',                setDom: 'body',                bgColor: ['#ff0000', '#cccccc', '#000000'],                fontColor: '#ffffff'            });            x.init();        }    </script></html>

页面效果
第一次打开浏览器
初始打开浏览器

选择颜色
选择皮肤

关闭浏览器再次打开

完成记录功能，代码之后附上。

1 0