9

Font Awesomeアイコンを使用したい：

<i class="icon-edit"></i>

デフォルトでは、物理イメージの代わりにjqGridページャー領域にあります。

.navButtonAdd('#vw_ComplaintSearchGridPager', { caption: '', buttonicon: 'ui-icon-disk', title: 'Save Grid Settings', onClickButton: function () { $(this).SaveGridSetting(); } })

誰かがこれを達成する方法を知っていますか？

ここに画像の説明を入力してください

4

4 に答える 4

16

とても面白い質問です！これまでFontAwesomeアイコンを使用したことはありませんが、非常に興味深いプロジェクトのようです。

jqGridは現在FontAwesomeアイコンを直接サポートしていませんが、標準のjQueryUIナビゲーターアイコンをFontAwesomeの対応するアイコンに置き換える方法を示す簡単なデモを用意しました。

ページをズームすると、元のナビゲーターアイコンとの違いがほぼ明確になります。400％ズームで表示されたナビゲーターの下に含めました：

jQueryUIアイコンを使用した元のナビゲーター

ここに画像の説明を入力してください

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; }

より多くのjQueryUIアイコンをFontAwesomeアイコンに置き換えることは可能だと思いますが、それはそれほど単純ではありません。私はこの問題についてもっと考え、jqGrid（Tony Tomov）の開発者に連絡して、jqGridをFont Awesomeアイコンにもっと親しみやすくして、FontAwesomeアイコンに非常に簡単に切り替えることができるようにすることを検討します。

更新：ページャーからより多くのアイコンをトップで置き換えることができるコードを追加しました：

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：次のデモでは、jQueryUIアイコンがFontAwesomeアイコンに完全に置き換わっています。

更新4：答えはFontAwesomeバージョン4.xのソリューションを提供します。

于 2012-12-13T17:46:57.487 に答える
2

興味のある人のためにCSSの代替回答を載せると思いました。開発者の1人がJSオプションを実装しましたが、これは機能的には機能しましたが、正しくレンダリングされるまでに遅延がありました（理想的ではありません）。

ページングオプションにはfont-awesomeアイコンを使用しましたが、これがその実装方法です。

カスタマイズしたいページングアイコンにjqGridが使用していた4つのクラスを見つけ、ベースフォントの素晴らしいスタイルを適用するために次の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;

}

次に、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なしで遅延なしのグリッド上の出力 ここに画像の説明を入力してください

于 2014-08-01T17:35:46.477 に答える
1

上記のオレグからの回答を見て、私は物事を単純化するために次のことをしました。 追加の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"

など..フォントからのすべての追加機能を使用できます-icon-rotate-XXのように素晴らしいです。このように、スパンからui-iconクラスを削除する必要はありませんでした。

于 2013-10-03T05:56:27.630 に答える
-1

@afreelandの回答に触発されて、私はgithubで利用可能なcssを作成しました。これにより、アイコンをFont-Awesomeアイコンに変換できます。

@Olegが説明したjqueryメソッドに対するこれのパフォーマンス上の利点は、私の意見では重要です。それは私の意見では非常にエレガントな解決策でもあります。

あなたはそれを使用することを歓迎します：https ：//github.com/guylando/ToAF

注：たとえば、cssコンテンツをドキュメントのタグにコピーすることで実現できるように、このToAF.cssファイルスタイルを他のアイコンスタイルよりも優先する必要があります。

于 2015-09-28T20:30:35.393 に答える