zoukankan      html  css  js  c++  java
  • ztree树样式的设计

    ztree的功能虽然很是强大,但是唯一有一点就是样式有点普通,所以如果我们需要修改样式,那么就只能进行样式重新覆盖了

    样式代码,这些都是根据实际样式进行覆盖

    /**
     * tree的选中样式
     */
    .checkbox_true_full+a>span,.light .checkbox_true_part+a>span,
    .checkbox_true_full_focus+a>span,.light .checkbox_true_part_focus+a>span{
        color:#00abf3;
    }
    .dark .checkbox_true_full+a>span,.dark .checkbox_true_part+a>span,
    .dark .checkbox_true_full_focus+a>span,.dark .checkbox_true_part_focus+a>span{
        color:#fff !important;
    }
    .ztree li a.curSelectedNode {
        padding-top: 0px;
        background-color: #00abf3;
        color: #fff;
        border: 1px #00abf3 solid;
        height: 18px;
        text-decoration: none;
    }
    .checkbox_true_full+a>span,.light .checkbox_true_part+a>span,
    .checkbox_true_full_focus+a>span,.light .checkbox_true_part_focus+a>span{
        color:#00abf3;
    }
    /*修改文件夹与文件的图标*/
    /*  .ztree li span.button.ico_open, .ztree li span.button.ico_close{
        background: url(images/tree_file.png) 0 0 no-repeat;
    }
    .split-tip-cont .ztree li span.button.ico_docu{
        background: url(images/tree_folder.png) 0 0 no-repeat;
    } */
    
    .ztree li a.curSelectedNode span{ color:#fff !important;}
    
    .glyphicon{top:0!important}

    图标的修改,因为ztree有自己的图标,所以如果要改图标,最简单的方法就是将原始的图片改掉(可以用ps进行修改了)

    路径在 ztree插件下面有一个 ztreeStyle的文件夹   ztree/zTreeStyle/img/zTreeStandard.png

    原文件

  • 相关阅读:
    什么是方法以及evall()和isnan()和number()string()的使用
    js的本质/数据类型
    if条件的种类
    js中期知识点总结11月7日
    js中期知识点总结11月6日
    js中期知识点总结11月5日
    js中期知识点总结11月2日
    js中期总结11月1日
    js中期知识点总结10月31日
    html前期js知识点10月25日
  • 原文地址:https://www.cnblogs.com/pengfei25/p/9229084.html
Copyright © 2011-2022 走看看