寻呼机使用的jqgrid更改图标

我需要更改jqgrid使用的寻呼机图标（>，> |）和返回（<，| <）。我想要使用的图标已经包含在jquery ui文件ui-icons_888888_256x240.png中。我该如何做到这一点？寻呼机使用的jqgrid更改图标

更新：

基于响应这里[jqGrid的寻呼机区 - 使用字体真棒图标，我已经添加下面的代码到我的网页，但图标不会改变。我正在收到寻呼机，但我认为我没有获得图标范围。我究竟做错了什么？

<script type="text/javascript"> 
var $pager = $("#" + pagerName); 

var icon = $pager.find(".ui-icon>span.ui-icon-seek-first"); 
    icon.removeClass("ui-icon-seek-first"); 
    icon.addClass("ui-icon-arrowthickstop-1-w"); 

$pager.find(".ui-icon>span.ui-icon-seek-prev") 
    .removeClass("ui-icon-seek-prev") 
    .addClass("ui-icon-arrowthick-1-w"); 

$pager.find(".ui-icon>span.ui-icon-seek-next") 
    .removeClass("ui-icon-seek-next") 
    .addClass("ui-icon-arrowthickstop-1-e"); 

$pager.find(".ui-icon>span.ui-icon-seek-end") 
    .removeClass("ui-icon-seek-end") 
    .addClass("ui-icon-arrowthick-1-e"); 

</script>

来源

2014-02-11 Michael Sobczak

无法更改默认的jqgrid图标。请参阅[themeroller]（http://www.jqueryui.com/themeroller/#icons）以更改为另一个给定的图标。 – pudaykiran

@udaykiranpulipati我不相信这是真的。看到这里：http://stackoverflow.com/questions/13862963/jqgrid-pager-area-using-font-awesome-icons?rq=1 –

什么我不知道的是，它覆盖在jqGrid的使用的按钮任何JavaScript代码需要包含在加载jqgrid的JavaScript函数中。以下是我使用的代码：

// Override default pager icons 
    $grid = $("#" + listName); 
    $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table"); 

    var icon = $pager.find(".ui-pg-button>span.ui-icon-seek-first"); 
     icon.removeClass("ui-icon ui-icon-seek-first"); 
     icon.addClass("ui-icon ui-icon-arrowthickstop-1-w"); 

    $pager.find(".ui-pg-button>span.ui-icon-seek-prev") 
     .removeClass("ui-icon ui-icon-seek-prev") 
     //.addClass("ui-icon ui-icon-arrowthick-1-w") 
     .addClass("ui-icon ui-icon-triangle-1-w") 
     ; 

    $pager.find(".ui-pg-button>span.ui-icon-seek-next") 
     .removeClass("ui-icon ui-icon-seek-next") 
     //.addClass("ui-icon ui-icon-arrowthick-1-e") 
     .addClass("ui-icon ui-icon-triangle-1-e") 
     ; 

    $pager.find(".ui-pg-button>span.ui-icon-seek-end") 
     .removeClass("ui-icon ui-icon-seek-end") 
     .addClass("ui-icon ui-icon-arrowthickstop-1-e");

来源

2014-02-13 14:13:10

编辑确定，在这种情况下：

// First page: |< 
$("#first_your-pagerID span").removeClass("ui-icon-seek-first"); 
$("#first_your-pagerID span").addClass("ui-icon-newicon"); 

// Prev page: < 
$("#prev_your-pagerID span").removeClass("ui-icon-seek-prev"); 
$("#prev_your-pagerID span").addClass("ui-icon-newicon"); 

// Last page: >| 
$("#last_your-pagerID span").removeClass("ui-icon-seek-end"); 
$("#last_your-pagerID span").addClass("ui-icon-newicon"); 

// Next page: > 
$("#next_your-pagerID span").removeClass("ui-icon-seek-next"); 
$("#next_your-pagerID span").addClass("ui-icon-newicon");

更改your-pagerID到您的寻呼机的ID。

更改ui-icon-newicon的类从UI图标文件（UI-icons_888888_256x240.png）新的图标

来源

2014-02-11 16:48:57 FastTrack

我指的是寻呼机中的前进和后退图标。我会修改我原来的帖子。 –

@MichaelSobczak我刚刚更新了我的答案 – FastTrack

我无法让你的答案按原样工作，所以我试图在本文中加入一些解决方案http://stackoverflow.com/questions/13862963/jqgrid-pager-area -using-font-awesome-icons？rq = 1我已经更新了我上面的原始问题。任何暗示我做错了什么？ –

寻呼机使用的jqgrid更改图标

回答

相关问题