В одном из моих проектов мне понадобился простой 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/.

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

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

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

В последние пару лет jQuery стал очень популярным. Этот javascript framework легко изучается,
производительность и большой спектр его возможностей очень радуют.
Селекторы jQuery позволяют производить выборку элементов по разным критериям. Селекторы являются одной из главных частей фреймворка, поэтому необходимо уметь грамотно ими пользоваться. Учиться лучше всего на примерах. Поэтому я хочу поделиться с Вами информацией о методах работы с конткретными HTML элементами при помощи jQuery.

Первая заметка - о работе с HTML элементом <select>

Работа с выпадающим списком в jQuery

Основными дейсвиями, которые производятся над выпадающим списком является получение выбранного значения, добавление/удаление элементов из списка, изменение их атрибутов.

Рассмотрим эти действия по порядку. Например, у нас есть select с id=”sel”:

<select id=“sel” name=“sel”>
<option value=“0″>zero</option>
<option value=“1″>one</option>
<option value=“2″>two</option>
<option value=“3″>three</option>
</select>

1. Получение значения выбранного элемента

   $(‘#sel option:selected’).val()
   

2. Получить текст выбранного элемента

   $(‘#sel option:selected’).html();
   

3. Добавить элемент в конец списка

   $(‘#sel’).append( $(‘<option value=”4″>four</option>’) );
   

4. Добавить элемент в начало списка

   $(‘#sel’).prepend( $(‘<option value=”-1″>minus</option>’) );
   

5. Вставить элемент после заданного элемента (после второго)

   $(‘#sel option:nth-child(2)’).after($(‘<option value=”7″>inserted</option>’));
   

6. Удалить элемент (выбранный)

   $(‘#sel option:selected’).remove();
   

7. Очистить select

   $(‘#sel’).empty();
   

8. Сделать элемент выбранным (последний)

   $(‘#sel option:last’).attr(’selected’, ’selected’);
   

9. Сделать элемент недоступным (первый)

   $(‘#sel option:nth-child(3)’).attr(‘disabled’, ‘disabled’);
   

10. И немного экзотики :) Изменить цвет текста всех элементов, кроме выбранного

    $(‘#sel :not(option:selected)’).css(‘color’, ‘red’);
    

Как видите, ничего сложного здесь нет. В седующих постах будет рассмотрена информация
о работе с другими HTML элементами на jQuery.