码迷,mamicode.com
首页 > 其他好文 > 详细

修改easyui panel 默认样式

时间:2014-05-07 12:37:28      阅读:371      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   tar   

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

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

经过摸索有两种办法:

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

e.g

bubuko.com,布布扣
.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);
}
bubuko.com,布布扣
 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;
    }
bubuko.com,布布扣
bubuko.com,布布扣


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

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

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

 


 

 

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

 

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

属性:headerCls string 对面版头部引用一个CSS类。

修改easyui panel 默认样式,布布扣,bubuko.com

修改easyui panel 默认样式

标签:style   blog   class   code   java   tar   

原文地址:http://www.cnblogs.com/langhua/p/3712876.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!