Плагин для создания перемещаемых и растягиваемых блоков на сайте
Мы уже публиковали урок о создание перемещаемых блоков или элементов на страницах сайта, с помощью легкого плагина EasyDrag. Тот пример очень простой и не содержит какие-либо широкие возможности. Сейчас мы бы хотели реализовать похожий функионал, но добавить к нему функцию “растяжения” (изменения размера) окна (блока), как это делается например на любых окнах операционной системы Windows. Для нашей идеи очень подойдёт новый плагин Drag’n'Resize, который мы и попытаемся подключить к нашему сайту.
В самом начале Вы должны скачать архив со всеми необходимыми файлами в конце нашего урока. После все файлы надо разархивировать в корневую папку нашего сайта на хостинге. Теперь мы можем приступить к подключению всех необходимых файлов на тех страницах, где мы хотим реализовать нашу возможность. В теге head вставляем следующее:
Далее нам необходимо определиться, сколько и какие блоки будут способны свободно перемещаться по странице и какие иметь возможность растягиваться. В нашем примере мы создадим три разных блока-окна, назовём их window1, window2 и window3 и присвоем соответствующие id:
Первый блок window1 можно будет только растягивать и изменять размер. Для этого в функции мы присвоили параметр: .jqResize(‘.jqResize’).
Второй блок window2 будет только перемещаться когда мы этого захотим. Ему присвоен параметр .jqDrag(‘.jqDrag’). Вы можете удалить значение в кавычках, которое находится в скобках ‘.jqDrag’. В таком случае, перетаскивание окна (блока) будет реализовано при наведение на весь блок, а не на курсор определенной для этого иконки.
Третий блок window3 будет иметь обе возможности и присвоено ему .jqDrag(‘.jqDrag’).jqResize(‘.jqResize’). соответственно. У него убран дополнительный класс ‘.jqDrag’ в параметре .jqDrag(), что позволит передвигать блок не за какую-либо часть (иконку), а за любую область. Это важно, если элемент имеет возможность еще и масштабирования.
Теперь создадим сами блоки на странице сайта и разместим внтури их какой-либо контент:
Код
<div id="window1" class="jqDnR"> <div class="jqHandle jqResize"></div> <img src="img/1.png"/> <br /> Это окно вы можете только растягивать! <div class=""></div> </div>
<div id="window2" class="jqDnR"> <div class="jqHandle jqDrag"></div> <img src="img/2.png"/> <br /> Это окно вы можете только перемещать! </div>
<div id="window3" class="jqDnR"> <img src="img/3.png"/> <br /> Это окно вы можете растягивать и перемещать! <div class="jqHandle jqResize"></div> </div>
Обртите внимание, что к каждому блоку #window присвоен дополнительный класс jqDnR, который и позволяет плагину обнаружить блок и активировать к нему необходимый функционал. Так же у нас внутри блока имеются несколько дополнительных элементов: jqHandle jqResize (элемент/иконка изменение масштаба)и jqHandle jqDrag (элемент/иконка перемещения блока). У третьего блока #window3 отсутствует иконка “перемещения” jqHandle jqDrag. Его можно будет перемещать кликнув по любой области.
Теперь мы создадим стили блоков и всех необходимых элементов. Вы можете указать их либо в отдельном подключаемом файле css, либо сразу же на странице в теге head:
В данном примере мы создали три блока с минимальной высотой в 230px и минимальной шириной: 200px. Элементы .jqDrag и .jqResize это как раз то, за что мы будем перемещать и растягивать основные блоки. Для них мы создали соответствующие иконки “resize.png” и “drag.png”, через параметр background. .jqDnR – это общий класс для всех блоков #window и в нём мы прописываем все общие параметры. Указываем обязательно общую ширину и позиционирование с помощью параметры z-index. При желание Вы можете убрать какие-либо параметры и присвоить их отдельно каждому блоку #window.
Ну пожалуй и всё! Самое время посмотреть, что у нас получилось кликнув на кнопку “Пример” и скачать архив с рабочим вариантом со всеми необходимыми файлами.
Доброго времени суток Гость ! Cейчас ты находишся на странице с файлом Плагин для создания перемещаемых и растягиваемых блоков на сайте, если ты искал Скрипты для uCoz то ты попал по адрессу,и что бы скачать Плагин для создания перемещаемых и растягиваемых блоков на сайте, нужно нажать на кнопку которая находится выше.
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
Администрация не несёт ответственности за содержащие файлы на данном портале.
Все материалы на сайте принадлежат исключительно их владельцам!
Главный администратор сайта ๖ۣۜNonStop | Хостинг от uCoz | Sitemap | Sitemap-Forum | RSS лентаEXTM.NET.UA