zoukankan      html  css  js  c++  java
  • 换肤 更换主题

    1.思路

    动态插入 css 覆盖之前样式、编辑不同主题类动态加载/统一加载样式文件

    2.实现方式

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

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

    2.3 若是提前做好准备,可在编辑页面时写入对应主题包裹层或者利用node动态植入body相关类,然后编写对应主题文件。

    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
  • 相关阅读:
    ubuntu解压时中文出现乱码
    centos7下搭建高匿HTTP代理
    nmon监控分析
    oracle12c
    Linux下卸载Oracle 11g
    Oracle 11g修改字符集
    centos下静默安装oracle11g
    Hive基础之Hive开启查询列名及行转列显示
    Hive基础之HiveServer2 JDBC的使用
    JavaScript对象的创建总结
  • 原文地址:https://www.cnblogs.com/justSmile2/p/10840501.html
Copyright © 2011-2022 走看看