换肤

日期:2013-8-14 21:12 | 标签: | 阅读:332

换肤是网站的一个基本功能,那么怎么来实现换肤这一功能呢?

切换Class

典型代表有YXcms

function changecolor(){
    var ocolor=$.cookie('yx_ocolor');
    var ncolor=$.cookie('yx_ncolor');
    if(ocolor&&ncolor){
       $('.bg-'+ocolor).not('.fcolor').removeClass('bg-'+ocolor).addClass('bg-'+ncolor);
       $('.bg-dark'+ocolor).not('.fcolor').removeClass('bg-dark'+ocolor).addClass('bg-dark'+ncolor);
       $('.text-'+ocolor).not('.fcolor').removeClass('text-'+ocolor).addClass('text-'+ncolor);
       $('#toplogo').attr('src','__PUBLICAPP__/images/logo'+ncolor+'.png');
    }
}
jQuery(function() {
    if($.cookie('yx_ncolor')&&$.cookie('yx_ncolor')!='blue'){
        $.cookie('yx_ocolor','blue');
        changecolor();
    }
    $('.change').click(function(){
        var tcolor=$(this).attr('id');
        if($.cookie('yx_ncolor')) $.cookie('yx_ocolor',$.cookie('yx_ncolor'));
        else $.cookie('yx_ocolor','blue');
        $.cookie('yx_ncolor',tcolor,{expires:7});
        changecolor();
    });
});

切换样式表

做法是使用js添加和删除样式表,个人觉得此类方法不利于代码维护,特别是样式表多起来的时候。

组件化

每个组件都有自己的一套换肤方案,组件公布接口来进行换肤。这样的话,代码容易组织与维护,但是需要对接口进行约定,限制较多。

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式