В этой статье я хочу поделиться с Вами некоторыми приемами усовершенствования HTML форм при помощи JavaScript. В частности, в приведенных здесь примерах используется библиотека jQuery. Речь здесь пойдет о четырех усовершенствованиях – подсказках, автозаполнении, счетчике введенных символов и скрытых полях.
Создание линейных графиков в jQuery
jQuery Sparklines – это плагин для jQuery, который способен генерировать линейные графики в браузере используя данные, указанные либо в HTML, либо в JavaScript.
Плагин совместим со следующими браузерами: Firefox 2+, Safari 3+, Opera 9 и Internet Explorer 6 & 7.
Пользоваться плагином очень просто. Достаточно вызвать одну функцию, указав при этом необходимые опции:
$(selector).sparkline(values, options);
Параметр values указывает на значения, которые нужно отображать. Они могут быть переданы использую массив, либо могут быть получены прямо из HTML – в этом случае value должно иметь значение "html":
<span class="sparklines">1,2,3,4,5,4,3,2,1</span>
<span id="ticker"">Loading..</span>
$('.sparklines').sparkline('html');
$('#ticker').sparkline([1,2,3,4,5,4,3,2,1]);
Второй параметр функции – это опции, которые влияют на цвет графика, цвет фона, тип линии, ширину и т.д.:
$('#barchart').sparkline(myvalues, { type:'bar', barColor:'green' });
Плагин распространяется под новой BSD лицензией.
jQuery Taconite Plugin
jQuery Taconite Plugin – это плагин для jQuery, который позволяет с легкостью обновлять множество элементов DOM, используя для этого один единственный AJAX запрос. Суть заключается в том, что AJAX запрос должен содержать специальные XML инструкции для обновления DOM. Рассмотрим следующий пример:
<taconite> <append select="#status"> Your order has shipped! </append> </taconite>
В этом пример показан результат, который получен от сервера через AJAX. Плагин jQuery Taconite обработает этот XML и выполнит вставку фразы “Your order has shipped!” в элемент с id=status. Как можно понять из примера, команда append добавляет содержимое в элемент с селектором, указанном в атрибуте select.
Анализ производительности для jQuery
Джон Ресиг создал новый плагин для jQuery, который позволяет анализировать производительность работы скриптов, написанных с использованием этой библиотеки. Работает он довольно просто, нужно просто подключить плагин…:
<script src="/javascripts/bundle.js"></script> <script src="http://dev.jquery.com/~john/plugins/profile/jquery-profile.js"></script>
Затем просто пользоваться сайтом, т.е. заставить поработать скрипты. Чтобы просмотреть результаты анализа производительности, нужно ввести в консоли команду jQuery.displayProfile(), результат будет примерно следующим:
Чтобы получить необработанные данные профайлера, воспользуйтесь функцией jQuery.getProfile().
Автоматизированная подгрузка изображений в jQuery
Web приложения зачастую используют множество фоновых изображений, которые не видны при загрузке страницы. Во первых, это изображения, применяемые для “ролловер” эффектов, когда элементы меняют фон при наведении указателя мыши. Во вторых, это множество всевозможных динамических элементов, создаваемых JavaScript, а также содержимое получаемое при помощи AJAX. Проблема с этими элементами состоит в том, что при отрисовке таких элементов браузер начинает загружать фоновые изображения, что требует некоторого времени, а следовательно создает неприятный эффект мерцания и фрагментирования.