Jquery ui 如何使jqgrid顶部工具栏自定义按钮比标准按钮更大

基于问题的样式用于使jqgrid顶级工具栏按钮更大：

.ui-jqgrid .ui-jqgrid-toppager {  height:35px !important; }
.ui-jqgrid .ui-pg-button  { height:30px !important; width:30px !important;}
.ui-jqgrid .ui-jqgrid-toppager .ui-icon { position:relative; margin: 0px 10px;}

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {
    margin: 0 10px !important;
}

/* some settings to place Button in jqGrid */
.ui-jqgrid .ui-pg-table .my-nav-checkbox
{
    margin: 0px;
    padding: 0px;
    float: left;
    height: 18px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > input
{
    padding: 1px;
}

.ui-jqgrid .ui-pg-table .my-nav-checkbox > label
{
    margin: 0px;
    border-width: 0px;
}

.ui-jqgrid .ui-pg-table .my-nav-checkbox:hover > label
{
    margin: 0px;
    border-width: 1px;
}

/* fixing CSS of jQuery UI Buttons */
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-text
{
    margin: 0px;
    padding: 1px 2px 1px 16px;
}
.ui-button-icon-only
{
    width: 16px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-icon-primary
{
    margin: -8px 0px 0px -8px;
}

jqgrid工具栏还包含基于Oleg答案的自定义可检查按钮，定义如下：

 var autoedit = false;
 $("#grid_toppager_left table.navtable tbody tr").append(
        '<td class="ui-pg-button ui-corner-all">' +
            '<div class="ui-pg-div my-nav-checkbox">' +
            '<input tabindex="-1" type="checkbox" id="AutoEdit" ' + (autoedit ? 'checked ' : '')+'/>' +
            '<label title="Press to toggle"' +
            ' for="AutoEdit">Press to toggle</label></div></td>'
    );
    $("#AutoEdit").button({
        text: false,
        icons: {primary: "ui-icon-star"}
    }).click(function () {                      
      autoedit = !autoedit;

    });

var autoedit=false；
$（“#grid_toppager_left table.navtable tbody tr”）。追加(
'' +
'' +
'' +
“按以切换”
);
$（“#自动编辑”）。按钮({
文本：false，
图标：{primary:“ui图标星形”}
})。单击（函数（）{
自动编辑=！自动编辑；
});

工具栏中的此自定义按钮（星形图标）出现在错误位置：太右，与“下一步”按钮一起出现：

此外，宽度小于标准按钮，顶部对齐过大：

---

如何使自定义按钮类似于标准按钮？

如果您需要使用与标准按钮一样大的工具栏图标，我建议您在导航器工具栏中使用，而不是使用标准的jQuery UI图标。我在书中描述过

例如，如果我在旧的演示中只设置了以下CSS

.ui-jqgrid.ui-jqgrid-toppager{高度：30px！重要；}
.ui jqgrid.ui jqgrid toppager.ui pg div>span{margin:0 5px；字体大小：20px；}

我可以使用顶部工具栏中的20px图标。将显示以下结果

---

因为来自的所有图标都像矢量字体一样实现，所以对于任何字体大小（图标大小）都可以获得完美的结果。需要将所有其他自定义解决方案（如可检查按钮）发布到Font Awest，但经过一些投资后，您可能会获得非常好的最终结果。

谢谢。从jqgrid中删除工具栏、在html中创建工具栏并使用单击事件处理程序向jqgrid发送命令不是更简单吗？或者使用回答中的javascript修改jqgrid按钮更好吗。用户工具栏中有两个切换按钮，用于切换单击编辑和jqgrid行编号。将技术放在工具栏外还是从工具栏打开菜单更好？还是使用字体Awecome实现切换按钮更好，如何实现？右键单击菜单是使用您的答案从工具栏自动生成的，相同的代码是否适用于很棒的工具栏？@Andrus:对不起，您问的问题太多了。选择最多的是口味问题。我不能解决你所有的问题。您的主要问题是标题：“如何使jqgrid顶部工具栏自定义按钮像标准按钮一样更大”。我认为通过使用像Font Awesome这样的可缩放图标，您可以归档最佳结果。谢谢。在stackoverflow中使用纯文本按钮是否合理？如何创建只包含文本的更大按钮？@Andrus:不客气！你所有的问题都与你原来的问题相去甚远。带有大文本的“纯文本”按钮的解决方案可能与带有图标的解决方案完全不同。您在问题中发布了带有图标的导航栏。什么是“合理的”取决于你有什么要求。所以我们不能回答“这合理吗？”，“更好吗？”，谢谢。我试图改变回复中的风格。在这种情况下，按钮显示在正确的位置，但在鼠标悬停时，按钮移动几个像素。工具栏看起来很难看，我放弃了这种方法。我不知道如何实现切换按钮使用字体真棒。Should.button（）调用替换为span元素，以使用字体创建切换按钮。