修改easyui panel 默認樣式

有這么個需求需要修改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類。