网页皮肤动态切换机制

必须分离:结构性css代码放到一个文件,皮肤性css代码,这个很容易判断:切换皮肤时,它要变吗?变就是皮肤性的,这么做的原因是,firefox在切换时,如果没有结构性css在页面中,它会进行一个这样的变化过程:载入red.css,显现red效果,切换到blue.css时候,显现无css的html默认样式,加载blue.css完成,显现blue.css效果.这样就会看到浏览器中的结构一下全乱完再变回来.

css目录结构:

css/red/*.css

css/blue/*.css

css/*.css

---------html中根据cookie色/默认色载入初始皮肤,且命名id,且挂勾到全局更新对象中-------
<script>CHRD.onloadStyle('head_big');/*动态应用皮肤,且id=文件名*/</script>

//皮肤切换
CHRD.funcAll(CHRD.getObj('.styleSwitch'), function(){    
    this.current.onclick = function () {
        CHRD.showMaskDiv({htm:'恭喜您,已经成功更换了默认的颜色!', bind:{id:this}, autoClose:1});
        CHRD.skin.change(this.href.replace(/^.+#/, ''));//从锚点中得到色
    }
});

/*
 * 根据cookie设置,应用对应的皮肤或是默认的red,cssFile是样式的名字(如name dir/name),相对于css/chrd/色系/cssFile.css
 * 通过本方法加载的css将会在切换时同时切换到其它色
 */
CHRD.onloadStyle = function(cssFile) {
    var cssId = cssFile.replace(/[\\\/]/g, '_');//从名字中得到id,一般cssfile dir/name 或 name
    CHRD.skin.links[cssId] = cssFile;//记录css的id与名字,全局更新挂载对象
    
    if (!CHRD.skin.color) {//首次载入时,检测cookie色
        CHRD.skin.color = CHRD.getCookie('skinColor');
        !CHRD.skin.color && (CHRD.skin.color = 'red');
    }
    
    var cssUrl = 'http://cms.chinahrd.net/statics/css/chrd/' + CHRD.skin.color + '/' + cssFile + '.css';
    document.write('<link href="' + cssUrl + '" rel="stylesheet" type="text/css" id="' + cssId + '"/>');//载入且命名id
}
/*
 * 切换皮肤
 */
CHRD.skin.change = function(color) {
    CHRD.setCookie('skinColor', color);//cookie记录皮肤色
    
    for (var css in CHRD.skin.links) {//更换所有的css,从全局挂载对象
        CHRD.getObj(css).href = CHRD.getObj(css).href.replace(/chrd\/[^\/\\]+/i, 'chrd/' + color);//换上新色css
    }   
}