Методы для работы с элементами-близнецами

⇐ ПредыдущаяСтр 32 из 36Следующая ⇒

Близнецами называют элементы, располагающиеся на одном уровне вложенности с заданным элементом в объектной модели документа. Например, в следующем документе близнецами h1 будут элементы h2 и p.

< body class=" siblings" >

< h1> Заголовок 1 уровня< /h1>

< h2> Заголовок 2 уровня< /h2>

< p> Текст внутри параграфа< /p>

< /body>

Метод siblings()

Метод siblings() дает возможность определить всех близнецов элемента. Следующий пример демонстрирует изменение стиля всех близнецов элемента h1:

< script>

$(document).ready(function(){

$(" h1" ).siblings().css({" color": " blue", " border": " 2px solid blue" }); }); < /script>

< body class=" siblings" >

< h1> Заголовок 1 уровня< /h1>

< h2> Заголовок 2 уровня< /h2>

< p> Текст внутри параграфа< /p>

< /body>

Результат работы скрипта представлен на рисунке 85. Синим цветом выделены близнецы элемента h1. Обратите внимание, сам элемент h1 стиль не поменял.

Рисунок 85– Демонстрация работы метода siblings()

Используя метод siblings(), можно найти только определенные элементы, которые являются близнецами заданного элемента. Следующий пример вернет только параграфы, которые являются близнецами элемента h1:

$(document).ready(function(){
$(" h1" ).siblings(" p" ); });

Метод next()

Метод next() вернет близнеца, следующего сразу за выбранным элементом.

К примеру, нужно изменить стиль элемента, идущего сразу за элементом h2:

< script>

$(document).ready(function(){

$(" h2" ).next().css({" color": " red", " border": " 2px solid red" });

});

< /script>

< body class=" siblings" >

< h1> Заголовок 1 уровня< /h1>

< h2> Заголовок 2 уровня< /h2>

< p> Текст внутри параграфа< /p>

< /body>

Результат работы скрипта представлен на рисунке:

Рисунок 86– Демонстрация работы метода next()

JQuery UI

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

$(document).ready(function(){

$(" #drag" ).draggable();

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

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

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

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

});

Подключение jQuery UI

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

Примечание. Плагины подключаются вместе с библиотекой jQuery, а не вместо нее.

Существуют два варианта подключения jQuery UI:

Локальное подключение. Данный способ требует скачивание специального файла с официального сайта;

Удаленное подключение. Подключение производится к плагинам, хранящимся на серверах GOOGLE.

Способы подключения отдельных плагинов jQuery UI не отличаются от подключения библиотеки jQuery, которое было подробно рассмотрено выше в данной главе.

Методы взаимодействия

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

Перетаскиваемые элементы

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

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

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