Question

我正在使用jQuery Cupertino主题，并希望使用该主题中的图标作为TableSorter插件。

TableSorter规范说它有一些属性可以确定背景颜色和用于标题单元格的图标，具体取决于排序状态。例如，cssAsc属性的默认值为headerSortUp，它有一个示例来设置headerSortUp类的图标和背景颜色，如下所示：

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

我的问题如下：

我需要为headerSortUp类设置背景图片网址，但是当我查看Cupertino主题附带的图片时，所有图标都在一个PNG文件中，我不知道如何单独访问每一个。如何单独访问此文件中的图标？
我知道在jQuery中设置图标的唯一方法是在单元格中添加一个类。我不认为这种方法对我来说效果不错，因为TableSorter以特定的方式工作，就像我上面说的那样，我想我需要设置一些单元格的背景图像，所以这个类可以添加，由TableSorter插件删除。我应该如何配置TableSorter cssAsc属性，以便我可以添加Cupertino主题中的图标？

非常感谢

Answer 1

我最近在github上添加了一个TableSorter插件的分支，其中列出了所有缺少的选项和更多示例。我不确定您是否只想在标题中添加图标或更改排序方向箭头。如果要添加图标，请使用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;
}

jQuery Tablesorter - 问题添加图标

1 个答案: