我想使用Font Awesome图标:
<i class="icon-edit"></i>
在jqGrid寻呼机区域而不是默认的物理图像。
.navButtonAdd('#vw_ComplaintSearchGridPager', { caption: '', buttonicon: 'ui-icon-disk', title: 'Save Grid Settings', onClickButton: function () { $(this).SaveGridSetting(); } })
有谁知道如何实现这个目标?
答案 0 :(得分:16)
这是一个非常有趣的问题!我之前从未使用Font Awesome icons,但这似乎是非常有趣的项目。
jqGrid目前没有Font Awesome图标的直接支持,但我准备了the simple demo,它展示了如何用Font Awesome中相应的图标替换标准的jQuery UI导航器图标。
在缩放页面后,人们可以看到大部分与原始导航器图标的区别。我在缩放400%显示的导航器下面包含:
使用jQuery UI图标的原始导航器
带有Font Awesome图标的导航器:
我使用的代码非常简单。而不是使用
$grid.jqGrid("navGrid", "#pager", {view: true});
我用过
$grid.jqGrid("navGrid", "#pager", {editicon: "icon-pencil",
addicon: "icon-plus", delicon: "icon-trash", searchicon: "icon-search",
refreshicon: "icon-refresh", viewicon: "icon-file",view: true});
$("#pager .navtable .ui-pg-div>span").removeClass("ui-icon");
我添加了CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; }
我认为可以将更多jQuery UI图标替换为Font Awesome图标,但这并不是很简单。我会更多地考虑这个问题,并会联系jqGrid(Tony Tomov)的开发人员,考虑让jqGrid对Font Awesome图标更加友好,这样就可以非常简单地切换到Font Awesome图标。
更新:我添加了代码,允许顶部替换来自寻呼机的更多图标:
var $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table");
$pager.find(".ui-pg-button>span.ui-icon-seek-first")
.removeClass("ui-icon ui-icon-seek-first")
.addClass("icon-step-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-prev")
.removeClass("ui-icon ui-icon-seek-prev")
.addClass("icon-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-next")
.removeClass("ui-icon ui-icon-seek-next")
.addClass("icon-forward");
$pager.find(".ui-pg-button>span.ui-icon-seek-end")
.removeClass("ui-icon ui-icon-seek-end")
.addClass("icon-step-forward");
结果得到以下寻呼机:
而不是
更新2 :更改最小化图标的代码看起来有点完善。首先应该首先更改图标
$grid.closest(".ui-jqgrid")
.find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>.ui-icon-circle-triangle-n")
.removeClass("ui-icon ui-icon-circle-triangle-n")
.addClass("icon-circle-arrow-down");
然后在每次点击图标后更改它:
onHeaderClick: function (gridstate) {
if (gridstate === "visible") {
$(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
.removeClass("icon-circle-arrow-up ui-icon-circle-triangle-n")
.addClass("icon-circle-arrow-down");
} else if (gridstate === "hidden") {
$(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
.removeClass("icon-circle-arrow-down ui-icon-circle-triangle-s")
.addClass("icon-circle-arrow-up");
}
}
另外需要添加CSS
.ui-jqgrid .ui-jqgrid-titlebar-close>span { margin: 0 3px; font-size: 16px; }
.ui-jqgrid .ui-jqgrid-titlebar-close { text-decoration: none; }
要修复排序图标,我使用了代码
var $sortables = $grid.closest(".ui-jqgrid")
.find(".ui-jqgrid-htable .ui-jqgrid-labels .ui-jqgrid-sortable span.s-ico");
$sortables.find(">span.ui-icon-triangle-1-s")
.removeClass("ui-icon ui-icon-triangle-1-s")
.addClass("icon-sort-down");
$sortables.find(">span.ui-icon-triangle-1-n")
.removeClass("ui-icon ui-icon-triangle-1-n")
.addClass("icon-sort-up");
和CSS
.ui-jqgrid .ui-icon-asc { height: auto; margin-top: 0; }
.ui-jqgrid .ui-icon-asc, .ui-jqgrid .ui-icon-desc {
height: auto; margin-top: 0; margin-left: 5px;
}
.ui-jqgrid .s-ico>.ui-state-disabled, .s-ico>.ui-state-disabled { padding: 0; }
结果会得到以下结果:
更新3 :在the next demo中,可以找到更多完全替换jQuery UI图标到Font Awesome图标。
更新4 :The answer为Font Awesome版本4.x提供解决方案。
答案 1 :(得分:2)
想想我会为感兴趣的人提供一个CSS替代答案。我们的一个开发人员实现了一个JS选项,它在功能上起作用,但是在它正确呈现之前有一个延迟(不理想)。
我们的分页选项使用了字体很棒的图标,以下是我们实现它的方式。
找到了jqGrid用于我们想要自定义的分页图标的四个类,并创建了以下css来应用基本字体真棒样式
.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
然后,只需从font-family图标中抓取content
并将其用作您自己的图标。
.ui-icon-seek-next:before
{
content: "\f105";
}
.ui-icon-seek-prev:before
{
content: "\f104";
}
.ui-icon-seek-end:before
{
content: "\f101";
}
.ui-icon-seek-first:before
{
content: "\f100";
}
所以整个CSS一起看起来像这样
.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.ui-icon-seek-next:before
{
content: "\f105";
}
.ui-icon-seek-prev:before
{
content: "\f104";
}
.ui-icon-seek-end:before
{
content: "\f101";
}
.ui-icon-seek-first:before
{
content: "\f100";
}
我们网格上的输出没有JS而没有延迟
答案 2 :(得分:1)
通过查看上面Oleg的回答,我做了以下几点来简化事情。 其他CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span.fntawsm { margin: 0 5px; font-size: 12px; padding-left:2px;padding-right:2px;}
** padding-left:2px; padding-right:2px;是可选的 这仅适用于没有标题的图标......
然后开始在navButtonAdd中添加fontawesome图标,如
caption:"", // important for above
title:"Give any",
buttonicon:"fntawsm icon-remove"
buttonicon:"fntawsm icon-eject icon-rotate-90"
等。您可以使用font-rotate-XX等font-awesome的所有额外功能。 这样我就不必从跨度中移除ui-icon类。
答案 3 :(得分:-1)
受@afreeland回答的启发,我在github上创建了一个css,它允许你将你的图标转换为Font-Awesome图标。
在我看来,@ Oleg描述的jquery方法的性能优势很重要。 在我看来,这也是一个非常优雅的解决方案。
欢迎您使用它:https://github.com/guylando/ToAF
注意:您必须优先考虑此ToAF.css文件样式优先于其他图标样式,以便通过将css内容复制到文档中的标记中来实现。