Поп-опережающее виджет

Поп-упа

Чтобы создать поп-ап, добавьте атрибут data-role="popup" к div с содержимым поп-апа. Затем создайте ссылку с атрибутом href , установленным на id div поп-апа, и добавьте атрибут data-rel="popup", чтобы сообщить фреймворку об открытии поп-апа при нажатии на ссылку. Это похожая структура разметки, как у виджета dialog. Div поп-апа должен быть вложен внутри той же страницы, что и ссылка.

• ui-popup-container: Внешний контейнер для виджета списка. Кроме того, класс ui-popup-active будет добавлен, когда поп-ап активен, а классы ui-popup-hidden, ui-popup-truncate будут добавлены, когда поп-ап неактивен.
  • ui-popup: Основной контейнер поп-апа, содержащий всё содержимое.
    • ui-popup-arrow-guide: Указатель стрелки.
    • ui-popup-arrow-container: Контейнер для стрелки поп-апа. Он также будет иметь классы ui-popup-arrow-l, ui-popup-arrow-t, ui-popup-arrow-r, ui-popup-arrow-b соответственно, если стрелка настроена на левую, верхнюю, правую или нижнюю сторону.
      • ui-popup-arrow: Основной элемент стрелки.

<a href="#popupBasic" data-rel="popup">Open Popup</a>
 
<div data-role="popup" id="popupBasic">
  <p>This is a completely basic popup, no options set.</p>
</div>

Это приведет к следующему поп-апу:

Поп-ап состоит из двух элементов: экрана, который представляет собой прозрачный или полупрозрачный элемент, покрывающий всю страницу, и контейнера, который является самим поп-апом. Если у исходного элемента был атрибут id, экран и контейнер получат атрибут id , основанный на нём. Атрибут id экрана будет дополнен "-screen", а атрибут id контейнера будет дополнен "-popup" (в примере выше, id="popupBasic-screen" и id="popupBasic-popup", соответственно).

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

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

Масштабирование изображений: примеры Lightbox

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

В двух примерах ниже дивы с data-role="popup" имеют класс photopopup.

Обработчик привязывается к событию popupbeforeposition, что гарантирует, что изображение масштабируется не только до показа, но и при изменении размера окна (например, при изменении ориентации). В этом примере высота уменьшена на 60 для учета верхней и нижней погрешности в 30 пикселей.

$( document ).on( "pagecreate", function() {
    $( ".photopopup" ).on({
        popupbeforeposition: function() {
            var maxHeight = $( window ).height() - 60 + "px";
            $( ".photopopup img" ).css( "max-height", maxHeight );
        }
    });
});

Работа с iframe в поп-апах

Вам может потребоваться встроить iframe в поп-ап для использования виджета стороннего разработчика. Здесь мы рассмотрим несколько реальных примеров работы с iframe: видео и карты.

Пример с видео

Вот пример встраивания стороннего видеоплеера в поп-ап:

Разметка представляет собой iframe внутри контейнера поп-апа. У поп-апа будет отступ в 15 пикселей из-за класса ui-content и рамка в один пиксель, потому что фреймворк добавит класс ui-body-a к поп-апу.

<div data-role="popup" id="popupVideo" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">
 
    <iframe src="http://player.vimeo.com/video/41135183" width="497" height="298" seamless></iframe>
 
</div>

При использовании iframe внутри поп-апа важно изначально установить атрибуты width и height в 0. Это предотвращает проблемы с отображением на платформах, таких как Android 2.3. Обратите внимание, что вам необходимо установить эти атрибуты, так как установка width и height с помощью CSS недостаточно. Вы можете оставить фактические width и height в разметке для браузеров с отключенным JavaScript и использовать attr() для установки нулевых значений при событии pageinit.

Далее привяжитесь к событию popupbeforeposition для установки желаемого размера iframe при показе поп-апа или при изменении размера окна (например, при изменении ориентации). Для примеров iframe на этой странице используется пользовательская функция scale() для масштабирования iframe в соответствии с размерами меньших экранов. Разверните раздел ниже, чтобы просмотреть код этой функции.

