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

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

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

<script language="JavaScript" src="js/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="js/jq.alphanum.js" type="text/javascript"></script>

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

<input type="text" id="btime_1" size="2" class="num_only str">

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

<script language="javascript">
$(document).ready(function(){
$('.num_only').numeric();
});
</script>

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

No related posts.

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

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

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

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

<script src="js/jquery.js" language="JavaScript" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" language="JavaScript" type="text/javascript"></script>
<script src="js/jquery.date_input.js" language="JavaScript" type="text/javascript"></script>
<script src="js/jquery.date_input.ru_RU.js" language="JavaScript" type="text/javascript"></script>

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

<script language="javascript">
$(document).ready(function() {
    $(".date_input").date_input(); //одной строкой инициализировали все необходимые поля
  }
);
</script>

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

No related posts.

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-графиков.

4. Timepedia Chronoscope

Chronoscope – cредство для визуализации событий на временной оси, разрабатываемое Timepedia. Распространяется как бесплатно, так и на коммерческой основе с дополнительной техподдержкой покупателей. Сверхзадача разработчиков – создать интерфейс, подобный по функционалу сервису Google Maps, но не для гео-данных а для событий, распределенный по времени. Разработка находится в процессе, поэтому, например, в IE графики еще не отображаются корректно.

5. Timeplot

Еще один DHTML/AJAX скрипт, позволяющий визуализировать события, распределенные по времени. Шикарный набор функций, возможность оснащения графиков всплывающими подсказками и пошаговое руководство к действию на сайте авторов – все включено. Функционал виден на скриншоте ниже.

6. Javascript Diagram Builder

Свободно распространяемый скрипт, позволяющий рисовать разнообразные графики при помощи примитивов. Незаменим для тех, кому требуется публиковать графики математических зависимостей. В отличие от многих перечисленных в этом обзоре скриптов, работает в старых браузерах (IE4+, Opera5+). Кроме клиентского скрипта, предлагается php-скрипт, позволяющий строить графики, отдавая их посетителю как сформированное изображение.

7. Emprise JavaScript Charts

Коммерческое решение (формально имеется бесплатная версия, но она с водяным знаком и слабо функциональна). Роскошный функционал и все возможные опции по взаимодействию с пользователем – масштабирование, подсказки, обновление при помощи AJAX. Декларируется полная поддержка следующих браузеров:

Windows

• Internet Explorer 7
• Internet Explorer 6
• Firefox 1.5+
• Mozilla 5+
• Netscape 9+
• Opera 9+

Macintosh

• iPhone 1.0
• Safari 2+
• Camino 1.0.4
• Firefox 1.5+

Стоимость – от $100 до $1000.

8. Ajax MGraph

Легкий плагин для prototype, позволяющий легко и ненапряжно построить весьма изящную столбчатую диаграмму (по-моему, они называются гистограммами; если неправ – поправьте в комментариях =)) Имеется возможность выводить значение конкретной категории и снабжать график статистической информацией и текстовым примечанием (html работает).

9. CSS Vertical Bar Graphs

CSS-гистограмма от Эрика Майера. Крайне изящное css-решение, основанное исключительно на позиционировании элементов списков. Настоятельно рекомендуется к подробнейшему изучению как образец работы с CSS.

10. Apples to Oranges: CSS for Bar Graphs

Еще одно CSS-решение для построения разнообразных гистограмм.

11. Dynamic Pie Chart with CSS

Круговая диаграмма – любой внешний вид, любой размер, любой цвет. Сначала, правда, ее придется нарисовать =)) Чистый CSS, причем очень элегантно исполнено. Внимательно посмотрите на скриншот, чтобы понять как оно работает.

12. Real World Bar Graphics with some CSS

Теперь – CSS-гистограммы из Камбоджи. Берем html-таблицу (с данными, да!), рисуем столбик, перемешиваем это все с CSS – и – вуаля! Результат на скриншоте. На мой взгляд, квинтэссенция всего обзора: визуализация табличных данных прямо в таблице. =)

13. SAC Simple Accessible Charts

Жосские CSS-трюки от горячих немецких парней. На этот (очередной) раз – с html-списками.

