yAnTar блог - про моє життя » jquery

jQuery tablesorter upd.

yAnTar — Sat, 07 Feb 2009 19:08:06 +0000

Зараз досить активно використовую Javascript-бібліотеку jQuery. Під неї написано досить багато різних плагінів, зокрема такий чудовий плагін tablesorter – він дозволяє робити сортування таблиці засобами javascript. Демо можна глянути тут. Поставив плагін, все добре, але клієнтові захотілося, щоб стрілочки в хідерах таблиці були не по правому краю вирівняні, а зразу після тексту. Але стрілочки у плагіні виводятся у бекграунді td і вирівнюються background-position:right. А мені треба, щоб стрілочки були зразу після тексту у хідері таблиці. Спочатку працювало на такому варіанті: background-position: 40px, але з часом збільшувалась кількість стовпчиків, які потрібно сортувати і природно, що різні слова мають різну довжину і потрібно різний відступ ставити.
Вирішив зробити по-іншому, стрілку запихати в span, і вже цьому спану міняти клас (тобто вигляд стрілки), а не td. Далі реалізація.
Як виявилось пізніше потрібно внести тільки 4 маленькі зміни у код плагіна, після чого код можна використовувати, як у старому режимі вирівнювання, так і у новому.
1. Додаємо властивість leftAlign у настройки компонента. (При ініціалізації задаємо потрібне значення параметра).
2. При генеруванні таблиці додаємо генерування спанів у тдшках
if (table.config.leftAlign) $(this).append(jQuery(”").addClass(”sortImage”));
3. Вилучаємо з наших спанів всі css-класи, які були задані
if (table.config.leftAlign){
$headers.find(”span”).removeClass(css[0]).removeClass(css[1]);
} else {
$headers.removeClass(css[0]).removeClass(css[1]);
}
4. Додаємо до “наших” спанів потрібний клас
if (table.config.leftAlign){
h[list[i][0]].find(”span”).addClass(css[list[i][1]]);
} else {
h[list[i][0]].addClass(css[list[i][1]]);
}

Також потрібно зробити деякі зміни в CSS-файлі:
вилучаємо в table.tablesorter thead tr .header такі значення
background-image: url(../images/bg.gif);
background-repeat: no-repeat;
background-position: right center;
і додаємо
.sortImage{
background-image: url(../images/bg.gif);
background-repeat: no-repeat;
background-position: left center;
width:14px;
height:12px;
vertical-align: middle;
margin-left:2px;
display:inline-block;
}
Тільки один нюанс – якщо міняємо режим на alignLeft або навпаки, то потрібно робити ці зміни у CSS-файлі.

Приклад з вирівнюванням по правому краю – тут, вирівнювання по тексту – тут
. Також тут можна скачати обновлений файл jquery.tablesorter.js

P.S. Щоб знайти в коді, все що було змінено пошукаєте по слову Taras

jQuery plugin positioning v1.1

yAnTar — Sat, 24 Jan 2009 17:30:59 +0000

2 місяці тому я написав плагін jQuery positioning. В процесі роботи виникли завдання і таким чином плагін прийшлось дописувати. Представляю оновлену версію плагіна.
Відмінності від попередньої версії:
- можна задавати зсув не тільки в пікселях, але і в процентах;
- в методі centering можна задавати центрування тільки по горизонталі, тільки по вертикалі або по обидвох параметрах.
Плагін (як і в попередній версії) має 2 методи
positioning(leftOffset, topOffset, scroll) – позиціонує елемент на сторінці

leftOffset – задає зсув по горизонталі
topOffset – задає зсув по вертикалі
scroll – позиціонувати елемент відносно “абсолютного” лівої верхньої точки сторінки, чи позиціонувати елемент відносно верхньої лівої точки уже проскроленої сторінки

Метод centering(horisontalAlign, verticalAlign) – позиціонує елемент по центру сторінки.
Плагін тестував в FF 3.0, IE6.0+, Safari 3.1, Opera 9.6
Приклад можна глянути тут
jQuery Plugin positioning

jQuery plugin positioning

yAnTar — Tue, 11 Nov 2008 07:29:41 +0000

Під час розробки одного проекту виникла проблема розміщення діву посередині сторінки незалежно від ширини діву.
Якщо сторінка повністю поміщається на екран – можна робити через сss (position:absolute; left i top).
Якщо ж сторінка займає більше місця – зявляється скролл і проблеми – потрібно робити по-іншому.
Так як останнім часом активно використовую Javascript-фреймворк jQuery – вирішив оформити код у вигляді плагіна. Так з’явився плагін positioning.
Плагін має 2 методи:

positioning(leftOffset, topOffset, scroll) – позиціонує елемент на сторінці

Метод centering() – позиціонує елемент точно по центру сторінки.
Плагін тестував в FF 3.0, IE6.0+, Safari 3.1, Opera 9.6
Приклад можна глянути тут
jQuery Plugin positioning