यह बहुत दिलचस्प सवाल है! मैंने कभी भी 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 के लिए समाधान प्रदान करता है।
भयानक उत्तर, बहुत से धन्यवाद! –
@ पॉलब्राउन: आपका स्वागत है! मैंने [फीचर अनुरोध] पोस्ट किया है (http://www.trirand.com/blog/?page_id=393/feature-request/support-of-font-awesome-icons-in-jqgrid/#p27916) trirand करने के लिए। – Oleg
@ पॉलब्राउन: ** में अपडेट किए गए 3 ** मेरे उत्तर का हिस्सा मैंने फ़ॉन्ट विस्मयकारी आइकन पर jQuery UI आइकन का अधिक पूर्ण प्रतिस्थापन जोड़ा। – Oleg