使用字体真棒图标中的免费jqgrid工具栏按钮删除Chrome中的跳舞效果 [英] Remove dancing effect in Chrome from free jqgrid toolbar buttons in font awesome icons are used
问题描述
我尝试了演示
http://www.ok-soft-gmbh.com /jqGrid/FortAwesome/FontAwesome2.htm
来自答案
在Chrome中，浏览器的缩放比例不到100％.
in Chrome in less than 100% browser zoom level.
将鼠标悬停在工具栏按钮上会导致工具栏振动不佳.
Hovering mouse over toolbar buttons cause toolbar to vibrate ugly.
它不会发生100％的骚动，但在每个缩放级别小于100％的情况下都会发生 在缩放级别> = 100％时不会发生，并且在Intrnet Explorer中不会发生
It 100% zoon it does not occur but it occurs in every zoom level less than 100% It does not occur in zoom level >=100% and it does not occu in Intrnet Explorer
它出现在顶部和底部工具栏中.
It occurs in both top and bottom toolbars.
如何解决此问题?
在我的应用程序中，文本位于按钮下方，字体大小为16. 我试图更换
In my application text is below buttons and font size is 16. I tried to replace
.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;
}
在这种情况下，跳舞会变小，但仍然会发生.如何解决这个问题?
In this case dancing is a bit smaller but still occurs. How to fix this ?
如果使用了jQuery UI图标，则会出现问题. 如何解决此问题，使FontAwesome图标也可以正常使用?
If jquery ui icons are used problem doent occur. How to fix this so that FontAwesome icons can also normally used ?
更新
我在回答中添加了样式(来自 http://www.ok-soft-gmbh.com/jqGrid/OK/FontAwesome4Large-borderlessOnHover3.htm )，最后一个演示来自答案
I added styles in answer (from http://www.ok-soft-gmbh.com/jqGrid/OK/FontAwesome4Large-borderlessOnHover3.htm ) to last demo from answer how to place pager to end of top of toolbar in free jqgrid but dancing still occurs for pager buttons and for pressed toggle button.
也可以按禁用按钮在其上绘制边框. 如何解决这个问题?
Also pressing disabled buttons draws border over them. How to fix this ?
测试用例:
<!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>https://stackoverflow.com/q/27617764/315935</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>
推荐答案
悬停按钮跳舞"的原因是悬停时显示的1px边框的缩放比例.参见线条 jQuery UI CSS.缩放在不同的Web浏览器中以非常困难的方式实现.因此，边框的1px缩放的方式将不像边距或Pagging中的1px那样.因此线条ui.jqgrid.css中使用的>仅在缩放100％，200％等情况下才消除悬停按钮的跳舞".
The reason of "dancing" of hovered buttons is the scaling of 1px border displayed on hovering. See 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 used in ui.jqgrid.css eliminates the "dancing" of hovered buttons only in case of zoom 100%, 200% and so on.
我可以建议您解决此问题的唯一安全方法是移除悬停的按钮的边框. 演示使用CSS
The only safe solution of the problem which I can suggest you is removing of the border of hovered buttons. The demo uses the 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;
}
和已悬停的按钮将如下图所示
and the hovered buttons will be displayed like on the picture below
您还可以更改悬停按钮上使用的背景颜色，以更清晰地显示悬停效果.例如，下一个演示使用
You can change additionally the background color used on hovered buttons to display hover effect more clear. For example the next demo uses
.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;
}
结果显示在下一张图片上
The results are shown on the next picture
更新:要删除寻呼机按钮和formatter: "actions"按钮中的跳舞"，可以使用以下CSS例如:
UPDATED: To remove "dancing" in pager buttons and in the buttons of the formatter: "actions" one can use the following CSS for example:
.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;
}
请参见演示.
更新2: 演示显示如何删除在导航栏中移动的寻呼机按钮的跳舞".它还显示了如何删除树状按钮的跳舞".它使用CSS规则
UPDATED 2: The demo shows how to remove "dancing" of the pager buttons which are moved in the navigation bar. It shows additionally how to remove "dancing" of tree-state buttons. It uses CSS rule
.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中的跳舞效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
