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

В сегодняшнем уроке я покажу Вам способ интересным образом показывать контент на Ваших сайтах.

Совсем недавно мне удалось найти довольно интересный плагин jQuery, который способен отображать контент интересным образом. Любой HTML код Вы можете показывать слева или справа на странице при нажатии на ссылку.

Лучше всего взглянуть на демо версию для ясности:

Очень неплохо, по-моему.

Давайте посмотрим как это сделано...

Первым делом в шапке документа нам необходимо подключить таблицу стилей и необходимые скрипты:

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

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

<a href="_left.html" id="slide-left">PageSlide from the left</a></li>
<a href="_right.html" id="slide-right">PageSlide from the right</a></li>
<a href="_modal.html" id="slide-modal">PageSlide as a modal element</a></li>

Теперь в конце документа (можно даже после закрывающего тега 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">Close Me</a>

Надеюсь, Вам данный эффект пригодится при создании сайтов. До следующих уроков.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.srobbin.com
Перевел: Максим Шкурупий
Урок создан: 8 Января 2010
Просмотров: 41242
Правила перепечатки


5 последних уроков рубрики "Разное"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 8 Января 2010 21:54
    Zver
    Первый! ^^
  • 9 Января 2010 00:15
    Alert
    Не круто. =(
  • 9 Января 2010 00:59
    Flok
    это случайно не через фреймы?
  • 9 Января 2010 07:09
    Arnold
    Круто Вам
  • 9 Января 2010 13:42
    НеБот
    Не круто
  • 9 Января 2010 19:34
    Spamol
    В демо лево и право перепутанно горе-программисты)))) А так интересный пример!
    • 4 Августа 2012 18:20
      daveindigo
      Горе программисты это те, кто не понимает что в демо всё правильно указано. Имеется ввиду что налево будет выезжать и направо слайд, а не слева и справа.
  • 9 Января 2010 19:55
    Dimka
    Spamol, +1 )))гг
  • 10 Января 2010 13:28
    Spamol
    voj, Ну ты конечно крутой, DLE установить это вверх познания программистов и верстальщиков.... Хорошо пиаришь свой ГС)
  • 13 Января 2010 19:25
    Евгений
    Попробовал использовать это для блога Wordpress. 1) Линки на css и скрипты разместил в header.php, подключил скрипты, но не могу понять как этот demo.css подлинковать. Там все через php код прописано, если присоедению как другие таблицы, он влияет на оформление страниц, а не на _modal.htm. 2)Сама ссылка также в хедере в общем меню. Она видна. Видна и ссылка "Сlose Me". 3)Блок для активации скрипта разместил в footer.php, после тэга </body> Кликаю на ссылку, "затемнение появляется где-то в верху. Значит не получается применить стили. Вопрос: какой код надо разместить для подлинковывания к .header.php, этого demo.css, чтобы он влиял только на эту html (modal) страницу? Да и куда кстати ссылку "Close Me" поместить, чтобы она была видно только для выхода из модального окна.? Прошу помочь.
  • 13 Января 2010 20:20
    Евгений
    И еще, скажите зачем файл demo.сss, который по идее должен влияеть только на страничку _modal.html, обращается к тэгу <body>? Я то дурак даже в код не смотрел, думал там все прописано. А там куча правил для несуществующих селекторов. Демо - 10 баллов. Урок - отстой!
  • 21 Января 2010 19:39
    Ольга
    Спасибо за урок. Подскажите пож, а какие внести изменения и можно ли, что эти "шторки" выезжали не справа и слева, а например, снизу или сверху?
    • 4 Мая 2011 17:44
      Евгений Болгов
      Нужно в третьем блоке изменить или дописать новую строчку, - $("#slide-top").pageSlide({ height: "350px", direction: "top" }); Будет выплывать с верху! =))
      • 28 Октября 2011 12:34
        VirgoSoul
        не работает так!
      • 30 Января 2016 20:42
        actec
        внизу коммент - как будет время прошу помощи - спасибо.
  • 28 Марта 2010 03:01
    VALERI
    YO! Супер современно
  • 31 Марта 2010 22:32
    VALERI
    Вообщем поставил на сайтик. Но проблема в том,что не реально ставить картинки в это меню!
  • 19 Августа 2010 14:33
    top
    Всё реально
  • 7 Октября 2010 18:33
    genixxx
    Если бы этот урок показал Е.Попов, было бы отлично. Но автор урок подал очень плохо, у меня на сайте не работает. Кроме того человек внизу прав demo.css относится ко всему примеру, и поди разберись на что селекторы.
  • 26 Января 2011 21:14
    GodLike
    В демо отлично смотрица, т.е. простенько, но полезно. Евгений, тот что комент писал выше, я ещё сам код не смотрел, но пятой точкой чую, чтобы данные стили не влияли на твой документ может их изменить с общих на id или тупо изменить название классов, хотя бы просто подставив к каждому одну цифру (ко всем, например, 8), и, соответственно, допиши эту же цифру в html(php) документ простым "найти и заменить". И, о моя великая логика, ссылку "Close Me" вставляешь в modal.html, ведь эту же надо страницу закрыть :-) Не понимаю почему возник этот вопрос, ведь ссылка уже прописана в модальной странице в самом исходнике.
  • 23 Июня 2011 12:48
    Алиночка
    Всё получилось. В подгружаемую страницу добавила форму регистрации, но она почему-то не работает, submit не реагирует на нажатия, input file и checkbox тоже. Как это исправить?
    • 31 Июля 2011 23:58
      ikaaar
      У меня таже проблема что и у Алиночки. Есть решение? В файл _modal.html вставила обычную форму, а она не работает совсем.
      • 14 Марта 2012 19:43
        yousypov
        Вы не нашли решение этого вопроса!?
  • 18 Ноября 2012 22:01
    zdanovich
    с горем пополам сделал, но во выезжающем модальном окне не отображается флэш-панорама и кнопка клозе в хроме не работает. помогите, люди добрые
  • 24 Ноября 2012 14:02
    radiogin
    Форму аплоада файла невозможно вставить в такой скрипт, не работает кнопка "Обзор".
  • 28 Января 2016 15:09
    actec
    Помогите пожалуйста разобраться с самим слайдом - мне необходимо чтоб он выезжал прямо поверх всех окон а он получается затрагивает боди основного сайта тем самым сдвигает и срезает логотип и так далее... Как это сделать? п.с. комментарии старые но все же прежде чем говорить зайдите в каждый линкованный файл и посмотрите настройки которые указал автор а потом можно и пообщаться - в хроме все работает и даже имеет возможность размещать и картинки и фиксировать кнопку "закрыть" куда угодно + даже кодировка языка спокойно меняется и все работает...
^ Наверх ^