jqGrid Pager Diện tích - Sử dụng Font Icons tạo ảnh vui nhộn

Question

Tôi muốn sử dụng phông chữ biểu tượng đáng kinh sợ:

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

trong khu vực pager jqGrid thay vì những hình ảnh vật lý theo mặc định.

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

Có ai biết cách đạt được điều này không?

Answer 1

Đó là câu hỏi rất thú vị! Tôi chưa bao giờ sử dụng Font Awesome icons trước đây, nhưng có vẻ như dự án rất thú vị.

jqGrid hiện không hỗ trợ trực tiếp các biểu tượng Phông chữ tuyệt vời, nhưng tôi đã chuẩn bị the simple demo cho thấy cách thay thế biểu tượng điều hướng giao diện người dùng chuẩn của jQuery bằng các biểu tượng tương ứng từ Phông chữ tuyệt vời.

Người ta có thể thấy hầu như rõ ràng sự khác biệt với các biểu tượng điều hướng ban đầu sau khi phóng to trang. Tôi bao gồm dưới navigator hiển thị với zoom 400%:

Các navigator nguyên bản sử dụng jQuery UI các biểu tượng

Các navigator với Font biểu tượng đáng kinh sợ:

mã mà Tôi đã sử dụng rất đơn giản. Thay vì sử dụng

$grid.jqGrid("navGrid", "#pager", {view: true}); 

tôi đã sử dụng

$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"); 

tôi thêm CSS

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; } 

Tôi nghĩ rằng nó có thể thay thế nhiều hơn các biểu tượng jQuery UI Font biểu tượng Awesome, nhưng nó không phải là rất đơn giản . Tôi sẽ suy nghĩ về vấn đề này và sẽ liên hệ với nhà phát triển của jqGrid (Tony Tomov) để xem xét để làm cho jqGrid thân thiện hơn với các biểu tượng Font Awesome, để có thể chuyển đổi rất đơn giản thành các biểu tượng Font Awesome.

CẬP NHẬT: Tôi thêm vào đoạn code đó cho phép đầu thay thế hơn các biểu tượng từ các máy nhắn tin:

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"); 

Theo kết quả một lấy máy nhắn tin sau:

thay vì

CẬP NHẬT 2: Mã để thay đổi biểu tượng thu nhỏ trông hơi hoàn chỉnh.Người đầu tiên phải thay đổi biểu tượng ban đầu

$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"); 

và sau đó thay đổi nó sau mỗi lần nhấp vào biểu tượng:

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

Bên cạnh đó một cần phải thêm CSS

.ui-jqgrid .ui-jqgrid-titlebar-close>span { margin: 0 3px; font-size: 16px; } 
.ui-jqgrid .ui-jqgrid-titlebar-close { text-decoration: none; } 

Để khắc phục việc phân loại biểu tượng Tôi đã sử dụng mã

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"); 

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

Kết quả là ai sẽ nhận được như sau:

CẬP NHẬT 3: Trong the next demo người ta có thể tìm thêm sự thay thế đầy đủ của jQuery UI biểu tượng Font tạo ảnh vui nhộn biểu tượng.

CẬP NHẬT 4: The answer cung cấp giải pháp cho Font Awesome phiên bản 4.x.

Answer 2

Bằng cách xem câu trả lời từ Oleg ở trên, tôi đã làm như sau để đơn giản hóa mọi thứ. CSS bổ sung

.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-phải: 2px; là không bắt buộc Và điều này chỉ hoạt động với các biểu tượng duy nhất không có phụ đề ...

Và sau đó chỉ cần bắt đầu thêm các biểu tượng fontawesome trong navButtonAdd như

caption:"", // important for above 
title:"Give any", 
buttonicon:"fntawsm icon-remove" 
buttonicon:"fntawsm icon-eject icon-rotate-90" 

vv .. Bạn có thể sử dụng tất cả chức năng thêm từ fontawesome cũng giống như icon-rotate-XX. Con đường này tôi không phải loại bỏ lớp biểu tượng ui khỏi các nhịp.

Answer 3

Tôi đã đặt câu trả lời thay thế CSS cho những người quan tâm. Một trong những nhà phát triển của chúng tôi đã triển khai tùy chọn JS, đã hoạt động có chức năng, tuy nhiên, đã có sự chậm trễ trước khi kết xuất chính xác (không phải lý tưởng).

Chúng tôi đã sử dụng các biểu tượng phông chữ tuyệt vời cho các tùy chọn phân trang của chúng tôi và dưới đây là cách chúng tôi triển khai nó.

Tìm thấy bốn lớp jqGrid được sử dụng cho các biểu tượng phân trang, chúng tôi mong muốn để tùy chỉnh và tạo css sau đây để áp dụng phông chữ cơ sở tuyệt vời phong cách

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

} 

Sau đó, nó chỉ đơn giản là một vấn đề của grabbing content từ phông chữ biểu tượng gia đình và sử dụng chúng như của riêng bạn.

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

Vì vậy, toàn bộ CSS cùng nhau trông như thế này

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

Và đầu ra trên lưới điện của chúng tôi mà không JS và không chậm trễ

Answer 4

Lấy cảm hứng từ câu trả lời @afreeland, tôi đã tạo ra một css có sẵn trên github cho phép bạn chuyển đổi các biểu tượng của mình thành các biểu tượng Font-Awesome.

Lợi thế hiệu suất của điều này theo phương pháp jquery mà @Oleg mô tả là quan trọng trong quan điểm của tôi. Nó cũng là một giải pháp rất tao nhã theo ý kiến ​​của tôi.

Bạn được chào đón để sử dụng nó: https://github.com/guylando/ToAF

Lưu ý: bạn phải dành ưu tiên cho tập tin ToAF.css này phong cách qua phong cách biểu tượng khác của bạn để có thể đạt được ví dụ bằng cách sao chép nội dung css vào một thẻ trong tài liệu của bạn.