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

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

Плагіни для Firebug’a

yAnTar — Thu, 29 Jan 2009 13:05:29 +0000

За останній час зявислось дуже багато різних плагінів для Firebug’a. Вирішив зробити короткий опис для цих плагінів.

1. Firescope – показує рівень підтримки HTML-елементів у певному браузері. Сайт розробника
2. Inline Code Finder – шукає і відображає HTML-елементи з Javascript-лінками (

3. FireCookie – плагін для управління куками.Сайт розробника
4. Jiffy додає панель для відображення часу виконанная Javascript.Сайт розробника
5. Pixel Perfet – плагін для накладання макету сторінки на HTML-сторінку (корисний для верстальників). Сайт розробника
6. Yslow – аналізує веб-сторінку і показує проблемні місця при завантаженні сторінки. Сайт розробника
7. Firebug Net Panel History Overlay – Додає панель історії в Firebug. Сайт розробника
8. Rainbow for Firebug – Плагін для підсвітки синтаксису Javascript. Сайт розробника (Якщо використовуєте Firebug 1.2)
FireRainbow – для версії 1.3. Сайт розробника
9.Firebug Paint Events – показує деталі для MozAfterPaint подій. Сайт розробника
10. FirebugCodeCoverage – показує додаткову інформацію про Javascript-файли (список викликаних функцій, час завантаження файлу і ін.)
11. FirePHP – плагін для інтеграції PHP з відладчиком Firebug’a. Сайт розробника
12. Firesymfony – плагін для відладки для популярного PHP-фреймворка Symfony.Сайт розробника
13. Drupal For Firebug – для виводу відладочної інформації з Друпала.Сайт розробника
14. FirePython – для виводу відладочної інформації з Pythona.Сайт розробника
15. UIMap – генерує і перевіряє Xpath-шляхи, генерує xml з елементів таблиці і ін.
16. LogDigger – плагін для Java разработчиков. Дозволяє переглядати інформацію, згенеровану веб-додатками на стороні клієнта. Сайт розробника
17. FireSpider – шукає на сторінці биті лінки, а також допомагає оптимізувати під СЕО сторінку. Сайт розробника
18. SenSEO – плагін, який показує, наскільки сторінка відповідає певним SEO-критеріям (h1, alt і ін.). Сайт розробника
19. ZK Jet – плагін для розробки Ajax-додатків без встановлення сервера. Сайт розробника
20. QuickFill – плагін, який дозволяє легко виділяти текст на сторінці і вставляти його в сайдбар для подальшої обробки.
21. XRefresh. Сайт розробника

P.S Моя замітка на хабрі

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