yAnTar блог - про подорожі, відпочинок, моє життя » Javascript http://yablog.org.ua Mon, 21 May 2012 21:45:43 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 jQuery tablesorter upd. http://yablog.org.ua/2009/02/07/jquery-tablesorter-upd/ http://yablog.org.ua/2009/02/07/jquery-tablesorter-upd/#comments Sat, 07 Feb 2009 19:08:06 +0000 yAnTar http://yablog.org.ua/?p=743 jqueryЗараз досить активно використовую 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

]]> http://yablog.org.ua/2009/02/07/jquery-tablesorter-upd/feed/ 10 Плагіни для Firebug’a http://yablog.org.ua/2009/01/29/plahiny-dlya-firebuga/ http://yablog.org.ua/2009/01/29/plahiny-dlya-firebuga/#comments Thu, 29 Jan 2009 13:05:29 +0000 yAnTar http://yablog.org.ua/?p=736 FirebugЗа останній час зявислось дуже багато різних плагінів для Firebug’a. Вирішив зробити короткий опис для цих плагінів.

1. Firescope – показує рівень підтримки HTML-елементів у певному браузері. Сайт розробника

2. Inline Code Finder – шукає і відображає HTML-елементи з Javascript-лінками (<a href = “javascript:”), вбудованими стилями (<p style = “display:none”></p>) і вбудованими подіями (<img onclick = “alert(’1′)”) . Сайт розробника

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 Моя замітка на хабрі

]]> http://yablog.org.ua/2009/01/29/plahiny-dlya-firebuga/feed/ 1 jQuery plugin positioning v1.1 http://yablog.org.ua/2009/01/24/jquery-plugin-positioning-v11/ http://yablog.org.ua/2009/01/24/jquery-plugin-positioning-v11/#comments Sat, 24 Jan 2009 17:30:59 +0000 yAnTar http://yablog.org.ua/?p=735 jquery2 місяці тому я написав плагін 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

]]> http://yablog.org.ua/2009/01/24/jquery-plugin-positioning-v11/feed/ 1 jQuery plugin positioning http://yablog.org.ua/2008/11/11/jquery-plugin-positioning/ http://yablog.org.ua/2008/11/11/jquery-plugin-positioning/#comments Tue, 11 Nov 2008 07:29:41 +0000 yAnTar http://yablog.org.ua/?p=560 jqueryПід час розробки одного проекту виникла проблема розміщення діву посередині сторінки незалежно від ширини діву.

Якщо сторінка повністю поміщається на екран – можна робити через с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

]]> http://yablog.org.ua/2008/11/11/jquery-plugin-positioning/feed/ 2