В современном информационном пространстве веб-приложения (сайты) становятся все сложнее и насыщеннее. Для их создания требуются более функциональные средства как на серверной стороне, так и на клиентской. Для улучшения вида сайта, на клиентской стороне, пишутся различенные Фреймворки и библиотеки модулей, которые значительно уменьшают код и дают программисту в руки больше возможностей. Одной из таких библиотек является библиотека модулей jquery ui. Все модули ui используют основной Фреймворк jquery, без которого сейчас очень сложно найти сайт.
Jquery – Фреймворк для расширения и упрощения стандартного интерфейсного языка javascript. В нем написан блок для упрощения работы с DOM – элементами. Основная функция дающая понять браузеру о том, что команда написана на jquery в коде имеет вид «$(' ')». Чтобы это стало понятно приведу пример:
Надо вывести информацию из текстового поля <input> с идентификатором «test».
Код на javascript:
alert(document.getElementById('test').value);
Код на jquery:
alert($('#test').value);
Модули
jquery ui используют систему drag on drop.
В jquery ui имеются следующие модули:
- Ui core
- Ui draggable
- Ui droppable
- Ui resizable
- Ui selectable
- Ui sortable
Ui core – ядро библиотеки модулей ui. Без нее не один модуль работать не будет. Она осуществляет связь между Фреймворком и модулями библиотеки.
Ui draggable – модуль, позволяющий пользователю перемещать объекты на странице. Возможны следующие реализации модуля:
- Простое перемещение объекта на странице. Код для подключения:
$(function() {
$("#test").draggable();
});
- Вертикальное и горизонтальное перемещение. При этой реализации ограничивается варьирование объектом в заданном направление. Для ограничения варьирования надо задать входной параметр axis функции draggable()
- Для вертикального перемещения параметр axis должен быть равен «y». При этом, при наведение мыши на объект, курсор изменется на вертикальную стрелку с направлениями вверх и низ. Код для подключения:
[indent=1]
$(function() {
$("#test").draggable({ axis: 'y' });
});
[/indent]
- Для горизонтального перемещения параметр axis должен быть равен «x». При этом, при наведение мыши на объект, курсор изменется на горизонтальную стрелку с направлениями на право и лево. Код для подключения:
[indent=1]
$(function() {
$("#test").draggable({ axis: 'x' });
});
[/indent]
- Перемещение объекта внутри блока. При этой реализации объект можно перемещать внутри контейнера <div>. При этом контейнер должен иметь следующие свойства:
- Ширина, заданная в установленных единицах (Не в процентах). Пример: width=”150px”;
- Высота, заданная в установленных единицах (Не в процентах). Пример: height=”100px”;
- Отступ от края, всегда задается в установленных единицах, либо 0 (так как 0 в любых единицах равен 0).
[indent=1]Для этой реализации нужно задать во входном параметре containment идентификатор контейнера. Код для подключения:
$(function() {
$("#test").draggable({ containment: '#conteiner' });
});
[/indent]
- Магнитное перемещение объекта. При такой реализации объект, при перемещении, притягивается к другим объектам или к опредекленным классом блокам. Для включения магнитного перемещения нужно задать входной параметр snap: для притягивания к другим объектам равным true, для притягивание к блокам - класс блока. Коды для подключения:
$(function() {
$("#test").draggable({ snap: true });
$("#test2").draggable({ snap: '.conteiner' });
});
- Перемещение с заданным шагом. При этой реализации перемещение происходит скачками с указанным шагом. Для включения нужно задать в параметре grid ширину и высоту скачка. Код для подключения:
$(function() {
$("#test").draggable({ grid: [30, 30] });
});
- Перемещение с возвратом.При этой реализации после отпускания перемещаемого объекта, он плавно возвращается в начальное положение. Для включения нужно задать параметр revert равным true. Код для включения:
$(function() {
$("#draggable").draggable({ revert: true });
});
Модуль имеет следующие события:
- Create – происходит в момент инициализации draggable на объект.
- Start – происходит в момент начала перемещения объекта.
- Drag – происходит в каждый момент передвижения элемента.
- Stop – происходит в момент отпускания объекта.
Все события могут работать, как с используемым DOM-элементом, так и с другими. Подключение производится следующим кодом:
$("#test").draggable({
<событие>: function(event, ui) {
// код функции
}});
Ui droppable – модуль, позволяющий при перемещении (
ui draggable) объекта в определенную область выполнять какое-нибудь действие. Для включения модуля нужно сначала включить draggable для объекта, а потом написать функцию выполнения при попадании в область. Возможны следующие реализации модуля:
- Простое перемещение объекта в область. Код для подключения:
$(function() {
$("#test").draggable();
$("#conteiner").droppable({
drop: function(event, ui) {
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
});
- Указать при попадании какого элемента произойдет выполнение функции. Для включения этой реализации нужно задать идентификатор объекта в параметр accept, который вызовет функцию. Код для подключения:
$(function() {
$("#test, #test_null").draggable();
$("#conteiner").droppable({
accept: '#test',
drop: function(event, ui) {
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
});
- Перемещение объекта в область с возвратом. Для этой реализации в draggable нужно задать входной параметр revert (о котором уже написано выше).
Модуль имеет следующие события:
- Create – происходит в момент инициализации droppable на объект.
- Activate – происходит при старте перемещения объекта.
- Deactivate – происходит при завершении перемещения объекта.
- Over – происходит при попадании объекта в область droppable.
- Out – происходит при покидании объектом области droppable.
- Drop – происходит при отпускании объекта над областью droppable.
Все события могут работать, как с используемым DOM-элементом, так и с другими. Подключение производится следующим кодом:
$("#test").droppable({
<событие>: function(event, ui) {
// код функции
}});
Ui resizable – модуль позволяющий пользователю изменять размеры объекта. Возможны следующие реализации модуля:
- Простое изменение размера объекта. Код для подключения:
$(function() {
$("#test").resizable();
});
- Пропорциональное изменение размера. При этой реализации размеры по оси x и y изменяются пропорционально, а пропорции хадаются во входном параметре aspectRatio. Код для подключения:
$(function() {
$("#test").resizable({
aspectRatio: 16/9
});
});
- Минимальный и максимальный размер объекта. При этой реализации нельзя уменьшить объект меньше заданного минимального размера и увеличить больше максимального. Код для подключения:
$(function() {
$("#test").resizable({
maxHeight: 250,
maxWidth: 350,
minHeight: 150,
minWidth: 200
});
});
- Изменение размеров объекта внутри блока. При этой реализации объект можно увеличивать внутри контейнера <div>. При этом контейнер должен иметь следующие свойства:
- Ширина, заданная в установленных единицах (Не в процентах). Пример: width=”150px”;
- Высота, заданная в установленных единицах (Не в процентах). Пример: height=”100px”;
- Отступ от края, всегда задается в установленных единицах, либо 0 (так как 0 в любых единицах равен 0).
[indent=1]Для этой реализации нужно задать во входном параметре containment идентификатор контейнера. Код для подключения:
$(function() {
$("#test"). resizable ({ containment: '#conteiner' });
});
[/indent]
- Изменение размера объекта с заданным шагом. При этой реализации изменение размера происходит скачками с заданным шагом grid. Код для подключения:
$(function() {
$("#test").resizable({
grid: 50
});
});
Модуль имеет следующие события:
- Create – происходит в момент инициализации resizable на объект.
- Start – происходит в момент начала изменения размера объекта.
- Resize – происходит в каждый момент изменения размера объекта.
- Stop – происходит в момент отпускания объекта.
Все события могут работать, как с используемым DOM-элементом, так и с другими. Подключение производится следующим кодом:
$("#test").resizable({
<событие>: function(event, ui) {
// код функции
}});
Ui selectable – модуль позволяющий выделять элементы списка, то есть производить выборку. Так же можно выделить несколько элементов сразу.
Код для подключения:
$(function() {
$("#test").selectable();
});
Модуль имеет следующие события:
- Create - происходит в момент установки selectable на элемент.
- Selected - происходит на каждом выделенном элементе отдельно, в момент окончания выделения.
- Selecting - происходит в процессе выделения (при нажатой клавише мыши), на элементе, только что захваченном зоной выделения.
- Start - происходит в момент начала выделения элементов.
- Stop - происходит в момент окончания выделения элементов.
- Unselected - происходит в момент окончания выделения (при отпускании клавиши мыши) на элементах которые потеряли выделение.
- Unselecting - происходит в процессе выделения (при нажатой клавише мыши), на элементе, из которого только ушла зона выделения.
Все события могут работать, как с используемым DOM-элементом, так и с другими. Подключение производится следующим кодом:
$("#test"). selectable ({
<событие>: function(event, ui) {
// код функции
}});
Ui sortable – модуль, предназначенный для упорядочивания элементов списка в любую подборку. Код для подключения:
$(function() {
$("#test").sortable();
$("#test").disableSelection();
});
Модуль имеет следующие события:
- Create - происходит в момент инициализации sortable на элементе.
- Start - происходит в момент начала перетаскивания элемента.
- Sort - происходит при каждом движении (изменении координат) перетаскиваемого элемента.
- Change - происходит во время перетаскивания группируемого элемента, в моменты смены вакантной позиции (места, на которое встанет перетаскиваемый элемент, если его отпустить в данный момент).
- BeforeStop - происходит после отпускания перетаскиваемого элемента, но до удаления вспомогательных элементов.
- Stop - происходит после отпускания перетаскиваемого элемента.
- Update - происходит после отпускания перетаскиваемого элемента, в случае, если порядок группируемых элементов поменялся.
- Reseive - происходит, когда в набор группируемых элементов помешают элемент из другого набора.
- Over - происходит, если элемент из связанного группируемого набора оказывается над текущим набором. Это событие произойдет и в случае, если схватить элемент из текущего набора, перетащить его в область связного набора и не отпуская возвратить обратно в зону текущего набора.
- Out – происходит, если элемент из текущего группируемого набора, окажется над областью другого набора.
- Activate - срабатывает в начале перетаскивания элемента, находящегося в текущем или связанном наборе.
- Deactivate - срабатывает при завершении перетаскивания элемента, находящегося в текущем или связанном наборе.
Все события могут работать, как с используемым DOM-элементом, так и с другими. Подключение производится следующим кодом:
$("#test"). sortable ({
<событие>: function(event, ui) {
// код функции
}});
Таким образом,
ui обеспечивает решение следующих задач:
- Дать возможность пользователю перемещать объекты по и изменять их размеры.
- Создание мини приложений типа, при перемещении объекта в область, пользователь получит какой-нибудь подарок.
- Возможность сортировки информационных блоков. Хорошо применяется для сортировки статей и новостей, в порядке важности для пользователя.
- Создание мини приложения (пазлы).
- И другие.
Ссылки:
JqueryJquery uiПри поддержке:
SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой.
Обсудить на форуме.
[img]http://www.masterwebs.ru/sp/seopult.gif[/img]
Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
|