javascript - 如何向 JqGrid 顶级工具栏按钮添加自定义图标？

Question

我已经使用了信息here在 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;  
} 

如何添加自定义图标？

Answer 1

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

除了 jjay225 指出的您修复引用的内容之外，还将 !important 标记添加到您的图像样式中，以确保它始终被应用。

在下面的演示中尝试一下，删除 !important，然后得到 ^，再次添加它，就得到图像。

参见DEMO

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

使用任何调试工具，即:FF 中的 FireBug 以及 Chrome 或 IE 中的内置工具，您可以检查新图标的确切类/id 值并修复您可能遇到的任何 css 引用问题。