从使用字体真棒图标的免费 jqgrid 工具栏按钮中删除 Chrome 中的跳舞效果

Question

我试过演示

http://www.ok-soft-gmbh.com/jqGrid/FortAwesome/FontAwesome2.htm

来自回答

How to make jqgrid top toolbar custom buttons bigger like standard buttons

在 Chrome 中，浏览器缩放级别小于 100%。

将鼠标悬停在工具栏按钮上会导致工具栏振动难看。

它 100% 缩放它不会发生但它发生在每个小于 100% 的缩放级别它不会出现在缩放级别 >=100% 中，也不会出现在 Intrnet Explorer

中

它出现在顶部和底部工具栏中。

如何解决这个问题？

在我的应用程序中，文本位于按钮下方，字体大小为 16。我试着替换

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div>span { margin: 0 5px; font-size: 20px; }

和

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div > span {
    margin: 1px 4px;
    font-size: 16px;
}

在这种情况下，舞蹈稍微小一点，但仍然会发生。如何解决这个问题？

如果使用 jquery ui 图标，则不会出现问题。如何解决这个问题，让FontAwesome图标也能正常使用？

更新

我在答案中添加了样式（来自 http://www.ok-soft-gmbh.com/jqGrid/OK/FontAwesome4Large-borderlessOnHover3.htm ) to last demo from answer ，但寻呼机按钮和按下的切换按钮仍然会跳动。

同时按下禁用的按钮会在它们上面绘制边框。如何解决这个问题？

测试用例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
    <meta name="author" content="Oleg Kiriljuk">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css">
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.css">
    <style>
        html, body { font-size: 75%; }
        .ui-datepicker select.ui-datepicker-year,
        .ui-datepicker select.ui-datepicker-month {
            color: black
        }
        .ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active { margin: 1px; font-weight: normal; }






.ui-jqgrid > .ui-jqgrid-pager .navtable,
.ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-toppager .navtable {
    font-size: 16px;
}

.ui-jqgrid .ui-pg-table {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .ui-pg-table .ui-pg-button:hover, .ui-jqgrid .ui-pg-table.navtable .ui-pg-button.ui-state-active {
        font-weight: normal;
        border: 0 none;
        background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
    }

.ui-pg-table .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 3px;
}

.ui-jqgrid .ui-pg-table.navtable .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}

