файлы
| Главная » Файлы » Все для ucoz » Скрипты для ucoz |
Всплывающие панели с помощью jQuery
| 04.03.2014, 12:39 | |
| Довольно интересный плагин jQuery, который способен отображать контент интересным образом. Любой HTML код Вы можете показывать слева или справа на странице при нажатии на ссылку. Первым делом в шапке документа (/head) нам необходимо подключить таблицу стилей и необходимые скрипты: Выделить всё <link rel="stylesheet" href="http://megascripts.ru/demo/krasivay_panel/style.css" type="text/css" media="screen" title="no title" charset="utf-8"> <!-- Файлы jQuery плагина pageSlide --> <script type="text/javascript" src="http://megascripts.ru/demo/krasivay_panel/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://megascripts.ru/demo/krasivay_panel/jquery.pageslide.js"></script> Теперь в нужном месте страницы нам достаточно поставить ссылку на файл с необходимым контентом (то есть информация в эти всплывающие блоки загружается из внешнего файла). Также нам необходимо добавить id, чтобы jQuery знал какой эффект при нажатии на ссылку должен происходить: Выделить всё <a href="http://megascripts.ru/demo/krasivay_panel/stranici/left.html" id="slide-left">БЛОК СПРАВА</a> <a href="http://megascripts.ru/demo/krasivay_panel/stranici/right.html" id="slide-right">БЛОК СЛЕВА</a> <a href="http://megascripts.ru/demo/krasivay_panel/stranici/modal.html" id="slide-modal">С затемнением страницы и кнопкой закрыть</a> Теперь в конце документа (можно даже после закрывающего тега body) необходимо инициализировать наш плагин и придать ему необходимые настройки. Выделить всё <script type="text/javascript"> $("#slide-left").pageSlide({ width: "350px", direction: "left" }); $("#slide-right").pageSlide({ width: "350px", direction: "right" }); $("#slide-modal").pageSlide({ width: "350px", direction: "left", modal: true }); </script> Как Вы видите в первых скобках мы пишем название id ссылки. Далее у плагина доступно три возможных параметра: - width - ширина всплывающего блока (указывать значение в пикселях) - direction - направление откуда этот блок появится (right или left) - modal - должна ли основа страницы затемняться (true или false) В примере по типу модального окна с затемнением Вы можете увидеть кнопку "ЗАКРЫТЬ" (для закрытия всплывающего блока). Её можно сделать вот таким образом: Выделить всё <a href="javascript:;" class="pageslide-close">ЗАКРЫТЬ</a> Вот и всё ! | |
| Просмотров: 376 | Загрузок: 0 | | |
| Всего комментариев: 0 | |