Красивое решение для отображения внешних файлов

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

Данное решение будет интересно вебмастерам, которые следуют тенденциям всемирного вебстроительства, так как подобные плагины очень широко используются на зарубежных сайтах.

demosourse

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

<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" title="Main stylesheet" charset="utf-8" />
<script src="js/jquery-1.3.min.js" type="text/javascript"></script>
<script src="js/jquery.prettyPopin.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPopin.css" type="text/css" media="screen" charset="utf-8" />

Теперь достаточно в любом месте тела документа добавить обычную ссылку с атрибутом rel="prettyPopin". В нашем примере Вам представлен неупорядоченный список из 3-х ссылок:

<ul class="noBull">
<li><a href="ajax/regular.html" rel="prettyPopin">Regular content (defined width, fixed)</a></li>
<li><a href="ajax/page-1.html" rel="prettyPopin">Content with paging (defined width, follow the scroll)</a></li>
<li><a href="ajax/form.html" rel="prettyPopin">Ajax form (width inherited from the &lt;form&gt;, follow the scroll)</a></li>
</ul>

И в конце самое интересное. Необходимо задать параметры функции вызова всплывающих модальных окон.

Делается это следующим образом:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPopin']:eq(0)").prettyPopin({width: 550,followScroll:false});
$("a[rel^='prettyPopin']:eq(1)").prettyPopin({width:300});
$("a[rel^='prettyPopin']:eq(2)").prettyPopin({
callback : function(){
alert('This popin has a callback');
}
});
});
</script>

Как Вы видите ширина задается с помощью width. Можно добавить функцию колбека (при закрытии окна выводится небольшое предупреждение или полезная информация) с помощью callback : function()

Кроме это в демо версии представлена даже возможность вставлять работающие формы с загрузкой результата работы прямо в этом же окне. Вообще, для того, чтобы оставаться в модальном окне во время нажатия на ссылку, у ссылки должен быть атрибут rel="internal".

Все готово. Удачи!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.no-margin-for-errors.com
Перевел: Максим Шкурупий
Урок создан: 27 Июля 2009
Просмотров: 47468
Правила перепечатки


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

^ Наверх ^