Области для перетаскиваемых элементов

С помощью метода droppable определяется область, в которую можно переместить перетаскиваемый элемент.

$(" селектор" ).droppable({опция1: значение1, опцияN: значениеN})

С помощью опций, которые передаются методу droppable можно настраивать дополнительные аспекты поведения области для перетаскиваемых элементов.

Код функции переданный, в опции drop выполнится, когда перетаскиваемый элемент будет перетащен в область и отпущен.

Код функции переданный, в опции over выполнится, когда перетаскиваемый элемент будет заведен в границы области.

$(document).ready(function(){

$(" #drag1" ).draggable({stack: " #drop1" });

$(" #drop1" ).droppable({

over: function(){

$(" #drag1" ).css(" background-color", " #d7fa99" );

$(" #drop1" ).css(" background-color", " #d7fa99" );

drop: function(){

$(" #drag1" ).css(" display", " none" );

$(" #drop1" ).css(" background-color", " #c4f66f" );

$(" #drop1" ).html(" Перемещение завершено успешно." );

alert(" Вы перетащили элемент с id=drag1 в область с id=drop1." );

}

});

С помощью опции accept указываются элементы, которые будут приниматься областью.

$(document).ready(function(){

$(" #drag1" ).draggable({stack: " #drop1" });

$(" #drag2" ).draggable({stack: " #drop1", revert: true});

$(" #drop1" ).droppable({

accept: " #drag1",

over: function(){

$(" #drag1" ).css(" background-color", " #d7fa99" );

$(" #drop1" ).css(" background-color", " #d7fa99" );

drop: function(){

$(" #drag1" ).css(" display", " none" );

$(" #drop1" ).css(" background-color", " #c4f66f" );

$(" #drop1" ).html(" Перемещение завершено успешно." );

}

});

Растягиваемые элементы

С помощью метода resizable можно сделать элементы растягиваемыми.

$(" селектор" ).resizable({опция1: значение1, опцияN: значениеN})

С помощью опций, которые передаются методу resizable можно настраивать дополнительные аспекты поведения растягиваемых элементов.

$(document).ready(function(){

$(" #resize1" ).resizable();

});

Если опция animate имеет значение true, размер элемента будет изменятся анимированно.

С помощью опции helper можно задать вид помощника, с помощью которого пользователь будет узнавать о текущем размере окна во время растягивания.

$(document).ready(function(){

$(" #resize1" ).resizable({animate: true, helper: " ui-state-highlight" });

});

Выделяемые элементы

С помощью метода selectable можно превратить группу элементов в список выбора.

$(" селектор" ).selectable({опция1: значение1, опцияN: значениеN})

С помощью опций, которые передаются методу selectable есть возможность настраивать дополнительные аспекты поведения выделяемых элементов.

С помощью классов.ui-selecting и.ui-selected можно настроить оформление выбираемых и выбранных элементов.

$(document).ready(function(){

$(" #select1" ).selectable();

});

Сортируемые элементы

С помощью метода sortable возможно сделать элементы списка сортируемыми.

$(" селектор" ).sortable({опция1: значение1, опцияN: значениеN})

С помощью опций, которые передаются методу sortable имеется возможность настраивать дополнительные аспекты поведения сортируемых списков.

$(document).ready(function(){

$(" #sort1" ).sortable();

});

Можно также связать два сортируемых списка. Элементы одного связанного списка можно перемещать в другой связанный список.

Для того, чтобы воспользоваться этой возможностью, необходимо задать связываемым спискам одинаковый класс и указать его в опции connectWith.

$(document).ready(function(){

$(" #sort1, #sort2" ).sortable({connectWith: ".connect" });

});

Виджеты jQuery UI

jQuery UI предоставляет набор готовых виджетов, предназначенных для создания пользовательского интерфейса веб-приложений. Поведение виджетов может настраиваться с помощью передаваемых им опций. Внешний вид виджетов может быть настроен:

- С помощью выбора одной из стандартных тем доступных при скачивании библиотеки;

- С помощью themeroller'a;

- Вручную путем редактирования файла jquery-ui-1.8.12.custom.css.

Общий вид создания виджетов jQuery UI выглядит примерно следующим образом: группировка элементов на странице особым образом (индивидуально для каждого виджета); применение к сгруппированным элементам специального метода, который превращает их в виджет.

Виджет accordion

Виджет accordion представляет собой группу объединенных выпадающих меню, из которых в данный момент времени открыто может быть только одно. Данный виджет используется для группировки информации на странице с целью экономии места.

Рассматривая метод slide(), мы говорили о возможности создания меню типа аккордеон с использованием jQuery. В jQuery UI существует готовый виджет, который нужно только подключить на странице.

/* 1. Группируем элементы: */

< div id=" accordion" >

// 1.1. Определяем заголовок элемента

< h2> < a href=" #head1" > Заголовок 1< /a> < /h2>

/* 1.2. Определяем содержимое элемента (значение атрибута id содержимого должно совпадать со значением href заголовка) */

< div id=" head1" > Содержимое 1< /div>

< /div>

// 2. Применяем метод к сгруппированным элементам:

$(" #accordion" ).accordion({опция1: значение1, опцияN: значениеN});

С помощью опций, передающихся методу, можно настраивать дополнительные аспекты поведения виджетов. Виджетам может быть передано сразу несколько опций.

$(document).ready(function() {

$(" #accordion" ).accordion();

});

Виджет autocomplete

Виджет autocomplete позволяет ускорить ввод данных в поле, отображая по мере введения определенные предположения. Выбрав одно из предположений, пользователь может автоматически завершить ввод.

Предположения выводится в случае, если данные, введенные пользователем, совпадают со значением одного из элементов из списка данных.

Можно подключать к виджету как локальные (т.е. определенные в скрипте на этой же странице), так и удаленные списки (т.е. находящиеся на удаленном сервере).

Локальные списки удобны для хранения небольших наборов данных (например список улиц города), а удаленные списки подходят для хранения больших наборов данных (например база данных всех городов мира).

/* 1. Определяем элемент input, в который будет производиться ввод информации */

< input id='auto' />

/* 2. Превращаем input в виджет autocomplete */

$('#auto').autocomplete({опция1: значение1, опцияN: значениеN})

Подключить к виджету список данных можно с помощью опции source.

С помощью опции minLength можно указать минимальное количество символов, которое должно содержать поле ввода прежде, чем поиск совпадений начнет выполнятся.

$(document).ready(function() { $(" #auto1" ).autocomplete({source: [" Весна", " Зима", " Осень", " Лето" ]});

});

Виджет datepicker

Виджет datepicker привязывает к текстовому полю интерактивный календарь, который отображается, когда поле становится активным.

Если пользователь щелкнет на какую-либо дату в календаре, она будет автоматически введена в текстовое поле, как будто он ввел ее вручную.

// 1. Создадим текстовое поле

< input type='text' id='datepicker' />

// 2. Привяжем к нему виджет datepicker

$('#datepicker').datepicker({опция1: значение1, опцияN: значениеN});

Пример.

$(document).ready(function() {

$(" #datepicker" ).datepicker();

$(" #datepicker1" ).datepicker({ monthNames: [" Январь", " Февраль", " Март", " Апрель", " Май", " Июнь", " Июль", " Август", " Сентябрь", " Октябрь", " Ноябрь", " Декабрь" ],

dayNamesMin: [" Вс", " Пн", " Вт", " Ср", " Чт", " Пт", " Сб" ],

firstDay: 1,

dateFormat: " dd.mm.yy"

});

На данный момент в последней версии языка гипертекстовой разметки HTML появилось поле ввода, которое полностью выполняет все функции виджета datapicker. Однако данный тип поля поддерживает слишком небольшой процент браузеров, и именно поэтому виджет datapicker является пока безальтернативным вариантом при разработке формы с календарем.

Оформление кнопок

С помощью метода button можно стилизовать:

– обычные кнопки (определяемые тэгами button и input type='button');

– кнопки отправления форм;

– радио кнопки;

– флажки;

– ссылки.

/* Если Вы хотите оформить только один элемент, необходимо выбрать его с помощью селектора и вызвать метод button: */

$(" селектор" ).button({опция1: значение1, опцияN: значениеN});

/* Если Вы оформляете группу элементов, необходимо вначале сгруппировать элементы следующим образом: */

< div id=" groupradio" >

< input type=" radio" name=" radio" id=" value1" />

< label for=" value1" > Радио кнопка 1< /label>

< input type=" radio" name=" radio" id=" value2" />

< label for=" value2" > Радио кнопка 2< /label>

< input type=" radio" name=" radio" id=" value3" />

< label for=" value3" > Радио кнопка 3< /label>

< /div>

// И затем вызвать метод buttonset:

$(" #groupradio" ).buttonset({опция1: значение1, опцияN: значениеN});

$(document).ready(function() {

$(" #but1, #but2, #but3, #but4" ).button();

$(" #group1, #group2" ).buttonset();

});

Виджет tabs

Виджет tabs как и виджет accordion используется для группировки информации на странице с целью экономии места.

// 1. Создаем шаблон:

< div id=" tabs" >

// 1.1. Определяем заголовки вкладок

< ul>

< li> < a href=" #tabs-1" > Вкладка 1< /a> < /li>

< li> < a href=" #tabs-2" > Вкладка 2< /a> < /li>

< li> < a href=" #tabs-3" > Вкладка 3< /a> < /li>

< /ul>

/* 1.2. Определяем содержимое вкладок (значение атрибута href заголовков

и значение атрибута id содержимого должно совпадать) */

< div id=" tabs-1" >

< p> Содержимое вкладки 1< /p>

< /div>

< div id=" tabs-2" >

< p> Содержимое вкладки 2.< /p>

< /div>

< div id=" tabs-3" >

< p> Содержимое вкладки 3.< /p>

< /div>

// 2. Превращаем шаблон в группу вкладок:

$(" #tabs" ).tabs({опция1: значение1, опцияN: значениеN});

$(document).ready(function() {

$(" #tabs" ).tabs();

Диалоговые окна

С помощью метода dialog можно превратить выбранный элемент в диалоговое окно. Диалоговое окно отображается поверх текста страницы и содержит заголовок и поле с содержимым. Диалоговое окно можно перетаскивать, растягивать и закрывать с помощью иконки " х" в верхнем правом углу окна.

Если содержимое превышает размеры диалогового окна, то полоса прокрутки будет автоматически отображена.

/* 1. Сгруппируем элементы: */

< div id=" dialog" title=" Заголовок диалогового окна" >

< p> Содержимое окна.< /p>

< /div>

// 2. Превратим сгруппированные элементы в диалоговое окно:

$( " #dialog" ).dialog({опция1: значение1, опцияN: значениеN});

$(document).ready(function() {

$(" #dialog1" ).dialog();

});

С помощью опции width и height устанавливается высоту и ширину диалоговых окон.

$(document).ready(function() {

$(" #dialog1" ).dialog({width: 400, height: 300});

});

Опция modal позволяет сделать диалоговое окно модальным.

Модальные окна используются для привлечения дополнительного внимания со стороны пользователей. Пока открыто модальное окно, пользователь не может взаимодействовать с другими элементами страницы.

$(document).ready(function() {

$(" #dialog1" ).dialog({modal: true, height: 200, width: 330});

});

Опция autoOpen устанавливает, должно ли окно быть открыто автоматически после создания (значение true), или нет (значение false).

С помощью метода open открывается, а с помощью метода close закрывается модальное диалоговое окно.

С помощью опции buttons добавляют кнопки в диалоговые окна. Кнопки определяются в следующем формате:

{Название_Кнопки: function(){Код, который выполнится после нажатия на кнопку}}.

Примечание. В одно диалоговое окно может быть добавлено несколько кнопок.

$(document).ready(function() {

$(" #dialog1" ).dialog({autoOpen: false, buttons: {

OK: function(){

$(this).dialog(" close" );

alert(" Вы нажали ОК" ); }}

});

$(" #dialog2" ).dialog({autoOpen: false, buttons: {

OK: function(){

$(this).dialog(" close" );

alert(" Вы нажали ОК" ); },

Отмена: function(){

$(this).dialog(" close" );

alert(" Вы нажали Отмена" ); }}

});

$(" #but1" ).click(function(){

$(" #dialog1" ).dialog(" open" );

});

$(" #but2" ).click(function(){

$(" #dialog2" ).dialog(" open" );

});

Виджет progressbar

С помощью виджета progressbar отображается полоса загрузки, которая будет информировать пользователя о состоянии выполнения какого-либо процесса.

/* 1. Создадим элемент: */

< div id=" progressbar" > < /div>

// 2. Превратим созданный элемент в полосу загрузки:

$(" #progressbar" ).progressbar();

С помощью опции value можно установить процент заполнения виджета progressbar.

$(document).ready(function() {

$(" #progressbar" ).progressbar({value: 40});

});

Виджет slider

С помощью виджета slider можно превратить выбранный элемент в ползунок.

// 1. Создадим элемент:

< div id=" slider" > < /div>

// 2. Превратим созданный элемент в ползунок:

$(" #slider" ).slider();

//////////////////////////////////////////////////

$(document).ready(function() {

$(" #slider" ).slider();

});

Подведем итоги:

В данном разделе мы познакомились с понятием библиотеки JavaScript, рассмотрели самые популярные фреймворки JavaScript, подробно изучили работу с библиотекой jQuery.

Проверь себя

1. Что такое фреймворк?

2. Назовите самые популярные фреймворки.

3. Какие основные возможности представляет библиотека JavaScript jQuery?

4. Назовите основные методы подключения библиотеки jQuery.

5. Назовите хотя бы 2 метода jQuery, используемых для работы с DOM.

6. Назовите хотя бы 2 метода jQuery, используемых для анимации элементов.

7. Назовите хотя бы 2 метода jQuery, используемых для поиска элементов.

Практические задания

Задание 1

Напишите код, релизующий:

1. выбор элемента с id=div1

2. выбор элемента с class=div1

3. выбор тегов h1 и h2

4. выбор всех тегов h1 внутри параграфа, который находится внутри блока div

5. поиск всех ссылок в документе, начинающихся с «http»

6. поиск всех ссылок с атрибутом «href»

Задание 2

1. Необходимо поменять цвет текста на красный внутри каждого нечетного параграфа документа.

2. Необходимо изменить цвет фона в каждом четном блоке документа на зеленый

Задание 3

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

1. После одинарного нажатия на кнопку с id='but1' цвет текста абзаца с id='par1' должен изменится на зеленый, а размер его шрифта должен стать равным 20px.

2. При наведении указателя мыши на ссылку ее цвет должен измениться на оранжевый. При выведении указателя мыши за ее пределы оформление должно сбросится на стандартное.

3. При выделении текста элемента цвет текста должен измениться на красный, а размер шрифта должен стать равным 20px.

4. При каждом щелчке по кнопке с id=but2 оформление абзаца с id=par2 должно меняться следующим образом:

5. Текст должен быть отображен шрифтом Times New Roman красного цвета;

6. Текст должен быть отображен шрифтом Arial синего цвета;

7. Текст должен быть отображен жирным шрифтом Verdana, с рамкой толщиной 1 пиксель (используйте свойство font-weight: bold для того, чтобы сделать текст жирным и свойство border-style для задания толщины границы).

$(document).ready(function(){

//Ваш код

});

Задание 4

Измените цвет и размер шрифта, перечисленных ниже элементов.

Измените цвет и размер шрифта:

1. Элемента с id=meadow;

2. Элемента с class=rainbow;

3. Элемента с id=future находящегося внутри элемента с id=fut; (данный элемент необходимо выделить цветом отличным от красного);

4. Элемента имеющего атрибут set;

5. Элемента с атрибутом last=code.

Примечание. для изменения цвета текста элемента используйте метод: css('color', 'новый_цвет_текста'), для изменения размера шрифта используйте метод: css('font-size', 'размер_шрифта_px').

Задание 5

Реализуйте подпункты, перечисленные ниже, путем добавления на страницу соответствующего jQuery UI кода:

1. Сделайте элемент с id=el1 перетаскиваемым и растягиваемым.

2. Сделайте список с id=sort1 сортируемым и затем расставьте элементы этого списка в правильном порядке.

3. Сделайте элементы с id=el2 и id=el3 перетаскиваемыми. После этого сделайте так, чтобы первая область (c id=drop1) принимала оба элемента, а вторая (c id=drop2) только элемент с id=el3. После того, как элемент будет перетащен в принимающую его область перетаскиваемый элемент должен стать невидимым, а цвет фона области должен изменится на зеленый.

Задание 6

Выполните подпункты перечисленные ниже:

1. Создайте виджет accordion.

2. Создайте виджет autocomplete, который будет производить поиск по списку приведенных в задании стран. Сделайте так, чтобы виджет начинал поиск только если длина ввода пользователя превышает 4 символа.

Задание 7

Выполните подпункты перечисленные ниже:

1. Исправьте ошибки в коде для того, чтобы отобразить виджеты progressbar и slider.

2. Создайте виджет tabs.

3. Создайте диалоговые окна и привяжите их вызовы к кнопкам.

$(document).ready(function(){

$(" sd1" ).slier();

$(" pb1" ).progresbar({val=75%});

});

AJAX

Что такое Ajax

Термин AJAX является аббревиатурой и расшифровывается как Asynchronous JavaScript And XML (Асинхронный JavaScript и XML). Рассмотрим составляющие аббревиатуры подробнее:

Asynchronous Асинхронный запрос – это запрос к серверу, ответ которого обрабатывается в любой момент выполнения скрипта или приложения, т.е. является по своей сути отдельным потоком данных, не влияющим и не задерживающим другие процедуры.

Браузеры по своей сути асинхронны, в то время как стандартные web-страницы–нет. Когда web-странице требуется информация от сервера, обработка данных прекращается до тех пор, пока сервер не обработает запрос и не вернет страницу заново. При использовании асинхронных запросов к серверу поступает запрос на отображение не всей страницы, а только измененной части, при этом обработка не останавливается, и пользователь продолжает работать со страницей. Существуют также синхронные запросы.

JavaScript – это язык программирования, используемый при разработке web-приложений. Работа с асинхронными запросами осуществляется с использованием объекта JavaScript XMLHttpRequest. Подробнее работа с JavaScript рассматривалась в предыдущих главах учебного пособия.

XML (расширяемый язык разметки от английского E X tensible M arkup L anguage) - это новый SGML-производный язык разметки документов, позволяющий структурировать информацию разного типа, используя для этого произвольный набор инструкций. Информация, отформатированная в XML, передается между разными платформами, приложениями. Данные XML очень часто используются разработчиками, благодаря их структурированию и легкой адаптации.

Основная задача XML – это структурирование и хранение информации для передачи. Многие начинающие разработчики путают HTML и XML. Однако XML не служит для разметки документа, и не заменяет HTML. Зачастую XML используется для форматирования данных, предназначенных для передачи, в то время как HTML используется для отображения данных. Пример стандартного XML файла представлен на рисунке 87.

Рисунок 87– Пример стандартного XML файла

Еще одним неоспоримым преимуществом XML является возможность создания новых тегов.

AJAX– это не новый язык программирования или еще одна библиотека JavaScript, это технология обмена данными между клиентом и сервером, которая стала очень популярна в последние 10 лет. AJAX - это эффективный способ совместного использования HTML, CSS, JavaScript и DOM.

Используя AJAX, можно заметно увеличить скорость реакции приложения и уменьшить нагрузку на сервер. Это становится возможным благодаря асинхронному обмену информацией и способностью перезагружать только " обновленную" часть страницы без необходимости перезагрузки страницы целиком.

Впервые термин AJAX был озвучен в статье американского программиста Джесси Джеймса Гарретта (Jesse James Garrett) «Новый подход к веб-приложениям», которая вышла в свет 18 февраля 2005 года. Джесси Джеймс Гарретт ввел термин AJAX для обозначения качественно новой технологии обмена данными с сервером. Самым известным примером AJAX до сих пор остается " живой" поиск от компании GOOGLE.

Преимущества такого поиска заключаются в том, что пользователь начинает видеть результаты своего запроса без нажатия на кнопку " поиск", а иногда даже до того как он закончит писать запрос. GOOGLE как будто угадывает запрос пользователя и выдает ему информацию " на лету" (см рисунок 88). Секрет такого молниеносного ответа кроется в использовании технологии AJAX.

Рисунок 88– Пример " живого" поиска от GOOGLE

Итак, в состав AJAX входят технологии:

HTML - язык гипертекстовой разметки документа, подробно рассмотренный в одном из разделов данного учебного пособия, выступает в качестве основы любого web-приложения, в том числе и приложения, использующего AJAX.

CSS - каскадные таблицы стилей - отвечают за внешний вид страницы, применяющей AJAX.

DOM (объектная модель документа) - для работы с данными на странице.

JavaScript - для связи перечисленных выше технологий между собой.

⇐ Предыдущая 27 28 29 30 31 323334 35 36 Следующая ⇒