修改easyui panel 默认样式

时间：2024-07-09 13:03:26

有这么个需求需要修改easyui panel头部中的背景色。于是根据panel中的最终被浏览器解析出来的类名，直接修改这个css样式，设置backgroud-color这个属性，发现不管用。

于是，就根据panel最后被解析出来的样式类名，手动的建这个类名，然后把背景色修改为白色，发现也无济于事。

经过摸索有两种办法：

1，在引入的easyui.css样式表中，添加没有背景色的样式，下面的样式必须放到easui.css中去，注意：单击建一个css文件，并把下面的代码拷过来就可以了。这个缺点是严重浪费了资源，每一种样式都要添加。

e.g

.panel-header2 {

    background: -webkit-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);

  background: -moz-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);

  background: -o-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);

  background: linear-gradient(to bottom,#EFF5FF 0,#E0ECFF 100%);

  background-repeat: repeat-x;

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF,endColorstr=#FFFFFF,GradientType=0);

}
 function createPanel(container, groupname, id) {

        var icon = 'layout-button-down';

        var p = $('<div style=\"margin:1 auto 1 auto;\"></div>').appendTo($(container)).panel({

            headerCls: 'panel-header2',//可自定义的类名保持一致

            title: groupname,

            closed: false,

            width: $(container).width(),

            iconCls: 'icon-tip',

            doSize: false,

            tools: [{

                iconCls: icon,

                handler: function () {

                    $('#g' + id).toggle("slow");

                }

            }]

        });

        return p;

    }




然后在动态生成的panel使用这个类名：


还有另外一种方法就是，直接看下面的代码吧，注意这里的类名不是paenl解析之后的panel，而是默认的panel样式，$('.panel-header')，这里是动态设置样式，通过以上两种例子，可以动态修改panel里的内容信息，样式信息。




$('.panel-header').css({ "background-color": "#FFFFFF" }).css({"filter":"progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF,endColorstr=#FFFFFF,GradientType=0)"});




easyui panel提供了自定义的样式，可以动态添加。


panel属性列表不一一列举了，只说


属性：headerCls string 对面版头部引用一个CSS类。
相关文章