.ui-jqgrid .jqgrow .ui-jqgrid-actions > .ui-pg-div:hover {
    margin: 0 1px;
    border: 0 none;
    background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}




    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
    <script>
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <!--<script src="../jqGrid/js/jquery.jqGrid.src.js"></script>-->
    <script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>
    <script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.js"></script>
    <script>
    //<![CDATA[
    /*global $ */
    /*jslint browser: true */
    $(function () {
        "use strict";
        var mydata = [
                { id: "10",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "", tax: "", closed: true,  ship_via: "TN", total: "" },
                { id: "20",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "30",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "40",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "50",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "60",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "70",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "80",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "90",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                { id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
                { id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                { id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
            ],
            $grid = $("#grid"),
            initDateEdit = function (elem) {
                $(elem).datepicker({
                    dateFormat: "dd-M-yy",
                    autoSize: true,
                    changeYear: true,
                    changeMonth: true,
                    showButtonPanel: true,
                    showWeek: true
                });
            },
            initDateSearch = function (elem) {
                setTimeout(function () {
                    initDateEdit(elem);
                }, 100);
            };

        $grid.jqGrid({
            data: mydata,
            colNames: ["", "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
            colModel: [
                { name: "act", template: "actions" },
                { name: "name", align: "center", width: 92, editrules: {required: true} },
                { name: "invdate", width: 72, align: "center", sorttype: "date", frozen: true,
                    formatter: "date", formatoptions: { newformat: "d-M-Y", reformatAfterEdit: true }, datefmt: "d-M-Y",
                    editoptions: { dataInit: initDateEdit },
                    searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
                { name: "amount", width: 56, template: "number", hidden: true },
                { name: "tax", width: 35, template: "number", autoResizableMinColSize: 40, hidden: true },
                { name: "total", width: 43, template: "number", hidden: true },
                { name: "closed", width: 49, template: "booleanCheckboxFa" },
                { name: "ship_via", width: 76, align: "center", formatter: "select",
                    edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
                    stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
                { name: "note", width: 43, edittype: "textarea", sortable: false }
            ],
            cmTemplate: { editable: true, autoResizable: true },
            iconSet: "fontAwesome",
            rowNum: 10,
            autoResizing: { compact: true },
            rowList: [5, 10, 20, "10000:All"],
            //pagerpos: "right",
            //viewrecords: true,
            //pgbuttons: false,
            //pginput: false,
            //width: 390,
            toppager: true,
            rownumbers: true,
            sortname: "invdate",
            sortorder: "desc",
            navOptions: {
                position: "center",
                addtext: "Add",
                edittext: "Edit",
                deltext: "Delete",
                searchtext: "Search",
                refreshtext: "Reload",
                viewtext: "View",
                savetext: "Save",
                canceltext: "Cancel",
                iconsOverText: true
            },
            caption: "Demonstration how to make full width navigator bar"
        }).jqGrid("navGrid", {view: true})
        .jqGrid("inlineNav")
        //.jqGrid("filterToolbar")
        .jqGrid("gridResize");

        var autoedit = true;
        $grid.jqGrid("navButtonAdd", "#grid_toppager", {
            buttonicon: "fa-star",
            caption: "Toggle",
            id: "AutoEdit",
            title: "Toggle autoedit",
            onClickButton: function (options, e) {
                var $me = $(e.currentTarget);
                $me.toggleClass("ui-state-active");
                autoedit = $me.hasClass("ui-state-active");
                $me.attr("aria-pressed", autoedit ? "true" : "false");
            }
        });
        $("#grid_toppager")
            .find(".ui-pg-button")
            .each(function (i) {
                $(this).attr({
                    tabindex: String(i),
                    role: "button"
                });
            });
        //$("#AutoEdit").attr("role", "button");
        if (autoedit) {
            $("#AutoEdit").click();
        }
        $grid.jqGrid("navButtonAdd", "#grid_toppager", {
            buttonicon: "fa-table",
            caption: "Columns",
            title: "Choose columns",
            onClickButton: function (options, e) {
                $(this).jqGrid("columnChooser");
            }
        });
        $("#grid_toppager_left").hide();
        $("#grid_toppager_right").hide();
        $("#grid_toppager_center").attr("colspan", "2");
        $("#grid_toppager_center").css({width: "", "text-align": "left", "white-space": ""});
        $("#grid_toppager_center").find(">.navtable").append(
            $("#grid_toppager_center").find(">table.ui-pg-table")
        );
        $("#grid_toppager_center").find(">.navtable").children().each(function() {
            $(this).css("float", "left");
        });
        $grid.bind("jqGridAfterGridComplete", function () {
            var p = $(this).jqGrid("getGridParam"), $toppager = $(p.toppager);
            $toppager.find(".navtable").css("width", "");
        });
    });
    //]]>
    </script>
</head>
<body>
    <div id="outerDiv" style="margin:5px;">
        <table id="grid"></table>
    </div>
</body>
</html>

Answer 1

悬停按钮 "dancing" 的原因是悬停时显示的 1px 边框缩放。请参阅 ui.jqgrid.css 中使用的 the lines of jQuery UI CSS. The scaling are implemented in very difficult way in different web browsers. So 1px of the border will be scaled not in the same way like 1px in margin or in pagging. So the lines 仅在缩放 100%、200% 等情况下消除悬停按钮的 "dancing"。

我可以建议您的唯一安全解决方案是移除悬停按钮的边框。 The demo 使用 CSS

.navtable .ui-pg-button.ui-state-hover {
    border: 0 none;
}
.ui-jqgrid .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}

悬停的按钮将如下图所示

您可以另外更改悬停按钮上使用的背景颜色，以更清晰地显示悬停效果。例如 the next demo 使用

.navtable .ui-pg-button.ui-state-hover {
    border: 0 none;
    background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}
.ui-jqgrid .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}

结果如下图

已更新：要删除寻呼机按钮和 formatter: "actions" 按钮中的 "dancing"，例如可以使用以下 CSS :

.ui-pg-table .ui-pg-button:hover {
    border: 0 none;
    background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}
.ui-pg-table .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 3px;
}
.ui-jqgrid .ui-pg-table.navtable .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}
.ui-jqgrid .jqgrow  .ui-jqgrid-actions > .ui-pg-div:hover {
    margin: 0 1px;
    border: 0 none;
    background: #b6dbf7 url("images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}

参见 the demo。

更新 2: The demo 展示了如何删除导航栏中移动的寻呼机按钮的 "dancing"。它还显示了如何删除 "dancing" 个 tree-state 个按钮。它使用 CSS 规则

.ui-pg-table .ui-pg-button:hover,
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button.ui-state-active {
    border: 0 none;
}
.ui-pg-table .ui-pg-button:hover * {
    background-color: #b6dbf7
}
.ui-pg-table .ui-pg-table.navtable .ui-pg-table .ui-pg-button:hover {
    font-weight: normal;
    padding: 0;
    margin: 3px;
}
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button:hover,
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button.ui-state-active,
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button.ui-state-active:hover {
    font-weight: normal;
    padding: 0;
    margin: 2px;
}
.ui-jqgrid .ui-pg-table.navtable > .ui-pg-button span.fa {
    margin-top: 2px;
}
.ui-jqgrid .jqgrow .ui-jqgrid-actions > .ui-pg-div:hover {
    margin: 0 1px;
    border: 0 none;
}
.jqgrow .ui-jqgrid-actions > .ui-pg-div:hover > span.fa,
.jqgrow .ui-jqgrid-actions > .ui-pg-div:hover > span.ui-icon {
    background-color: #b6dbf7;
}

从使用字体真棒图标的免费 jqgrid 工具栏按钮中删除 Chrome 中的跳舞效果

Remove dancing effect in Chrome from free jqgrid toolbar buttons in font awesome icons are used

css

google-chrome

jqgrid

font-awesome

free-jqgrid