Во многих веб проектах используются friendly urls. Например, вместо id статьи в url испольуется его текстовый идентификатор (slug). Обычно slug генерируется автоматически на серверной стороне при создании статьи. Но если вы хотите иметь возможность задавать slug самостоятельно (через форму) - можете использовать мой плагин syncTranslit.

Данный плагин рассчитан на украинскую и русскую аудиторию разработчиков.
Основная задача плагина: генерация slug из кирилличного текста. Плагин позволяет синхронизировать два поля на форме, при этом одно поле является источником данных (например, название статьи), а второе (slug) - принимает траслитерированный текст.

Использование

Подключаем файл плагина, вызываем метод syncTranslit для элемента-источника, передаем параметр destination - id элемента-приемника:

$(document).ready(function(){
    $(‘#articleTitle’).syncTranslit({destination: ’slug’});
});

Возможные опции

Список доступных опций:

• destination - id элемента-приемника
• type - url (default) или raw: определяет тип транслитерации. url - для транслитерации в slug (заменяются спец. символы). raw используется для чистого преобразования (с сохранением всех спец. символов)
• caseStyle - lower (default), normal, upper: отвечает за регистр транслитерируемых данных
• urlSeparator - разделитель слов для slug (default: ‘-’)

Пример с использованием других опций: транслитерация с преобразованием в верхний регистр и с использованием нижнего подчеркивания для разделения слов:

$(document).ready(function(){
  $(‘#articleTitle2′).syncTranslit({
    destination: ’slug2′,
    caseStyle: ‘upper’,
    urlSeparator: ‘_’
  });
});

Скачать плагин syncTranslit c Google Code
Страница проекта на сайте jQuery

Жду ваших предложений и замечаний в комментах

В одном из моих проектов мне понадобился простой javascript календарь. Но из существующих jQuery плагинов, только один “почти” соответствовал мои требованиям. Решил написать свой плагин - проба пера calendarLite plugin.

Особенности calendarLite:

• календарь предназначен для постоянного отображения на странице (не так как разные date picker)
• навигация по месяцам при помощи кнопок “Вперед” и “Назад”
• гибкая настройка (возможные опции смотрите ниже)

Использование

Для того, чтобы начать пользоваться плагином, подключаем на странице jQuery и код самого плагина.

Установка формата ссылки

Можно задавать формат ссылки (для anchor), например для такого рода ссылок: http://snowcore.net/events/29-05-2009
Это можно сделать при помощи linkFormat опции

Возможные ‘linkFormat’ опции

• {%dd} - дата с предшествующим нулем
• {%d} - дата без нуля
• {%mm} - месяц с предшествующим нулем
• {%m} - месяц без нуля
• {%yy} - год (два знака)
• {%yyyy} - полный год (четыре знака)

            
            $('#cLinkFormat').calendarLite({
                linkFormat: 'http://snowcore.net/events/{%dd}-{%mm}-{%yyyy}'
            });
            
        

Задание собственной функции-обработчика (callback)

Для клика на ячейке можно задавать свои обработчики.
Callback функция принимает одно значение - выдранная дата.
onSelect опция позволяет сделать это
Дополнительная опция dateFormat дает возможность установить формат даты, которая будет передаваться callback функции.
Значение по умолчанию для dateFormat: ‘{%dd}.{%mm}.{%yyyy}’

            
            $('#cCallback').calendarLite({
                dateFormat: '{%yyyy}-{%m}-{%d}',
                onSelect: function(date) {
                    alert(date);
                    return false;
                }
            });
            
        

Настройка внешнего вида

Используя другие опции (и стили) можно настроить внешний вид календаря:

• showYear - если установлено в true, то вверху показывается год
• prevArrow иnextArrow - символы для кнопок ‘Предыдущий’ и ‘Следующий’
• months и days - имена месяцев и дней (для мультиязычности)

            
            $('#cStyle').calendarLite({
                showYear: true,
                prevArrow: '←',
                nextArrow: '→',
                months: ['January', 'February', 'March', 'April', 'May', 'June',
                         'July', 'August', 'September', 'October', 'November', 'December'],
                days: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
            });
            
        

Страница проекта на сайте plugins.jquery.com: calendarLite plugin

Скачать плагин можно здесь: calendarLite

Еще один интересный jQuery плагин: модальное окно jQuery

В приложениях которые используют jQuery framework, обработчики событий практически всегда задаются так:

$(document).ready(function(){
  // do something…
});

Т.е. все действия будут выполнятся после полной загрузки документа. Но если у нас на странице единственный компонент javascript, использование которого не требует полной загрузки страницы? В данной ситуации можно задавать обработчик как только будет загружен javascript компонент (а не весь документ). Рассмотрим на примере: у нас есть компонент “часы” - для работы которого нужен элемент div. В данном случае javascript действия можно выполнять уже после загрузки элемента div с id=”clock”, например:

$(‘#clock’).ready(function(){
  // init clock
});

Все предельно просто, но а если у нас много javascript компонентов?
С данной проблемой я столкнулся на работе: вся страница грузится с нормальной скоростью, а баннеры загружаются в последнюю очередь. При чем этот процесс занимает слишком много времени. Получается, что используя обработчик вида $(document).ready(function(){…}); javascript ожидает загрузки всех баннеров. И в это время страница, состоящая из ajax элементов, находится в неработоспособном состоянии. Но, к счастью, jQuery позволяет вызвать ready вручную (jQuery ready manual call):

Данный метод сообщает о том, что документ был загружен. Таким образом можно использовать стандартный обработчик $(document).ready(function(){…});
Проблема была решена следующим образом: в главный layout шаблон, делается javascript вставка перед закрывающимся тегом body:

<script type=“text/javascript”>
 jQuery.ready();
</script>

Решил написать свой jQuery плагин для табличного отображения данных. Раньше мне во многих проектах приходилось выполнять практически одну и ту же рутинную работу. Например, нужна таблица с возможностью редактирования без перезагрузки страницы. Для этого приходится играть со многими событиями, разными элементами, действиями и т.д. Для этих задач рационален более общий подход к задаче. Все, что нужно будет для создание ajax таблицы - это написание серверных функций сохранения/удаления, а также правильный вывод данных и … единственная строчка javascript кода, которая приводит все это в жизнь.

На данный момент плагин находится в стадии разработки. Посмотреть на черновой вариант можно по адресу: http://snowcore.net/grid/.

Я планирую реализовать в нем следующие особенности:

• пейджинг
• валидация вводимых данных
• гибкая настройка (определение собственных стилей и прочее)
• применение фильров

Если у кого есть еще какие-либо пожелания или замечания - отпишитесь в комментариях.