मैं फ़ॉन्ट बहुत बढ़िया चिह्न का उपयोग करना चाहते हैं: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 वर्तमान में फ़ॉन्ट विस्मयकारी आइकन का कोई प्रत्यक्ष समर्थन नहीं है, लेकिन मैंने the simple demo तैयार किया है जो दिखाता है कि मानक jQuery UI नेविगेटर आइकन को फ़ॉन्ट विस्मयकारी से संबंधित आइकन के साथ कैसे बदलें।
कोई पृष्ठ के ज़ूम के बाद मूल नेविगेटर आइकन में अंतर को अधिकतर देख सकता है।
jQuery UI का उपयोग मूल नाविक आइकन
फ़ॉन्ट बहुत बढ़िया प्रतीक के साथ नाविक: मैं नाविक ज़ूम 400% के साथ प्रदर्शित नीचे शामिल
कोड जो मैंने प्रयोग किया बहुत आसान है। उपयोग के बजाय
$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");
मैं सीएसएस जोड़ा
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; }
मुझे लगता है कि यह बहुत बढ़िया प्रतीक फ़ॉन्ट के लिए और अधिक jQuery यूआई माउस को बदलने के लिए संभव है, लेकिन यह बहुत ही सरल नहीं है इस्तेमाल किया । मैं इस समस्या के बारे में और सोचूंगा और jqGrid (टोनी टॉमोव) के डेवलपर से संपर्क करूँगा ताकि jqGrid को फ़ॉन्ट विस्मयकारी आइकन के लिए अधिक अनुकूल बनाया जा सके, ताकि फ़ॉन्ट फ़ॉन्ट अद्भुत आइकन पर यह बहुत आसान स्विच हो सके।
UPDATED:
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");
}
}
इसके अतिरिक्त सीएसएस
.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");
और सीएसएस
.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 यूआई प्रतीक के अधिक पूरी प्रतिस्थापन पा सकते में माउस।
अद्यतन 4: The answer फ़ॉन्ट विस्मयकारी संस्करण 4.x के लिए समाधान प्रदान करता है।
उपरोक्त ओलेग से जवाब देखकर, मैंने चीजों को सरल बनाने के लिए निम्नलिखित किया। अतिरिक्त सीएसएस
.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-सही: 2px; वैकल्पिक है और यह केवल केवल कोई शीर्षक के साथ माउस के साथ काम करता ...
और फिर बस
caption:"", // important for above
title:"Give any",
buttonicon:"fntawsm icon-remove"
buttonicon:"fntawsm icon-eject icon-rotate-90"
आदि जैसे navButtonAdd में FontAwesome प्रतीक जोड़ना शुरू .. आप fontawesome से सभी अतिरिक्त कार्यक्षमता का उपयोग कर सकते हैं आइकन-रोटेट-एक्सएक्स की तरह भी। इस तरह मुझे स्पैन से यूई-आइकन क्लास को हटाना नहीं था।
अनुमान लगाया गया है कि मैं रुचि रखने वालों के लिए एक सीएसएस वैकल्पिक उत्तर डालूंगा। हमारे डेवलपर्स में से एक ने एक जेएस विकल्प लागू किया, जो कार्यात्मक रूप से काम करता था, हालांकि, इसे सही ढंग से प्रस्तुत करने से पहले देरी हुई थी (आदर्श नहीं)।
हमने अपने पेजिंग विकल्पों के लिए फ़ॉन्ट-कमाल आइकन का उपयोग किया, और यहां हमने इसे कार्यान्वित किया है।
मिले चार वर्गों कि jqGrid पेजिंग प्रतीक हम अनुकूलित करने के लिए वांछित के लिए उपयोग कर रहा था और निम्नलिखित सीएसएस बनाया आधार फ़ॉन्ट लागू भयानक शैलियों
.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";
}
तो पूरे सीएसएस एक साथ इस
.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";
}
और जे एस के बिना और देरी 
तो साफ :) धन्यवाद। – nmdias
@afreeland जवाब से प्रेरित होकर बिना हमारे ग्रिड पर उत्पादन की तरह लग रहा है, मैं एक सीएसएस उपलब्ध बनाया github पर जो आपको अपने आइकनों को फ़ॉन्ट-विस्मयकारी आइकन में बदलने की अनुमति देता है।
मेरी राय में @Oleg वर्णित jquery विधि पर इसका प्रदर्शन लाभ महत्वपूर्ण है। यह मेरी राय में एक बहुत ही सुरुचिपूर्ण समाधान है।
आप इसे उपयोग कर सकते हैं: https://github.com/guylando/ToAF
नोट: यदि आप अपने अन्य प्रतीक शैलियों से अधिक शैलियों इस ToAF.css फ़ाइल के लिए प्राथमिकता देने चाहिए ताकि में एक टैग में सीएसएस सामग्री को कॉपी करके उदाहरण के लिए प्राप्त किया जा सकता आपका दस्तावेज़
भयानक उत्तर, बहुत से धन्यवाद! –
@ पॉलब्राउन: आपका स्वागत है! मैंने [फीचर अनुरोध] पोस्ट किया है (http://www.trirand.com/blog/?page_id=393/feature-request/support-of-font-awesome-icons-in-jqgrid/#p27916) trirand करने के लिए। – Oleg
@ पॉलब्राउन: ** में अपडेट किए गए 3 ** मेरे उत्तर का हिस्सा मैंने फ़ॉन्ट विस्मयकारी आइकन पर jQuery UI आइकन का अधिक पूर्ण प्रतिस्थापन जोड़ा। – Oleg