Перейти к содержимому

Реферальная программа Мегаплана


Библиотека модулей jquery ui

#1 maklty

maklty
  • Пользователь
  • 4 сообщений
  • Репутация: 1
0

Отправлено 24 Октябрь 2012 - 10:26

В современном информационном пространстве веб-приложения (сайты) становятся все сложнее и насыщеннее. Для их создания требуются более функциональные средства как на серверной стороне, так и на клиентской. Для улучшения вида сайта, на клиентской стороне, пишутся различенные Фреймворки и библиотеки модулей, которые значительно уменьшают код и дают программисту в руки больше возможностей. Одной из таких библиотек является библиотека модулей 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». При этом, при наведение мыши на объект, курсор изменется на вертикальную стрелку с направлениями вверх и низ. Код для подключения:

		 $(function() {
			 $("#test").draggable({ axis: 'y' });
		 });

  • Для горизонтального перемещения параметр axis должен быть равен «x». При этом, при наведение мыши на объект, курсор изменется на горизонтальную стрелку с направлениями на право и лево. Код для подключения:

		 $(function() {
			 $("#test").draggable({ axis: 'x' });
		 });

  • Перемещение объекта внутри блока. При этой реализации объект можно перемещать внутри контейнера <div>. При этом контейнер должен иметь следующие свойства:
  • Ширина, заданная в установленных единицах (Не в процентах). Пример: width=”150px”;
  • Высота, заданная в установленных единицах (Не в процентах). Пример: height=”100px”;
  • Отступ от края, всегда задается в установленных единицах, либо 0 (так как 0 в любых единицах равен 0).

Для этой реализации нужно задать во входном параметре containment идентификатор контейнера. Код для подключения:

$(function() {
		 $("#test").draggable({ containment: '#conteiner' });
});

  • Магнитное перемещение объекта. При такой реализации объект, при перемещении, притягивается к другим объектам или к опредекленным классом блокам. Для включения магнитного перемещения нужно задать входной параметр 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).

Для этой реализации нужно задать во входном параметре containment идентификатор контейнера. Код для подключения:

$(function() {
		 $("#test"). resizable ({ containment: '#conteiner' });
});

  • Изменение размера объекта с заданным шагом. При этой реализации изменение размера происходит скачками с заданным шагом 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 обеспечивает решение следующих задач:
  • Дать возможность пользователю перемещать объекты по и изменять их размеры.
  • Создание мини приложений типа, при перемещении объекта в область, пользователь получит какой-нибудь подарок.
  • Возможность сортировки информационных блоков. Хорошо применяется для сортировки статей и новостей, в порядке важности для пользователя.
  • Создание мини приложения (пазлы).
  • И другие.
Ссылки:
Jquery
Jquery ui

При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.
Изображение

 

 

  • 0


Оформление форума – IPBSkins.ru