jQuery Tablesorter - Добавяне на икона - jquery, tablesorter

Използвам темата jQuery Cupertino и искам да използвам иконите от тази тема за приставката TableSorter.

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

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

Проблемът ми е следният:

• Трябва да задам URL адрес за фона на изображениетоheaderSortUp class, но когато гледам в изображенията, които идват с купертинската тема, всички икони са в един PNG файл и не знам как да влизам всеки един поотделно. Как да получа достъп до иконите в този файл поотделно?

• Единственият начин да знам да задам икона в jQuery еда добавите класа към участък, който е в клетка. Аз не мисля, че този метод ще работи добре за мен тук, защото TableSorter работи по определен начин и както казах по-горе, мисля, че трябва да задам фоновия образ на някои от клетките, така че този клас може да бъде добавен и премахнато от приставката TableSorter. Как трябва да конфигурирам TableSorter cssAsc собственост, за да мога да добавя иконите от темата "Купертино"?

Много благодаря

Отговори:

Наскоро добавих вилица на приставката 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;
}