换肤 更换主题

1.思路

动态插入 css 覆盖之前样式

2.实现方式

2.1 若是单页、或者设计比较好的模板页面，可以在 html 顶部前置一个 js 文件处理 不同主题 下将要用到的样式文件.

2.2 使用 onload 方法加载完毕执行后续代码（配合共用 css 文件效果更佳）、ajax 加载 css 文件然后插入 style 标签装载接收到的 文本 （ 需要更改 css 文件相对路径 - 正则替换 ）

3. 核心代码

3.1 onload

    var colorConfig={
        green:'#fff',
        blue:'#fff',
        gray:'#1b223a'
    }   
    var theme = $.cookie("colorId") ? $.cookie("colorId") : 'green';
    $('html').css('backgroundColor',colorConfig[theme]);
    if ($("#themeCss").length < 1) {
        $("<link>")
            .attr({
                rel: "stylesheet",
                type: "text/css",
                href: "/cwweb/admin/css/theme/" + theme + ".css",
                id: "themeCss"
            })
            .appendTo("head");            
    }
    window.onload=function(){    
        $('body').show();
    }

View Code

3.2 ajax

$.ajax({  
    url: '/css/jquery-ui-1.8.14.custom.css',  
    success: function(data) {  
        //创建一个style元素，并追加到head中  
        //替换其中images的路径  
        $('<style type="text/css">' + data.replace(/url\(images/g, 'url(/css/images') + '</style>').appendTo('head');  
        //dialog() script;  
    }  
});  

View Code