Всплывающие панели с помощью jQuery - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Кому на Руси жить хорошо?
Всего ответов: 869
Статистика


Онлайн всего: 3
Гостей: 2
Пользователей: 1

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Разные скрипты

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

Хочешь сказать спасибо? Кликни на рекламный баннер.

10.10.2012, 20:44
Довольно интересный плагин 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>

Вот и всё !





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: www.srobbin.com
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 7505 | Загрузок: 501 | Рейтинг: 4.3/6
Теги: jQuery плагин, контент в модельном окне, контент, скрипт, jQuery, плагин
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Пластмассовые штучки на концах шнурков называются аксельбанты.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта