Главная » Файлы » Всё для сайта » Скрипты
Всплывающие панели с помощью jQuery
[ · Скачать удаленно () · Скриншот ] 09.06.2013, 15:50

Довольно интересный плагин jQuery, который способен отображать контент интересным образом. Любой HTML код Вы можете показывать слева или справа на странице при нажатии на ссылку.
Первым делом в шапке документа (/head) нам необходимо подключить таблицу стилей и необходимые скрипты:
Code
<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 знал какой эффект при нажатии на ссылку должен происходить:
Code
<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) необходимо инициализировать наш плагин и придать ему необходимые настройки.
Code
<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)

В примере по типу модального окна с затемнением Вы можете увидеть кнопку "ЗАКРЫТЬ" (для закрытия всплывающего блока). Её можно сделать вот таким образом:
Code
<a href="javascript:;" class="pageslide-close">ЗАКРЫТЬ</a>

Вот и всё !
Категория: Скрипты | Добавил: Ze∆dDe∆d | Теги: скрипты для ucoz, Скачать скрипты для ucoz, скрипт для ucoz
Просмотров: 572 | Загрузок: 183 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]