Uchebno-metodicheskoe_posobie
.pdfРассмотрим интересные и популярные JSфреймворки и библиотеки, аналогичные JQuery.
1.AngularJS
AngularJS — JS-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений. Его цель — расширение браузерных приложений на основе MVC шаблона, а также упрощение тестирования и разработки.
Фреймворк работает с HTML, содержащим дополнительные пользовательские атрибуты, которые описываются директивами, и связывает ввод или вывод области страницы с моделью, представляющей собой обычные переменные JavaScript. Значения этих переменных задаются вручную или извлекаются из статических или динамических JSON-данных.
2. Prototype
Prototype - JavaScript Framework, который призван облегчить разработку динамических веб-приложений. Чаще всего используется программистами вместе с Ruby on Rails, Tapestry, script.aculo.us и Rico.
Данный фреймоворк поддерживается Internet Explorer 6.0+, Mozilla Firefox 1.5+,Apple Safari 2.0+, Opera 9.25+ и Google Chrome 1.0+. Соответственно, его можно использовать в 99% проектов.
3. MooTools
MooTools — это свободный JavaScript-фреймворк
для разработки кроссбраузерных веб-приложений и вебсервисов, является модульным, объектно-ориентирован- ным фреймворком, созданным для помощи разработчи-
кам JavaScript.
MooTools совместим и протестирован с браузера-
ми: Safari 2+, Internet Explorer 6+, Firefox 2+ (и другими,
основанными на движке Gecko), Opera 9+. Он очень похож в своем подходе к дизайну ядра на jQuery и Prototype
– он не включает в себя UI-контролы и виджеты, ограничиваясь минимальным набором эффектов и возможностей. Но, несмотря на такой здоровый минимализм, этот фреймворк содержит очень интересный плагин MooTools. More.js, который на самом деле несколько больше чем просто плагин: он позволяет очень сильно наращивать возможности сторонними библиотеками, и имеет при этом очень интересные дополнения для манипуляций с массивами, датами, хэшеми, строками и т.д
4. YUI
Библиотека Yahoo! UI Library (YUI) – это набор утилит и контролов, написанных на JavaScript и CSS, для создания интерактивных web-приложений, использующих техники DOM-скриптинга, DHTML иAJAX.
В этом фреймворке доступны два типа компонентов: утилиты и контролы.
Утилиты упрощают браузерную разработку, связанную с DOM, DHTML иAJAX. Контролы – это набор уже готовых, высокоинтерактивных визуальных элементов для проектирования веб-страниц. Все эти элементы
20 |
21 |
создаются и работают только на клиентской стороне и не требуют обновление страницы для их изменения. Вся библиотека распространяется под BSD-лицензией и бесплатна для всех пользователей.
5. ScriptJava
ScriptJava – это JS-фреймворк, который создан для облегчения разработки динамических веб-приложений. Поддерживает все современные браузеры.
Глава 2. Разработка модуля JQuery
2.1Правила создания модуля
Вдалеком 1971 году группа «Five Man Electric Band» выразила в своей песне протест против существовавших тогда социальных и этических норм. Тем не менее иногда без правил не обойтись. Без правил мир погрузился бы в хаос.
Это справедливо и для правил (скорее, общих принципов), обеспечивающих успешное расширение jQuery собственными модулями.
Эти правила не только помогут включить свой новый программный код в архитектуру jQuery, но и гарантируют, что он прекрасно будет работать с другими расширениями jQuery и даже с другими библиотеками
JavaScript.
Расширение для jQuery может принимать одну из двух форм:
•Вспомогательные функции, определяемые непосредственно в $ (псевдоним идентификатора jquery)
•Методы, оперирующие обернутым набором jquery (так называемые методы jquery)
Существуют ряд правил создания расширений, общие для обоих типов.
Именование функций и файлов
Согласно простым, но эффективным рекомендациям разработчиков jQuery, имя файла должно:
22 |
23 |
•Начинаться с префикса jquery
•Содержать имя модуля, идущее после пре-
фикса
• Желательно упомянуть номер версии моду-
ля
• Завершаться расширением .Js
Если, к примеру, мы пишем модуль с именем Fred, то файл с программным кодом JavaScript для этого модуля можно было бы назвать jquery.fred-1.0.js. Наличие префикса jquery. предотвратит возможный конфликт с именами файлов, предназначенных для использования с другими библиотеками. В конце концов, тому, кто пишет модули не для библиотеки jQuery, использовать префикс jquery. нет смысла. Но при этом все еще возможны конфликты имен модулей расширения внутри сообщества jQuery.
Если мы пишем модули расширения для собственного пользования, то нам достаточно избежать конфликта имен только с теми модулями, с которыми мы планируем работать сами. Но если модуль создается для всех желающих, то необходимо избежать конфликта имен со всеми уже выпущенными модулями.
Лучший способ избежать конфликтов имен – постоянно быть в курсе дел сообщества jQuery. Замечательная отправная точка для этого – официальная страница сообщества, но помимо информации на этой странице есть и другие меры предосторожности, которыми мы можем воспользоваться.
Один из способов обеспечить отсутствие конфлик-
та имен файлов между нашим и другими модулями – использовать дополнительный префикс, уникальный для вас или вашей организации. Например, имена файлов всех модулей расширения, разработанных для этой книги, содержат префикс jquery.jqia (где jqia является сокра-
щением от jQuery inAction – «jQuery в действии»), чтобы исключить вероятность конфликта с именами файлов любых других модулей расширения, которые кто-нибудь может использовать в своих веб-приложениях. Точно так же имена файлов для расширения jQuery Form Plugin начинаются с префикса jquery.form. Не все модули следуют этому соглашению, но по мере роста их количества будет постоянно расти и важность следования ему.
Похожий принцип можно применить и к именам, которые мы даем своим новым функциям, – как вспомогательным функциям, так и методам обертки jQuery.
Создавая модули расширения для себя, мы обычно знаем о других модулях, которые будем использовать, – избежать конфликта имен в этом случае достаточно легко. Но как быть, если модуль создается для общего использования? Или как быть, если наши модули первоначально предназначались для личного пользования, но оказались настолько эффективными, что мы решили передать их всему сообществу?
Ознакомление с уже существующими модулями для предотвращения конфликта имен в прикладных интерфейсах займет достаточно много времени. Кроме того, рекомендуется собирать коллекции взаимосвязанных функций под общим префиксом (точно так же, как и в
24 |
25 |
случае с именами файлов), чтобы избежать беспорядка в пространстве имен.
Создание файла с плагином и его подключение
Обычно, javascript-плагины располагаются в отдельных файлах. Для файлов с плагинами jQuery существует соглашение касательно их названия — оно должно удовлетворять формату jquery.plaginName.js. Таким образом, файл с нашим плагином нужно будет назватьjquery. responsiveBlock.js.
Чтобы наш плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а затем js-файл с нашим плагином:
<script src=»jquery.min.js»></script>
<script src=»jquery.responsiveBlock.js»></script>
Основа для плагина
Чтобы добавить новый метод в объект jQuery, необходимо добавить функцию с его реализацией в объект jQuery.fn. В нашем плагине нужно организовать один метод — который будет добавлять элементам умение изменять цвет при наведении курсора. Назовем его так же как и сам плагин — responsiveBlock:
jQuery.fn.responsiveBlock = function()
{
// здесь будет реализация метода
};
Точка с запятой в конце реализации очень важны! Без нее плагин не заработает.
Чтобы избежать возможных конфликтов имен, обернем наш код в следующую конструкцию:
(function($)
{
jQuery.fn.responsiveBlock = function()
{
// здесь будет реализация метода
};
})
(jQuery);
Переменная this, в теле метода, всегда содержит текущий объект jQuery (тот, на котором и был вызван метод). Для того, чтобы обойти все выбранные элементы по отдельности, используем метод .each(). А для возможности продолжить цепочку методов наш метод должен будет возвратить текущий объект jQuery:
(function($)
{
jQuery.fn.responsiveBlock = function()
{
var make = function()
{ // реализация работы метода с отдельным элементом страницы
};
26 |
27 |
return this.each(make);
// в итоге, метод responsiveBlock вернет текущий объект jQuery обратно
};
})
(jQuery);
2.2 Создание меню
Чтобы создать меню воспользуемся тегами <div> и <li>. Ниже приведем пошаговую инструкцию для создания простого меню с использованием библиотек JQuery.
1.Подключаем CSS файл:
<link rel=»stylesheet» type=»text/css» href=»(путь к вашему css) « />
2. В тело HTML кода добавляем:
<div id=»menu»> <ul>
<li><a href=»#»>Главная</a></li> <li><a href=»#»>Видеоуроки</a></li> <li><a href=»#»>Об авторе</a></li> <li><a href=»#»>Контакты</a></li>
</ul>
</div>
28
3.Прописываем для id=”menu” в CSS файл следую-
щее:
#menu
{
height: 46px; width: 100%;
background: url(../images/menu_bg.png)
repeat-x;
}
Результат:
Рис 6. Визуальное отображение меню
4. Создаем дополнительные подразделы во вкладке «Главная»:
•Перейти на последнюю страницу
•Курсы
•Для детей
•Для начинающих
Рис 6. 1. Визуальное отображение меню
29
5. В документе CSS пропишем следующие строки для выравнивания по вертикали выпадающее меню:
#menu ul ul li
{
float: none; border-right:none;
border-bottom: 1px solid #e7ab45;
}
#menu ul ul
{
background:#fecf63;
width:150px; border:1px solid #e7ab45; position: absolute; top:46px;
left:0;
display:none;
}
6. Подключаем библиотеку и файл с нашим кодом.
<script type="text/javascript" src="../jquery- 1.11.0.min.js"></script>
<script type="text/javascript" src="../jquery. dropmenu.js"></script>
jquery-1.11.0.min.js – это Библиотека jquery.dropmenu.js – это наш код
$(document).ready(function ()
{
$('#menu ul li').hover (function ()
{
$('ul:first', this).slideDown(150);
}, function ()
{
$('ul:first', this).slideUp(150);
}
);
});
2.3Работа с текстом
1.Работа с текстовым содержанием: text()
Метод html() может читать и изменять HTML код
элемента, включая любые HTML теги . А метод text() может работать только с текстовым содержанием HTML элемента:
•В то время, когда читается содержимое элемента с помощью метода text(), все HTML теги отделяются от текста.
•Когда метод text() используется для замены содержания элемента, любые HTML теги в замещающей строке декодируются таким образом, что они отображаются на странице.
30 |
31 |
Использование метода text() аналогично использованию метода html(). Следующий пример выбирает все параграфы, а затем выводит их текстовое содержимое:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
$( init );
function init()
{
alert( $('p').text() );
}
</script>
</head>
<body>
<p>Этот параграф содержит <a href="#">ссылку</a>.</ p>
</body>
</html>
Этот код выведет окно сообщения. Теги <a> и </a> будут удалены из текста:
«Этот параграф содержит ссылку.»
Точно так же, как и метод html(), метод text() читает содержание первого элемента в наборе.
2. Заменяем текст содержания элемента
Метод text() работает как и метод html(), когда необходимо заменить содержимое контента. Разница заключается лишь в том, что HTML теги декодируются для отображения на странице, а не для формирования элементов.
Пример, основан на использования метода html(), для замены содержания параграфа другим текстом:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
$( init ); function init()
{
$('#myDiv').text('<h2>Новый за-
головок</h2><p>Новый текст, который содержит <a href="#">другую ссылку</a>.</p>');
}
</script>
</head>
<body>
<div id="myDiv">
<p>Этот параграф содержит <a href="#">ссылку</a>.</ p>
</div>
</body>
</html>
32 |
33 |
А вот что выведено на экран. Теги <h2>, <p> и <a> отображены как обычный текст, вместо того, чтобы сформировать заголовок, параграф и ссылку:
«<h2>Новый заголовок</h2><p>Новый текст, который содержит <a href="#">другую ссылку</a>.</p>»
3.Использование функции для замены текста
Точно так же как и в методе html(), Вы можете использовать функцию с методом text(), если необходмо заменить контент на основе его положения и\или содержимого. Рассмотрим пример "нумерованных абзацев", в котором будем использовать метод text() вместо метода html() и использовать символ '>' в качестве сепаратора вместо точки:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
$( init ); function init()
{
$('p').text( insertNumbers );
}
function insertNumbers( index, oldText )
{
return (index+1) + " > " + oldText;
}
</script>
</head>
<body>
<p>Первый абзац</p> <p>Второй абзац</p> <p>Третий абзац</p> </body>
</html>
Результат работы будет выглядеть следующим образом:
«1 > Первый абзац» «2 > Второй абзац» «3 > Третий абзац»
Выполнив приведённый код и посмотрев на источник HTML кода, вы увидите, что метод text() декодировал символ '>' как '>'.
4. Работа со значениями полей формы: val()
Рассмотрим метод val(). Работает он как же, как и метод text(), но используется для чтения и изменения
значений полей формы, а не текстового содержимого элементов.
Ниже приведенный пример демонстрирует и чтение и запись значений полей формы с помощью метода val():
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
34 |
35 |
<head>
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
$( init ); function init()
{
var output = "Продукт: " + $('#product').
val() + "\n";
output += "Количество: " + $('#quantity').val() + "\n";
output += "Экспресс-доставка: " + $('inp ut:radio[name=express]:checked').val() + "\n";
alert( output );
$('#product').val( "megawidget" ); $('#quantity').val( 4 ); $('#expressNo').attr('checked', true);
}
</script>
</head>
<body>
<form method="post" action=""> <div> <label>Продукт:</label>
<se1ect id="product" name="product">
<option value="superwidget">SuperWidget</option> <option value="megawidget">MegaWidget</option> <option value="wonderwidget">WonderWidget</
option>
</se1ect>
<br/> <label>Количество:</label>
<input type="text" id="quantity" name="quantity" value="3">
<br/> <label>Экспресс-доставка:</label>
<input type="radio" id="expressYes" name="express" value="да" checked="checked"> Да
<input type="radio" id="expressNo" name="express" value="нет"> Нет
</div>
</form>
</body>
</html>
Данный код сперва выводит окно сообщения, в котором отображаются значения по умолчанию полей формы: текстового поля, списка и группы кнопок выбора:
«Продукт: superwidget» «Количество: 3» «Экспресс-доставка: да»
Затем код изменяет количество на 4, выбранный продукт на "MegaWidget", а экспресс-доставку на "нет".
В выше приведённом примере кнопка выбора #expressNo отмечается с помощью вызова метода attr() для установки атрибута кнопки checked, так как метод val() не может изменить состояние кнопки выбора или чекбокса.
При использовании метода val() нужно помнить о следу-
36 |
37 |
ющем:
•Можно использовать метод val() для чтения и\или изменения выбранных опций в списке se1ect.
Как было показано в примере, можно изменить выбранный виджет присвоив новое значение методу val(). (В этом случае, значение должно обязательно присутствовать среди возможных опций в списке.)
•Можно читать все выбранные значения опций в списке se1ect.В этом случае метод val() возвращает массив с выбранными значениями. (Жалко, что это не работает в обратном направлении, было бы хорошо, если бы мы могли передать массив методу val() для того, чтобы установить несколько опций.)
•Можно получать значения выбранной кнопки в группе кнопок выбора. Метод val() можно использовать с селектором :checked для определения значения выбранной кнопки. (Данный прием работа так же и
счекбоксами, но метод val() возвращает значение только первого отмеченного чекбокса.)
•Можно изменять значения для нескольких полей формы с помощью функции. Также как и для методов html() и text(), можно передавать функцию в метод val(), чтобы изменять значения полей на основе их индекса положения и/или текущего значения.
2.4Кнопки
Вбиблиотеке JQuery UI кнопки являются виджетом, которые предназначены для перехода по веб-
страницам сайта.
Стандартные кнопки, которые можно создавать средствами HTML и CSS, являются устаревшими и почти не применяются в современном сайтостроении, именно поэтому средствами JQuery реализуются достаточно стильные кнопки, которые могут:
•Статичные, с изменением цвета самой
кнопки;
•Динамичные, с изменением вида самой
кнопки;
•Чекбоксы с выбором нескольких кно-
пок за один раз;
•Кнопка с картинкой-иконкой;
•Кнопка с выпадающим меню;
•Многофункциональная кнопка с одним или более действиями;
Вэтом разделе мы разберем динамично изменяе-
мые кнопки, для этого нам необходимо создать три файла:
•HTML – файл, для отображения самой кнопки в браузере;
•CSS – файл, для оформления кнопки;
•JS – файл, для добавления динамики кнопке(в данном примере использоваться не будет);
Для начала создаем структуру кнопки используя блок <div>, их будет несколько для того чтобы более красиво:
38 |
39 |