如何將自定義圖標添加到JqGrid頂級工具欄按鈕？

我已使用info here在JqGrid頂級工具欄中使用IE9中的以下代碼添加自定義按鈕。如何將自定義圖標添加到JqGrid頂級工具欄按鈕？

插入圖標代替圖像出現。 IE9網絡選項卡顯示不會發出對Images/calendar.png的請求。

$grid.jqGrid('navButtonAdd', '#grid_toppager', { 
     caption: '', 
     id: "grid_mybutton", 

     buttonicon: 'my-image', 
     onClickButton: function() { 
      window.location = 'Report'; 
      } 
    });

css文件：

.ui-button .ui-icon.my-image { 
    background-image: url("Images/calendar.png"); 
    width: 16; 
    height: 16; 
} 

.ui-button.ui-state-hover .ui-icon.my-image { 
    background-image: url("Images/calendar.png"); 
    width: 16; 
    height: 16; 
}

如何添加自定義圖標？

來源

2012-08-13 Andrus

你說的是在頂替換的圖標X對話框的右上角，或者是否想用自己的操作將新的可點擊圖標添加到工具欄？ – Nope 2012-08-13 11:28:27

我想添加新的按鈕，圖標'圖像/ calendar.png'和自定義操作'window.location ='報告'' – Andrus 2012-08-13 11:38:42

您的css：「.ui-button.ui-state-hover .ui-icon。我的圖像「應該是」.ui-button，.ui-state-hover，.ui-icon，.my-image「更新：我在下面的回答中添加了更多的解釋 – jjay225 2012-08-13 12:00:10

jQuery樣式將總是覆蓋你的樣式，因爲它們最後被應用。

除了jjay225指出的那些，你修正了你的參考，將!important標記添加到你的圖像樣式，以確保它總是被應用。

在下面的演示中嘗試一下，刪除!important，然後您將獲得^，再次添加它並獲得您的圖像。

見DEMO

由於沒有完整的代碼，我只是簡單地添加一個圖標到工具欄使用jQuery append()並添加所需的CSS。

儘管使用了任何調試工具，例如：FF中的FireBug和Chrome或IE中的內建函數，您可以檢查新圖標的準確類/ id值並修復您可能遇到的任何css參考問題。

來源

2012-08-13 11:25:35 Nope

」！important 「Andrus非常重要。弗朗索瓦很好 – jjay225 2012-08-13 12:04:38

你的

.ui-button.ui-state-hover .ui-icon.my-image

CSS應該

.ui-button, .ui-state-hover, .ui-icon, .my-image

爲什麼不嘗試只是有類

.my-image 
{ 
    background-image: url("Images/calendar.png"); 
    width: 16; 
    height: 16; 
    }

來源

2012-08-13 11:59:04 jjay225

如何將自定義圖標添加到JqGrid頂級工具欄按鈕？

回答

相關問題