修改easyui panel 預設樣式

浪花一朵朵發表於2014-05-07
UI

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

相關文章