Что такое Low Pro?
Так что же такое Low Pro? Это плагин, который позволяет сделать JavaScript более объектно-ориентированным через делегацию событий. Архитектура jQuery плагинов позволяет в простой форме расширить функционал ядра.Ранее не существовало легкого пути в создании макроса, который создал бы несколько типов событий на один элемент. Но это время пришло!
Наверное, самый простой способ объяснить, как работает Low Pro – это создать быструю демонстрацию. Иногда я нахожу, что многие туторы предполагают наличие предыдущего знакомства с технологией, зная это, я постараюсь сделать тутор максимально простым. Тем не менее, этот пример использует несколько других плагинов, которые не рассматриваются в данном туторе:
- Live Query – Low Pro использует данный плагин для облегчения связи с динамическими элементами DOM.
- jQuery Validation – Мы будем использовать этот плагин для того, чтобы показать как связывать другие функции плагинов с событиями.
У обеих плагинов отличная документация, следовательно, если вы желаете расширить базовый пример, почитайте её.
Пример №1: Создание повторно используемой регистрационной формы.
Для этого примеры мы создадим простую регистрационную форму. Несмотря на простой вид, её можно использовать во многих местах с небольшими, если требуется, модификациями. Надеюсь, разобрав этот шаблон, вы увидите много других приложений, которые могут быть повторно используемыми в таком же стиле.
Наш первый шаг – создать простенькую форму:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
«www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=«Content-Type» content=«text/html; charset=iso-8859-1» />
<title>Lowpro Example</title>
<script type=«text/javascript» src=«js/jquery.js» />
<script type=«text/javascript» src=«js/jquery.livequery.js» />
<script type=«text/javascript» src=«js/lowpro.jquery.js» />
<script type=«text/javascript» src=«js/jquery.validate.js» />
<script type=«text/javascript» src=«js/reg-form.js» />
</head>
<body></p>
<div id=«form-container»>
<form method=«post» action="." id=«lowpro-form»>
<fieldset>
<legend>User Details</legend></p>
<ul>
<li>
<label for=«username»>Username</label></p>
<input type=«text» id=«username» name=«username» />
</li>
<li>
<label for=«email»>Email</label></p>
<input type=«text» id=«email» name=«email» />
</li>
<li>
<label for=«password1»>Password</label></p>
<input type=«password» id=«password1» name=«password1» />
</li>
<li>
<label for=«username»>Password (Again)</label></p>
<input type=«password» id=«password2» name=«password2» />
</li>
</ul>
<input type=«submit» class=«register» value=«Register» />
</fieldset>
</form>
</p></div>
<p> </body>
</html>
Теперь мы создадим наш JavaScript, назовем его reg-form.js. В нем мы создадим класс, который прикрепим к форме. Внутри этого класса, мы создадим функции, которые инициируют события. Каждый класс созданный с использованием Low Pro принимает форму $.klass({...});. Внутри фигурных скобок, мы используем природу прототипов JavaScript для создания псевдо-классов. Мы назовем наш пример RegisterForm
RegisterForm = $.klass({
initialize : function(options) {</p>
<p> }
});
Если вы разрабатывали, используя PHP, Python или Java, вы, наверное, уже видели подобное. Эта первая функция, initialize, зарезервированная функция в Low Pro, которая принимает один параметр(обсудим его позже). Данная функция всегда вызывается при связывании класса с элементом. Так как она не требует никакой инициации события, очень удобно устанавливать данные для инициализации или события для динамических DOM элементов.
Валидация
Первое, что мы должны сделать – это создать наши JavaScript правила проверки. Этот тутор не покрывает создание этих правил, тем не менее, они должны быть понятны. Если вы желаете больше информации, почитайте прекрасную документацию.
RegisterForm = $.klass({
initialize : function(options) {
this.element.validate({
rules: {
username: {
required: true,
minlength: 4
},
email : {
required: true,
email: true
},
password2 : {
equalTo: "#password1"
}
},
messages : {
username : {
required: 'Your username is required',
minlength: 'The minimum number of characters is 4'
},
email : {
required: 'You must enter your email',
email: 'You must enter a valid email'
},
password2 : {
equalTo: 'Your passwords must match'
}
}
});
}
});
Заметьте, что я использую this.element в отличии от $(‘#lowpro-form’) внутри функции. Low Pro предоставляет этот удобный псевдоним и вы всегда работаете с верным объектом. Если вы собираетесь написать сложную функцию, лучше всего в пределах функции, присвоить this.element другой переменной.
Сейчас код ничего не делает. Все потому, что мы должны привязать класс к форме. Вот где мы должны вернутся к старому доброму jQuery, который мы знаем и любим. Ниже этого класса поместите в файл:
$(document).ready(function(){
$('#lowpro-form').attach(RegisterForm);
});
И так, открываем страницу в браузере и начинаем заполнять поля. Вы уже должны заметить, работу правил проверки полей. Поздравляю, вы только что написали свой первый повторно используемый класс с Low Pro!
Улучшения
Теперь, когда мы имеем правила проверок, давайте начнем делать форму более привлекательной. Для начала, что-нибудь простое. Давайте убедимся, что первое поле(username) всегда активно первым и пользователь может легко переключаться, используя Tab.
$('#username').focus();
Обновите страницу и сейчас ваше поле username должно получить фокус.
Давайте добавим немного перца – другое событие. Когда пользователь сабмитит форму, мы хотим, чтобы пользователь знал, что данные отправляются на сервер. Для этого мы уведомим пользователя, изменяя текст на кнопки с “Register” на “Submiting”.
RegisterForm = $.klass({
initialize : function(options) {
…
},
onsubmit : function() {
$form = this.element;
$('.register').val('Submitting');
/* If your using Ajax it goes in here */
return false;
}
});
Итак у нас есть: Повторно используемая, полнофункциональная Ajax регистрационная форма с валидацией. Вы можете посмотреть на демо.
И напоследок, параметры функции инициализации. Во время подключения Low Pro класса, функция инициализации принимает объект, содержащий любые данные, которые нужно передать функции.
$('#myform').attach(MyFunction, {foo:'moo', bar:2}
В нашем примере выше, мы добавили тэг для показа сообщения дня. В HTML создайте div с классом motd. Далее, добавьте следующий код в функцию инициализации:
if (options.motd) {
$('.motd').text(options.motd);
}
Сейчас, когда мы прикрепили наш класс к форме, мы используем следующее:
$(document).ready(function(){
$('#lowpro-form').attach(RegisterForm, {motd: 'jQuery Rocks!'});
});
Теперь, когда вы обновите форму, вы должны увидеть сообщение на экране.
