1- Метод с плъзгане ()
Плъзгащият се метод управлява елементите на HTML страница, които искате да преместите, този метод може да се използва по два различни начина:
• $ (селектор, контекст) .draggable (опции) • $ (селектор, контекст) .draggable ("действие", параметри)
Нека видим пример:
Първо трябва да включим необходимите файлове, често допускана грешка е да включим jQuery UI .js преди jQuery .js, не забравяйте, че jQuery е ядрото, а jQuery UI са само библиотеки, плъгини, джаджи, които без jQuery няма бих работил.
Извикваме метода:
$ (function () {$ ("#draggable") .draggable ();});
И го свързваме със селектора, който ще бъде div с него.
Плъзнете ме наоколо
Ето пълния изходен код:
jQuery UI Draggable - Функция по подразбиранеПлъзнете ме наоколо
Методът на droppable управлява елементите на HTML страница, които искате да пуснете в област. Подобно на метода с плъзгане, той може да се използва по два различни начина:
• $ (селектор, контекст) .droppable (опции) • $ (селектор, контекст) .droppable ("действие", параметри)
Нека разгледаме пример за това:
Включваме файловете, добавяме стиловете, извикваме методите (тук ще използваме метода с плъзгане еднакво), последван от метода на droppable. Ето изходния код:
jQuery UI Droppable - Функция по подразбиранеПлъзнете ме към моята цел
Пусни тук
И това ще бъде нашият изход в браузъра:
Първо включваме нашите файлове:
Добавяме някои стилове към нашата количка:
Ще използваме и метода на акордеон () от библиотеката на потребителския интерфейс на jQuery, за да направим нашата количка по -привлекателна, извикваме нашите методи и ги свързваме със селекторите, в този случай ще разширим цялата функционалност на метода с плъзгане до списък:
И така ще изглежда нашата количка за пазаруване:
jQuery UI Droppable - Демо за количка за пазаруванеТениски
- Риза Lolcat
- Риза с чийзбургер
- Риза Buckit
Чанти
- Зебра на ивици
- Черна кожа
- Алигаторова кожа
Джаджи
- iPhone
- iPod
- Ай Пад
- Добавете вашите артикули тук