如何将自定义图标添加到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顶级工具栏按钮？

回答

相关问题