Cyrill

Маленький плагинчик к jQuery, позволяющий оградить пользователей от ввода букв в цифровые поля, цифр в буквенные и всякой излишней гадости в цифро-буквенные =)

Разумеется, как и любая проверка на клиенте, этот скрипт имеет лишь превентивное действие. Если вы опасаетесь попыток взлома (а вы их опасаетесь, я уверен), обязательно проверяйте данные и на сервере.

Скрипт доработан напильником и понимает по-русски. Использовать его очень просто:

1. Добавьте в ваш код jQuery (если еще не добавили =)) и модифицированный alphanumeric:

2. Обозначьте поля ввода, которые требуется отслеживать классами. Например, alpha_only, alphanum и num_only:

3. Включите плагин для обозначенных полей (в моем случае, в обозначенное поле можно ввести только цифры):

Скачайте обрусевший скрипт тут. За дополнительной документацией и примерами — проходите на сайт разработчика плагина.

Перевел плагин date_input для JQuery на русский. Там три строчки, я знаю =) Тем не менее, пользуйтесь на здоровье.

Date_input – плагин для того, чтобы из унылых полей ввода даты (”введите 01-02-2005 и не пропустите ни одного дефиса”) делать вот такие конструкции:

Очень легкий скриптик, при этом – изначально очень симпатичный =))

Чтобы воспользоваться плагином, выполните ряд несложных действий:

1. Добавьте в ваш javascript JQuery, JQuery.dimension , собственно, date_input и, наконец, мой файлик с локализацией:

2. Автор плагина рекомендует присваивать всем элементам ввода единый класс – так и вправду удобнее инициализировать плагин. Я делаю это по готовности страницы:

Все, красивое и удобное поле ввода даты готово к работе.

В предыдущей записи я начал обзор средств построения графиков для веб. Там речь шла о разнообразных flash-компонентах, позволяющих визуализировать ваши данные. Пришло время продолжить – сегодня вашему вниманию 16 средств для построения графиков при помощи CSS/AJAX/Javascript. Никаких серверных скриптов и никакого flash – только javscript, CSS и динамический HTML. Этот обзор дополняет предыдущий, завершая тем самым мини-цикл, посвященный построению client-side графиков и диаграмм.

1. PlotKit - Javascript Chart Plotting

PlotKit – свободно распространяемый скрипт, основанный на Mochikit и предназначенный для отрисовки разнообразных диаграмм. Существует два режима работы:

• при помощи html-объекта canvas с поддержкой браузеров Safari 2+, Opera 9+, Firefox 1.5+ и IE 6 в режиме эмуляции canvas
• SVG (в Opera 9+, Firefox 1.5+ с ограничениями и IE6 с поддержкой Adobe SVG)

2. Plotr

Легкий (12Кб) свободно распространяемый скрипт, основанный на предыдущем – PlotKit. Не требует наличи MochiKit, ради чего, собственно, и задумывался (правда, добавился Prototype :-)). В отличие от PlotKit, использует только html canvas. Декларируется работа в следующих браузерах: Firefox 1.5+, Safari 2.0+, Opera 9.0+ и IE6+ в режиме эмуляции html canvas.

3. Flot

Свободно распространяемый плагин для jQuery, предназначенный для построения графиков из различных наборов данных на лету на стороне клиента. Фишка – в простоте использования (все настройки являются опциональными), привлекательном внешнем виде и интерактивных примочках, типа увеличения на лету. Несмотря на простоту в использовании, Flot достаточно продвинут для работы в сложных Web2.0 приложениях.

Плагин должен работать на всех свежих браузерах, отрисовка производится при помощи тега canvas везде, кроме IE. Там используется javascript-эмуляция – excanvas.

Под катом - еще 13 javascript-графиков.
Читать полностью »

Таблицы — пример отличной информационной структуры, представляющей данные в наглядном виде. При использовании по назначению — для организации данных, а не для верстки, таблицы — наиболее компактный и в то же время удобный инструмент, что, в принципе, и требуется. =)

Если вы работаете в веб-разработке (дизайне, юзабилити или смежных областях), вам, вероятно, хочется добавить удобства вашим табличнеым данным — сортировка, отбор данных по заданным критериям и даже редактирование — все это возможно. Но как? Ниже — обзор нескольких решений, позволяющих прокачать ваши таблицы до предела. Стоит оговориться - все это происходит на стороне клиента, поэтому следует озаботиться наличием у ваших посетителей современных браузеров.

1. Tablesorter
Плагин для JQuery, позволяющий легко добавить сортировку (по нескольким столбцам!) к таблицам. Достаточно легкий, поддерживает пакеты стилей (скины), имеет интерфейс для написания и подключения виджетов, одним из которых является поставляемая в комплекте зебра. Имеется автоматическое определение типа данных в столбце - впрочем, не всегда корректно работающее — мне пришлось писать собственный сортировщик для дат в формате дд-мм-гггг, что, впрочем, нисколько не умаляет достоинств этого скриптика.
A favorite of mine =)

2. ExtJs Grid
Поддержка схлопывающихся строк, вписывания в площадь, выбора строк стандартными чекбоксами и горизонтальной прокрутки. Можно навешивать свои панели инструментов.

3. dhtmlxGrid
Постраничное разбиение больших таблиц, отбор данных, итоговые поля, поддержка drag’n'drop, сериализация и импорт данных в/из xml и csv, поддержка скинов либо пользовательских css.

4. Phatfusion sortable
Сортировка таблиц с возможностью отбора данных. Требует наличия mootools > 1.11

Под катом — еще деcять разновидностей воплощения динамической таблицы с применением DHTML/Javascript/AJAX. А местами —даже Ruby On Rails Читать полностью »