jQuery Tablesorter - значок добавления проблемы - PullRequest
Новая
       5

jQuery Tablesorter - значок добавления проблемы

1 голос
/ 26 июля 2011

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

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

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

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

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

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

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

1 Ответ

2 голосов
/ 26 июля 2011

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

Если вы хотите изменить стрелки направления сортировки, продолжайте читать! Я не уверен, какие значки со стрелками вы хотите добавить, но я просто собрал этот виджет для TableSorter (скоро добавлю страницу с примерами в документы), используя толстые значки со стрелками. Если вы хотите использовать другой набор значков, посмотрите на значки на этой странице и получите имя класса значков, наведя курсор на него ... Затем вам нужно будет изменить переменную 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;
}
...