<ul class="chart"><li>Ants<span style="background-position: center -35">: </span><strong>35%</strong></li><li>Bisons<span style="background-position: center -40">: </span><strong>40%</strong></li>

<li>Crocodile<span style="background-position: center -87">: </span><strong>87%</strong></li>

<li>Dingo<span style="background-position: center -45">: </span><strong>45%</strong></li>

<li>Emu<span style="background-position: center -23">: </span><strong>23%</strong></li>

</ul>

14. Vertical Bar Graphs with CSS and PHP

Это – опять CSS. И опять списки. Забавно выглядит и весьма функционально. В отличие от рассмотренных CSS-решений, позволяет накладывать несколько графиков, что делает скрипт значительно более приближенным к реальным задачам, чем несколько предыдущих.

15. An accessible bar chart

И снова – здравствуйте =) Сначала рисуем столбцы, потом запихиваем их в таблицу, прокачанную CSS. Получаем весьма симпатичную горизонтальную гистограмму, предложенную авторами сайта про стандарты-шмандарты.

16. Stu Nicholls definition list bar chart

Stu Nicholls играет в CSS. Надо заметить, игры весьма изящные – вот такой xhtml:

<dl><dt>Browser usage (%) - July 2005</dt>

<dd class="p670"><b>IE.6 = 67% </b></dd>

<dd class="p67"><b>IE.5 = 6.7% </b></dd>

<dd class="p12"><b>Opera = 1.2% </b></dd>

<dd class="p197"><b>Firefox = 19.7% </b></dd>

<dd class="p26"><b>Mozilla = 2.6% </b></dd>

<dd class="p08"><b>NN7 = 0.8% </b></dd>

</dl>

позволяет получить вот такой график:

За CSS позволю себе отправить дотошного читателя на сайт Stu Nicholls =)

Вот, пожалуй и все на сегодня. И на эту неделю – тоже =) Прошу комментировать активнее – иначе возникает ощущение, что моя писанина никому нафиг не нужна =) Да, не забывайте подписываться на RSS.

No related posts.

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

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

5. Mootable sorting
Еще одна надстройка к mootools — умеет сортировать, подсвечивать и передавать по клику номер выбранной строки. Имеется псевдо-консоль с отладочной информацией – cтранно, что при этом нет поддержки firebug.

6. Elite zebra tables
Зебро-таблички с возможностью множественного выбора, разумеется сортировки и подсветки на перекат. Имеется поддержка функциональности html-форм.

7. Prototype TableKit
TableKit — коллекция табличных примочек, построенная на Prototype. Имеется сортировка (куда уж без нее? ), обрезка длинных рядов, изменение размера ячеек и редактирование ячеек, построенное при помощи AJAX.

8. Таблицы и Ruby On Rails -статья “How to paginate, sort and search a table with Ajax and Rails“. Вдумчивая статья о том, как сделать таблицы функциональными, применяя Rails и AJAX. Небезынтересно тем, кто активно осваивает Rails =)

9. Unobtrusive table sort
Сортировка по нескольким столбцам, автоматическое определение типа данных в столбце, обширные возможности по доработке надфилем: интерфейс для плагинов и собственные callback-функции на before-sort и after-sort.

10. Yahoo! UI Datatables
Чертова гора возможностей — пусть вас не пугает страшненький внешний вид =)) Сортировка, редактирование данных, постраничная разбивка таблиц, подсветка и пользовательские скины — перечислено только самое насущное.

11. Standartista
Очень простой в применении сортировщик, оттестированный, как утверждает автор, на множестве различных броузеров. Не сильно богат наворотами, но вполне сойдет для тех, кто хотел отсортировать данные, а не построить истребитель пятого поколения =)

12. Sortable tables by WebFX

13. SortedTable
Сортировка, взаимодействие между несколькими таблицами.

14. Mootools Table Row and Column Highlighting
И снова – mootools =) На этот раз — не вполне сортировщик, но весьма забавный пример того, как можно подсвечивать ячейки с помощью mootools.

Этот пост навеян статьей “Data Grids with AJAX, DHTML and JavaScript” из блога SmashingMagazine, который осмелюсь рекомендовать к обязательному прочтению.

No related posts.