Question

我使用信息here在IE9中使用以下代码在JqGrid顶级工具栏中添加自定义按钮。

出现Caret图标而不是图像。 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;  
}

如何添加自定义图标？

Answer 1

jQuery样式将始终覆盖您最后应用的样式。

除了jjay225指出您修改引用的内容之外，我们还会将!important标记添加到您的图片样式中，以确保始终应用该标记。

在下面的演示中试用，删除!important，然后获得^，再次添加即可获得图片。

请参阅DEMO

没有完整的代码我只是使用jQuery append()在工具栏中添加了一个图标，并添加了所需的CSS。

使用任何调试工具，例如：FF中的FireBug以及Chrome或IE中的内置调试工具，您可以检查新图标的确切类/ ID值并修复您可能遇到的任何CSS参考问题。

Answer 2

你的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;  
  }

如何将自定义图标添加到JqGrid顶级工具栏按钮？

2 个答案: