jQuery Tablesorter - 問題添加圖標

Question

我使用jQuery Cupertino主題，並希望使用TableSorter插件的主題圖標。

TableSorter規範說，它具有一些屬性，可以根據排序狀態確定背景顏色和標題單元格使用的圖標。例如，cssAsc屬性具有headerSortUp一個默認值，它有一個例子來設置headerSortUp類的圖標和背景顏色如下：

th.headerSortUp { 
    background-image: url(../img/small_asc.gif); 
    background-color: #3399FF; 
} 

我的問題如下：

• 我需要爲headerSortUp類設置一個背景圖片url，但是當我查看Cupertino主題附帶的圖片時，所有圖標都在一個PNG文件中，我不知道如何訪問每個圖片個別。如何單獨訪問此文件中的圖標？

• 我知道在jQuery中設置圖標的唯一方法是將一個類添加到單元格中的跨度。我認爲這種方法對我來說不會有效，因爲TableSorter以特定的方式工作，就像我上面所說的那樣，我認爲我需要設置一些單元格的背景圖像，所以這個類可以添加並且由TableSorter插件刪除。我應該如何配置TableSorter cssAsc屬性，以便我可以添加來自Cupertino主題的圖標？

非常感謝

Answer 1

我最近添加的tablesorter插件的叉GitHub上所有的丟失選項和更多示例的列表。我不確定您是否只想在標題中添加圖標或更改排序方向箭頭。如果您想添加圖標，請使用onRenderHeader函數將您想要的任何內容添加到標題。這是一個example。

如果您想更改排序方向箭頭，請繼續閱讀！我不確定要添加哪個箭頭圖標，但是我只是使用粗箭頭圖標將這個小部件放置在tablesorter（我將盡快添加示例頁面到文檔）。如果您想使用不同的圖標集，請查看this page上的圖標，並將鼠標懸停在圖標上，然後在下面的窗口小部件代碼中修改icons變量，以將圖標選擇。圖標順序是向上/向下箭頭，向下箭頭和向上箭頭。

這裏是a demo和代碼：

$(function() { 

    // add ui theme widget 
    $.tablesorter.addWidget({ 
    id: "uitheme", 
    format: function(table) { 
     var c = table.config, 

     // *** Modify the theme icons here *** 
     // ["up/down arrow (cssHeaders, unsorted)", "down arrow (cssDesc, descending)", "up arrow (cssAsc, ascending)" ] 
     icons = ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"], 

     klass, rmv = icons.join(' '); 
     if (!$(c.headerList[0]).is('.ui-theme')) { 
     $(table).addClass('ui-widget ui-widget-content ui-corner-all'); 
     $.each(c.headerList, function(){ 
      $(this) 
      // using new "ui-theme" class in case the user adds their own ui-icon using onRenderHeader 
      .addClass('ui-state-default ui-corner-all ui-theme') 
      .append('<span class="ui-icon ui-theme"/>'); 
     }); 
     } 
     $.each(c.headerList, function(){ 
     klass = ($(this).is('.' + c.cssAsc)) ? icons[1] : ($(this).is('.' + c.cssDesc)) ? icons[2] : icons[0]; 
     $(this).find('span.ui-theme').removeClass(rmv).addClass(klass); 
     }); 
    } 
    }); 

    // call the tablesorter plugin and apply the ui theme widget 
    $("table").tablesorter({ 
    widgets : ['uitheme'] 
    }); 
}); 

您還需要改爲使用這個CSS藍色/綠色主題

/* jQuery UI Theme */ 
table.tablesorter { 
    font-family: arial; 
    margin: 10px 0pt 15px; 
    font-size: 8pt; 
    width: 100%; 
    text-align: left; 
} 
table.tablesorter thead tr th, table.tablesorter tfoot tr th { 
    border-collapse: collapse; 
    font-size: 8pt; 
    padding: 4px; 
} 
table.tablesorter thead tr .header { 
    background-repeat: no-repeat; 
    background-position: center right; 
    cursor: pointer; 
} 
table.tablesorter tbody td { 
    padding: 4px; 
    vertical-align: top; 
} 
table.tablesorter .header .ui-theme { 
    display: block; 
    float: right; 
}