X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Библиотека модулей jquery ui
maklty
maklty
Topic Starter сообщение 24.10.2012, 11:26; Ответить: maklty
Сообщение #1


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

Ссылки:
Jquery
Jquery ui

При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.
[img]http://www.masterwebs.ru/sp/seopult.gif[/img]

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Услуги по созданию и доработке скриптов PHP, MySQL, JavaScript, jQuery
Разработка сайтов и сервисов под-ключ
0 alexey 1168 24.11.2023, 14:46
автор: alexey
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВеб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
56 qpPeW 44760 19.7.2023, 10:03
автор: qpPeW
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыНаписание скриптов на PHP, в т.ч. модулей для CMS, и другие услуги
Создание модулей и хаков для DLE и других движков, перенос контента
170 Coppermine 117857 24.2.2023, 12:30
автор: boltuk
Открытая тема (нет новых ответов) 1C-Bitrix, JavaScript\jQuery, Верстка HTML5 CSS3
1 byteeightlab 1458 2.7.2019, 7:37
автор: ychervov
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлы(Европа и США) Бизнес по продаже модулей и разработке для Magento
0 kontenta 2365 6.6.2018, 23:53
автор: kontenta


 



RSS Текстовая версия Сейчас: 28.3.2024, 15:45
Дизайн