Главная » Статьи » Прочее

Всплывающие панели с помощью jQuery


Посмотрите ДЕМО

Довольно интересный плагин jQuery, который способен отображать контент интересным образом. Любой HTML код Вы можете показывать слева или справа на странице при нажатии на ссылку.
Первым делом в шапке документа (/head) нам необходимо подключить таблицу стилей и необходимые скрипты:
Код


<link rel="stylesheet" href="http://hawk.do.am/Kartinki1/style.css" type="text/css" media="screen" title="no title" charset="utf-8">  
<!-- Файлы jQuery плагина pageSlide -->  
<script type="text/javascript" src="http://hawk.do.am/Kartinki1/jquery-1.3.2.min.js"></script>  
<script type="text/javascript" src="http://hawk.do.am/Kartinki1/jquery.pageslide.js"></script>


Теперь в нужном месте страницы нам достаточно поставить ссылку на файл с необходимым контентом (то есть информация в эти всплывающие блоки загружается из внешнего файла). Также нам необходимо добавить id, чтобы jQuery знал какой эффект при нажатии на ссылку должен происходить:

Код

<a href="http://hawk.do.am/Kartinki1/left.html" id="slide-left">БЛОК СПРАВА</a>  
<a href="http://hawk.do.am/Kartinki1/right.html" id="slide-right">БЛОК СЛЕВА</a>  
<a href="http://hawk.do.am/Kartinki1/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>


Вот и всё !
Категория: Прочее | Добавил: slavick (25.09.2013)
Просмотров: 355 | Теги: помощью, панели, Всплывающие, jQuery | Рейтинг: 1.0/8
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]