0

ここの情報を使用して、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;  
}

カスタムアイコンを追加するには?

4

2 に答える 2

3

jQuery スタイルは、最後に適用されたスタイルを常に上書きします。

参照を修正したjjay225指摘に加えて、!importantタグを画像スタイルに追加して、常に適用されるようにします。

以下のデモで試してみて!importantください^。

デモを見る

完全なコードがなくても、jQuery を使用してツールバーにアイコンをappend()追加し、必要な CSS を追加しただけです。

ただし、FF の FireBug や Chrome または IE のビルトイン ツールなどのデバッグ ツールを使用すると、新しいアイコンの正確なクラス/ID 値を確認し、CSS 参照の問題を修正できます。

于 2012-08-13T11:25:35.670 に答える
1

あなたのCSS

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

する必要があります

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

クラスを持ってみませんか

.my-image
{
    background-image: url("Images/calendar.png"); 
     width: 16; 
     height: 16;  
  }
于 2012-08-13T11:59:04.003 に答える