Автор

FrameWarp-плагин для вывода страниц в окнах

FrameWarp-плагин для вывода страниц в окнах


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

  • Маленький размер - создан специально для отображения страниц, а не картинок;
  • Не имеет интерфейса, по этому страница будет отображаться в обычном окне;
  • Страница имеет возможность закрытия и отправки сообщения с модального окна;
  • Может использовать кэш для ускорения загрузки страницы;

Основная идея состоит в том, что при нажатии на ссылокнку или кнопки, плагин, FrameWarp, определит координаты этого элемента и вызывает анимацию CSS всплывающего прямоугольника в центре страницы. Плагин будет загружаться при помощи JS Iframe и ссылаться на урлу, который мы указали.

 

Возможности плагина

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

framewarp.js

(function($){

// Основные переменные
 var body = $('body'),
 win = $(window),
 popup, popupBG;
 var frameCache = {};
 var frameCacheDiv = $('<div class="frameCacheDiv">').appendTo('body');
 var currentIframe;
 $.fn.frameWarp = function(settings){

// Основной код плагина
 };
 // Вспомогательные функции
 function hide(){

// Удаляем темный фон из страницы
 }
 function setUpAPI(iframe, settings){

// Сделаем два API метода доступными для фрейма,
 // если эта страница от того же домена.
 }
 function sameOrigin(url){

// Нужно определить домен
 }
 function getOrigin(url){

}
 })(jQuery);

 

Данный плагин создает div с классом frameCacheDiv, для добавления js iframe, который мы добавим к странице. Еще два div будут добавлены к странице с помощью плагина – .popup и .popupBG, которые мы рассмотрим немного позже. Теперь давайте рассмотрим вспомогательные функции.

function hide(){

if(currentIframe){
 currentIframe.hide();
 currentIframe = null;
 }

popupBG.remove();
 popup.remove();
}

function setUpAPI(iframe, settings){

if(sameOrigin(settings.url)){

// минимум API в iFrame
 iframe[0].contentWindow.frameWarp = {
 hide: hide,
 sendMessage:function(param){
 return settings.onMessage(param);
 }
 };
 }
}

function sameOrigin(url){

// Определяем url,
 // Ссылаемся к сайту или к удаленному серверу

return (getOrigin(url) == getOrigin(location.href));
}

function getOrigin(url){

// Используем элемент привязки
 // для разбора URL

var a = document.createElement('a');
 a.href = url;

return a.protocol+'//'+a.hostname;
}

 

Но следует заметить, что во всех современных браузерах реализована защиты которая называется: “same origin policy”, которая устанавливает ограничение веб-сайту для получения доступу к функции DOM другого сайта. По этой причине, у нас есть вспомогательная функция, которая сравнивает адрес js iFrame с адресом текущей страницы. Только когда и домен и соответствие протокола определенны, мы получим доступ к DOM iframe и добавим API методы для отправки сообщений и скрывался. На конечном этапе плагин frameWarp будет выглядеть так.

$.fn.frameWarp = function(settings){
// Настройки по умолчанию
 settings = $.extend({
 cache: true,
 url: '',
 width:600,
 height:500,
 closeOnBackgroundClick: true,
 onMessage:function(){},
 onShow:function(){}
 }, settings);
 this.on('click',function(e){
 e.preventDefault();
 var elem = $(this),
 offset = elem.offset();

 // Центральная кнопка
 var buttonCenter = {
 x: offset.left - win.scrollLeft() + elem.outerWidth()/2,
 y: offset.top - win.scrollTop() + elem.outerHeight()/2
 };

 // Центр окна
 var windowCenter = {
 x: win.width()/2,
 y: win.height()/2
 };

 // Если нет URL, используйте атрибут href.
 if(!settings.url && elem.attr('href')){
 settings.url = elem.attr('href');
 }

 // Темный фон
 popupBG = $('<div>',{'class':'popupBG'}).appendTo(body);
 popupBG.click(function(){
 if(settings.closeOnBackgroundClick){
 hide();
 }
 }).animate({
 'opacity':1
 },400);

 // Всплывающее окно
 popup = $('<div>').addClass('popup').css({
 width : 0,
 height : 0,
 top : buttonCenter.y,
 left : buttonCenter.x - 35
 });

 // Добавление в страницу CSS3 анимации
 popup.appendTo(body).animate({
 'width' : settings.width,
 'top' : windowCenter.y - settings.height/2,
 'left' : windowCenter.x - settings.width/2,
 'border-top-width' : settings.height,
 'border-right-width' : 0,
 'border-left-width' : 0
 },200,function(){
 popup.addClass('loading').css({
 'width': settings.width,
 'height': settings.height
 });
 var iframe;

// Если этот IFRAME уже существует в кэше
 if(settings.cache && settings.url in frameCache){
 iframe = frameCache[settings.url].show();
 }
 else{
 iframe = $('<iframe>',{
 'src' : settings.url,
 'css' : {
 'width' : settings.width,
 'height' : settings.height,
 }
 });

 // Если кэш включен, добавить к нему фрейм
 if(settings.cache){
 frameCache[settings.url] = iframe;
 iframe.data('cached',true);
 settings.onShow();
 }
 else{

 // Удаление некэшируемых фреймов
 frameCacheDiv.find('iframe').each(function(){
 var f = $(this);
 if(!f.data('cached')){
 f.remove();
 }
 });
 }
 iframe.ready(function(){
 frameCacheDiv.append(iframe);
 setUpAPI(iframe, settings);
 settings.onShow();
 });
 }
 currentIframe = iframe;
 });
 });
 return this;

};

 