function scale( width, height, padding, border ) {
    var scrWidth = $( window ).width() - 30,
        scrHeight = $( window ).height() - 30,
        ifrPadding = 2 * padding,
        ifrBorder = 2 * border,
        ifrWidth = width + ifrPadding + ifrBorder,
        ifrHeight = height + ifrPadding + ifrBorder,
        h, w;
 
    if ( ifrWidth < scrWidth && ifrHeight < scrHeight ) {
        w = ifrWidth;
        h = ifrHeight;
    } else if ( ( ifrWidth / scrWidth ) > ( ifrHeight / scrHeight ) ) {
        w = scrWidth;
        h = ( scrWidth / ifrWidth ) * ifrHeight;
    } else {
        h = scrHeight;
        w = ( scrHeight / ifrHeight ) * ifrWidth;
    }
 
    return {
        'width': w - ( ifrPadding + ifrBorder ),
        'height': h - ( ifrPadding + ifrBorder )
    };
};

При закрытии поп-апа ширина и высота должны быть установлены обратно в 0. Вы можете сделать это, привязавшись к событию popupafterclose.

Вот полный скрипт и ссылка для открытия поп-апа с видео:

$( document ).on( "pageinit", function() {
    $( "#popupVideo iframe" )
        .attr( "width", 0 )
        .attr( "height", 0 );
 
    $( "#popupVideo" ).on({
        popupbeforeposition: function() {
            var size = scale( 497, 298, 15, 1 ),
                w = size.width,
                h = size.height;
 
            $( "#popupVideo iframe" )
                .attr( "width", w )
                .attr( "height", h );
        },
        popupafterclose: function() {
            $( "#popupVideo iframe" )
                .attr( "width", 0 )
                .attr( "height", 0 );
        }
    });
});

Обратите внимание, что видео всё ещё будет воспроизводиться в iframe при закрытии поп-апа. Если доступно, можно использовать API стороннего разработчика, чтобы остановить видео при событии popupafterclose. Другой способ — создать iframe при открытии поп-апа и уничтожить его при закрытии, но это уменьшит поддержку браузеров с отключённым JavaScript.

Пример с картой

Во втором примере iframe используется для отображения API Google Maps. Использование iframe предотвращает проблемы с элементами управления картой.

Это разметка поп-апа, включая кнопку закрытия справа:

<div data-role="popup" id="popupMap" data-overlay-theme="b" data-theme="b" data-corners="false" data-tolerance="15,15">
 
    <a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
 
    <iframe src="map.html" width="480" height="320" seamless></iframe>
 
</div>

Разверните раздел ниже, чтобы просмотреть исходный код iframe.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Map</title>
    <script>
        function initialize() {
            var myLatlng = new google.maps.LatLng( 51.520838, -0.140261 );
            var myOptions = {
                zoom: 15,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map( document.getElementById( "map_canvas" ), myOptions );
        }
    </script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <style>
        html {
            height: 100%;
            overflow: hidden;
        }
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #map_canvas {
            height: 100%;
        }
    </style>
</head>
<body onload="initialize()">
 
    <div id="map_canvas"></div>
 
</body>
</html>

Установка размера iframe выполняется точно так же, как и для примера с видео, за исключением одного момента. Также следует установить ширину и высоту div, содержащего карту, чтобы предотвратить проблемы с отображением на платформах, таких как Android 2.3. В этом примере ID этого div — #map_canvas.

Вот полный скрипт и ссылка для открытия поп-апа с картой:

$( document ).on( "pageinit", function() {
    $( "#popupMap iframe" )
        .attr( "width", 0 )
        .attr( "height", 0 );
 
    $( "#popupMap iframe" ).contents().find( "#map_canvas" )
        .css( { "width" : 0, "height" : 0 } );
 
    $( "#popupMap" ).on({
        popupbeforeposition: function() {
            var size = scale( 480, 320, 0, 1 ),
                w = size.width,
                h = size.height;
 
            $( "#popupMap iframe" )
                .attr( "width", w )
                .attr( "height", h );
 
            $( "#popupMap iframe" ).contents().find( "#map_canvas" )
                .css( { "width": w, "height" : h } );
        },
        popupafterclose: function() {
            $( "#popupMap iframe" )
                .attr( "width", 0 )
                .attr( "height", 0 );
 
            $( "#popupMap iframe" ).contents().find( "#map_canvas" )
                .css( { "width": 0, "height" : 0 } );
        }
    });
});

Вызов плагина поп-апа

Этот плагин будет автоматически инициализирован на любой странице, содержащей div с атрибутом data-role="popup". Однако, если необходимо, вы можете напрямую вызвать плагин popup на любом селекторе, как любой плагин jQuery, и программно работать с API поп-ап опций, методов и событий:

$( "#myPopupDiv" ).popup();

Открытие поп-апов

При использовании разметки, при нажатии на ссылку с атрибутом data-rel="popup", будет показан соответствующий контейнер поп-апа с id, указанным в href ссылки. Чтобы открыть поп-ап программно, вызовите метод open на контейнере поп-апа:

$( "#myPopupDiv" ).popup( "open" )

Закрытие поп-апов

По умолчанию поп-апы можно закрыть, нажав вне виджета поп-апа или нажав клавишу Esc. Чтобы предотвратить это, добавьте атрибут data-dismissible="false" к поп-апу. Поп-апы также можно закрыть с помощью метода close:

$( "#myPopupDiv" ).popup( "close" )

Чтобы добавить явную кнопку закрытия в поп-ап, добавьте ссылку с ролью кнопки в контейнер поп-апа с атрибутом data-rel="back", которая закроет поп-ап при нажатии. Мы создали вспомогательные классы для позиционирования кнопок в верхнем левом углу (ui-btn-left) или верхнем правом (ui-btn-right) углу поп-апа, но вам может потребоваться настроить их или добавить пользовательские стили позиционирования в зависимости от вашего дизайна. Мы рекомендуем добавить стандартный отступ содержимого в поп-ап, чтобы освободить место для кнопок (см. следующий раздел).

<div data-role="popup">
  <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
  ...popup contents go here...
</div>

Добавление отступа

Для поп-апов с отформатированным текстом необходим отступ. Мы рекомендуем добавить класс ui-content к контейнеру поп-апа, который добавляет стандартный отступ в 1em (16px), как и в контейнере содержимого страницы. Напишите свои стили, чтобы создать более настраиваемый дизайн, если это необходимо.

<a href="#popupPadded" data-rel="popup" data-role="button">Popup with padding</a>
 
<div data-role="popup" id="popupPadded" class="ui-content">
  <p>This is a popup with the <code>ui-content</code> class added to the popup container.</p>
</div>

Это приведет к следующему поп-апу с отступом содержимого:

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

Опции позиционирования

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

В ситуациях, когда поп-ап должен отображаться по центру окна вместо того, чтобы находиться над исходной точкой (например, диалоговое окно или lightbox), добавьте атрибут data-position-to к ссылке и задайте значение window.

Также можно указать любой допустимый селектор в качестве значения для position-to дополнительно к origin и window. Например, если вы добавите data-position-to="#myElement", поп-ап будет позиционирован над элементом с id myElement.

Несколько примеров:

Ограничения размещения поп-апа, которые могут привести к тому, что поп-ап не будет отображаться по центру, как ожидается, следующие:

1. Ширина всплывающего окна будет ограничена с помощью CSS max-width шириной окна минус поправочный коэффициент в 15 пикселей с каждой стороны.
2. При размещении всплывающего окна внутри окна будет соблюдаться поправочный коэффициент от краев окна (15 пикселей с каждой стороны и 30 пикселей сверху и снизу). Высокие всплывающие окна могут выходить за верхний и нижний края окна. Эти части всплывающего окна можно просмотреть, вручную прокрутив документ. Этот поправочный коэффициент можно настроить через параметр tolerance.
3. Верхняя координата всплывающего окна никогда не будет отрицательной. Это гарантирует, что верхняя часть всплывающего окна не будет обрезана.
4. Если центрирование всплывающего окна над элементом приведет к увеличению общей высоты документа, всплывающее окно смещается вверх не более чем до тех пор, пока его верхняя координата не станет равной 0.

Также обратите внимание, что всплывающее окно всегда размещается в центре окна после изменения ориентации или события изменения размера окна.

См. методы для получения информации о программной установке позиции всплывающего окна, включая возможность указания координат x и y.

Установка переходов

По умолчанию всплывающие окна не имеют переходов, чтобы открываться как можно быстрее. Чтобы установить переход, используемый для всплывающего окна, добавьте атрибут data-transition к ссылке, которая ссылается на всплывающее окно. Обратная версия перехода будет использоваться при закрытии всплывающего окна.

<a href="#transitionExample" data-transition="flip" data-rel="popup">
   Flip transition
</a>

По соображениям производительности на мобильных устройствах рекомендуется использовать более простые переходы, такие как pop, fade или none, для плавных и быстрых анимаций всплывающих окон, особенно с более крупными или сложными виджетами внутри всплывающего окна. Чтобы просмотреть все типы переходов, необходимо использовать браузер, поддерживающий 3D-преобразования. По умолчанию устройства, не поддерживающие 3D (например, Android 2.x), будут использовать «fade» для всех типов переходов. Подробную информацию о системе переходов см. на странице переходов.

