나는 글꼴 최고 아이콘을 사용하고 싶습니다 : 대신 기본적으로 물리적 이미지의있는 jqGrid 호출기 지역에서있는 jqGrid 호출기 지역 - 글꼴 최고 아이콘을 사용하여이
<i class="icon-edit"></i>
합니다.
.navButtonAdd('#vw_ComplaintSearchGridPager', { caption: '', buttonicon: 'ui-icon-disk', title: 'Save Grid Settings', onClickButton: function() { $(this).SaveGridSetting(); } })
누구든지 이것을 달성하는 방법을 알고 있습니까?
그것은 매우 흥미로운 질문입니다! 이전에 Font Awesome icons을 사용한 적이 없지만 매우 흥미로운 프로젝트처럼 보입니다.
jqGrid는 현재 Font Awesome 아이콘을 직접 지원하지 않지만, 표준 jQuery UI 탐색기 아이콘을 Font Awesome의 해당 아이콘으로 대체하는 방법을 보여주는 the simple demo을 준비했습니다.
페이지를 확대 한 후에 원래 탐색기 아이콘과의 차이점을 대부분 알 수 있습니다.
가jQuery를 UI를 사용하여 원래 네비게이터
폰트 편집 아이콘 네비게이터 아이콘 : I 줌 400 %로 표시 네비게이터 이하 포함
코드하는 나는 아주 간단하다. 대신 사용의
$grid.jqGrid("navGrid", "#pager", {view: true});
나는 내가이 최고 아이콘 폰트 더 jQuery를 UI 아이콘을 대체 가능하다고 생각하지만, 그것은 매우 간단하지
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; }
는 CSS를 추가
$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");
사용 . 나는이 문제에 대해 더 많이 생각하고 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 : 최소화 아이콘을 변경하는 코드는 조금 복잡해 보입니다.
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; }
을 추가 : 하나는 첫번째 아이콘을 클릭 처음
$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");
아이콘을 변경 한 다음 모든 후 변경해야 아이콘 코드를 사용했습니다.
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 아이콘의 많은 전체 교체를 찾을 수 년을 아이콘.
업데이트 4 : The answer은 Font Awesome 버전 4.x에 대한 해결책을 제공합니다.
위의 올레그 (Oleg)의 답변을 보면, 나는 단순화하기 위해 다음을 수행했습니다. 추가 CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span.fntawsm { margin: 0 5px; font-size: 12px; padding-left:2px;padding-right:2px;}
** 패딩 왼쪽 : 2 픽셀, 패딩 오른쪽 : 2 픽셀; 선택 사항입니다 그리고 이것은 단지
caption:"", // important for above
title:"Give any",
buttonicon:"fntawsm icon-remove"
buttonicon:"fntawsm icon-eject icon-rotate-90"
등처럼 navButtonAdd에 fontawesome 아이콘을 추가하기 시작 후 ...없이 단지 캡션 아이콘
그리고 작동 ... 당신은 fontawesome에서 모든 추가 기능을 사용할 수 있습니다 icon-rotate-XX 너무 좋아. 이번에는 UI 아이콘 클래스를 스팬에서 제거해야했습니다.
피겨 나는 관심있는 사람들을 위해 CSS 대체 답변을 넣을 것입니다. 우리 개발자 중 한 명은 기능적으로 작동하는 JS 옵션을 구현했으나 올바르게 렌더링되기까지는 지연이있었습니다 (이상적이지는 않았습니다).
우리는 페이징 옵션에 글꼴 멋진 아이콘을 사용했으며, 여기에 우리가 구현 한 방법이 있습니다.
이있는 jqGrid 우리는 사용자 정의 할 수 원하는 페이징 아이콘에 사용 된 네 개의 클래스를 발견하고 그런 다음 단순히 글꼴에서 content을 잡는 문제입니다 기본 글꼴을 적용 멋진 스타일
.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;
}
다음 CSS를 생성 - 가족 아이콘과 자신의 것으로 사용.
.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없이 @afreeland 응답에서 영감을 지연 
그래서 깨끗해 :) 고마워. – nmdias
없이 우리의 그리드에 출력처럼 보이는, 내가 CSS를 사용할 수 생성 on your github을 사용하면 아이콘을 Font-Awesome 아이콘으로 변환 할 수 있습니다.
@Oleg가 설명한 jquery 메서드에 비해 성능면에서 이점이 중요합니다. 그것은 또한 내 의견으로는 매우 우아한 해결책이다. 당신은 그것을 사용하실 수 있습니다
: https://github.com/guylando/ToAF
참고 : 그 태그에 CSS 함량을 복사하여 예를 달성 할 수 있도록 당신은 다른 아이콘 스타일을 통해 스타일이 ToAF.css 파일에 대한 우선 순위를 부여해야한다 귀하의 문서.
놀라운 대답, 많은 감사합니다! –
@PaulBrown : 안녕하세요. Trirand에게 [기능 요청] (http://www.trirand.com/blog/?page_id=393/feature-request/support-of-font-awesome-icons-in-jqgrid/#p27916)을 게시했습니다. – Oleg
@PaulBrown : ** UPDATED 3 ** 부분에서 jQuery UI 아이콘을 Font Awesome 아이콘으로 완전히 대체했습니다. – Oleg