Как уже заметили ранее, для начала мы используем jQuery, чтобы улучшить функцию jQuery animate(), которая поддерживает CSS анимацию.

 

Использование плагина

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

$(function(){

// Если никакое свойство URL не будет передано,
 // то будет использоваться атрибут href

$('#b1').frameWarp();

$('#b2').frameWarp({
 onMessage: function(msg){
 $('#messages').append('Message Received: '+ msg+'
');
 }
 });

// Кэш включен по умолчанию
 $('#b3').frameWarp({
 url : 'http://www.s-sd.ru/'
 });

// Отключение кэширования
 $('#b4').frameWarp({
 url : 'http://www.s-sd.ru/',
 cache:false
 });
});

 

Вот и все. Готово!

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


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

FrameWarp-плагин для вывода страниц в окнах

Прогресс веб-дизайна не стоит на месте,большие гиганты ит-индустрии диктуют нам правила и направления в разработке дизайна, совсем недавно все стали переводить свои дизайны в минимализм, а именно в тренд Metro UI, объемные сайты постепенно стали исчезать ведь им производят рестайлинг, в скором времени будем на них любоваться как на динозавров. Буквально за несколько недель, с момента показа новой iOS 7, произошел легкий сдвиг в сознании не только у дизайнеров, но и у пользователей, имя ему — плоский дизайн.


FrameWarp-плагин для вывода страниц в окнах

Здравствуйте, уважаемые читатели! Есть много способов, показать информацию о продукте. В этом уроке я собираюсь рассказать Вам, как можно сделать куб с информацией на гранях. Будет применен эффект, который основан на CSS3 Transform 3D. Эффект корректно работает в FF, Chrome и Safari, Opera и IE пока не поддерживают CSS Transform 3D.


FrameWarp-плагин для вывода страниц в окнах

Красивый фон для сайта всегда трудно подобрать, ведь всегда можно найти что-то лучше, красивая графика или простой оттенок это конечно хорошо, но что делать, если вы не хотите вписываться в эти рамки, а создать нечто более уникальное, к примеру, вам необходимо оформить свое портфолио, но при этом поразить посетителя оригинальностью подхода, тогда вы читаете нужный урок. В данном примере мы рассмотрим построение замечательной анимации для сайта с помощью js. Ранее мы уже не однократно приводили примеры различной анимации.


FrameWarp-плагин для вывода страниц в окнах

Меня зовут Сергей Целовальников, я являюсь руководителем студии «Studio Dtsign», в простонародье и в поисковых системах «Студия Целовальникова Сергея». Также я являюсь оффициальным партнером компании UMI.CMS в области разработки сайтов и веб дизайна, с богатым портфолио работ, созданных на этой системе управления сайтами.

О… UMI.CMS

Работа со многими бесплатными и иже с ними CMS-системами управления сайтов, коих я повидал немало до UMI, часто приходил к констатации фактов о наличии всяческих недостатков и пожинанию «плодов» бесплатного софта. И самый безобидный из них – «костность», негибкость, стандартная блочная систем и необходимость создания всех последующих страниц в единственном шаблоне дизайна сайта.......

 


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

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

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close