При открытии всплывающего окна из любой кнопки будет использоваться значение data-transition для этой кнопки. Однако, если вы открываете всплывающее окно программно, например, через $( "#transitionExample" ).popup( "open" ), будет использоваться атрибут data-transition, указанный в определении всплывающего окна, если он присутствует.

Тема всплывающего окна и наложения

Плагин popup предоставляет два параметра, связанных с темой: data-theme и data-overlay-theme. Параметр data-theme относится к теме самого всплывающего окна, а data-overlay-theme — к теме фона всплывающего окна, который покрывает всё окно позади всплывающего окна.

data-theme будет унаследован от страницы и всегда будет иметь действительное значение при открытии всплывающего окна, если вы явно не укажете data-theme="none", в этом случае у всплывающего окна будет прозрачный фон.

data-overlay-theme никогда не будет установлен, и фон всплывающего окна, хотя всегда присутствует, когда всплывающее окно отображается, будет полностью прозрачным, если явно не задан, например, с помощью data-overlay-theme="b". В этом случае фон будет постепенно затемняться, частично скрывая остальную часть окна, чтобы привлечь внимание к всплывающему окну. Вот пример явно стилизованного всплывающего окна:

<div id="both" data-role="popup" data-theme="b" data-overlay-theme="a" class="ui-content">
  ...Popup contents...
</div>

Стрелки

Расширение widgets/popup.arrow предоставляет параметр arrow, который также доступен как атрибут данных. Например, data-arrow="t,b" приведет к отображению всплывающего окна со стрелкой сверху или снизу.

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

Для каждого края, указанного в списке, система вычисляет

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

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

<div data-role="popup" data-arrow="l,t" class="ui-content">
  <h2>Popup with an arrow</h2>
  <p>A second paragraph.</p>
</div>

Примечание: Вложение всплывающих окон запрещено

Это также означает, что пользовательские списки выбора не будут работать внутри всплывающих окон, так как они сами реализованы с использованием всплывающих окон. Если вы разместите список выбора внутри всплывающего окна, он будет отображаться как обычный список выбора, даже если вы укажете data-native-menu="false".

Обходной путь для работы вложенных всплывающих окон — использование таймаута, например, в событии popupafterclose, привязанном к вызывающему всплывающему окну. В приведенном ниже примере, когда первое всплывающее окно закрывается, второе будет открыто с помощью отложенного вызова метода open:

$( document ).on( "pageinit", function() {
    $( ".popupParent" ).on({
        popupafterclose: function() {
            setTimeout(function() { $( ".popupChild" ).popup( "open" ) }, 100 );
        }
    });
});

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

В примере ниже содержится вся страница jQuery Mobile, а не только всплывающее окно. Это помогает проиллюстрировать, где необходимо разместить разметку для виджета предварительно отрисованного всплывающего окна относительно страницы jQuery Mobile, на которой она должна отображаться. В примере всплывающее окно имеет атрибут data-overlay-theme="b" для отражения того, что экран модального наложения имеет связанную тему.

<div data-role="page">
  <div data-role="header">
    <h1>Example Page</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#pre-rendered" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Open pre-rendered popup</a>
  </div>
  <!-- the following two divs represent the pre-rendered popup widget -->
  <div class="ui-popup-screen ui-overlay-b ui-screen-hidden"></div>
  <div class="ui-popup-container ui-popup-hidden ui-popup-truncate" id="pre-rendered-popup">
    <div class="ui-popup ui-body-inherit ui-overlay-shadow ui-corner-all" id="pre-rendered" data-role="popup" data-enhanced="true" data-overlay-theme="b">
      <p>Pre-rendered popup</p>
    </div>
  </div>
</div>

Генерация ID

Виджет всплывающего окна добавляет идентификатор к генерируемым элементам. ID любого сгенерированного элемента создается путем добавления суффикса к собственному ID всплывающего окна:

Заполнитель

<popup-id>-placeholder

Экран

<popup-id>-screen

Контейнер

<popup-id>-popup

Например, создание всплывающего окна с

<div id="extra-info" data-role="popup">
  <p>To use this feature, enable it from Settings.</p>
</div>

приведет к следующей разметке:

<div id="extra-info-placeholder" style="display: none;">
  <!-- placeholder for extra-info -->
</div>
<div id="extra-info-screen" class="ui-screen-hidden ui-popup-screen ui-overlay-inherit"></div>
<div id="extra-info-popup" class="ui-popup-container ui-popup-hidden ui-popup-truncate">
  <div id="extra-info" data-role="popup" class="ui-popup ui-body-inherit ui-overlay-shadow ui-corner-all">
    <p>To use this feature, enable it from Settings.</p>
  </div>
</div>