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) – позиціонує елемент на сторінці
leftOffset – задає зсув по горизонталі

topOffset – задає зсув по вертикалі

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

Плагін тестував в FF 3.0, IE6.0+, Safari 3.1, Opera 9.6

Приклад можна глянути тут

jQuery Plugin positioning