jQuery Tablesorter — проблема с добавлением значка

Я использую тему jQuery Cupertino и хочу использовать значки из этой темы для плагина TableSorter.

В спецификациях TableSorter сказано, что у него есть некоторые свойства, определяющие цвет фона и значки, используемые для ячеек заголовков, в зависимости от состояния сортировки. Например, cssAscproperty имеет значение по умолчанию headerSortUp, и в нем есть пример установки значка и цвета фона для класса headerSortUp следующим образом:

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

Моя проблема заключается в следующем:

  • Мне нужно установить URL-адрес фонового изображения для класса headerSortUp, но когда я смотрю на изображения, поставляемые с темой Купертино, все значки находятся в одном файле PNG, и я не знаю, как получить доступ к каждому из них по отдельности. Как получить доступ к значкам в этом файле по отдельности?

  • Единственный известный мне способ установить значок в jQuery — добавить класс в диапазон, который находится в ячейке. Я не думаю, что этот метод подойдет мне здесь, потому что TableSorter работает определенным образом, и, как я сказал выше, я думаю, что мне нужно установить фоновое изображение некоторых ячеек, чтобы этот класс можно было добавить и удален плагином TableSorter. Как настроить свойство TableSorter cssAsc, чтобы добавить значки из темы Купертино?

Большое спасибо


jquery tablesorter
person Joe    schedule 26.07.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Недавно я добавил форк плагина TableSorter на github со списком всех отсутствующих параметров и другими примерами. Я не уверен, хотели ли вы просто добавить значок в заголовок или изменить стрелки направления сортировки. Если вы хотите добавить значок, используйте функцию onRenderHeader, чтобы добавить любое содержимое в заголовок. Вот пример.

Если вы хотите изменить стрелки направления сортировки, продолжайте читать! Я не уверен, какие значки со стрелками вы хотите добавить, но я только что собрал этот виджет для сортировщика таблиц (скоро добавлю пример страницы в документы), используя толстые значки со стрелками. Если вы хотите использовать другой набор значков, просмотрите значки на этой странице и получите имя класса значков. наведя на него курсор... Затем вам нужно будет изменить переменную icons в коде виджета ниже, чтобы настроить таргетинг на выбранные вами значки. Порядок значков: стрелка вверх/вниз, стрелка вниз и стрелка вверх.

Вот демонстрация и код:

$(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;
}
person Mottie    schedule 26.07.2011
comment
Я просто хотел добавить, что тема выглядит лучше, если вы замените ui-state-default на ui-widget-header в javascript выше. - person Mottie; 29.07.2011