JQuery Mobile Popups
Всплывающие похожи на диалогах, в том, что они оба оверлей часть страницы. Всплывающее окно может быть полезно, если вы хотите, чтобы отобразить небольшой текст, фотографии, карты или другого контента.
Чтобы создать всплывающее окно, начните с <a> элемента и <div> элемент. Добавьте data-rel="popup" атрибута <a> , а также data-role="popup" атрибут <div> . Затем укажите идентификатор для <div> , и установите href из <a> в соответствии с указанным идентификатором. Содержимое внутри <div> является фактическое содержание , которое появится , когда пользователь нажимает на ссылку.
Примечание: всплывающее окно <div> должен быть в пределах той же странице, что и ссылка.
пример
< a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline
ui-corner-all">Show Popup</a>
< div data-role="popup" id="myPopup" >
<p>This
is a simple popup.</p>
</div> Попробуй сам " Если вы хотите , чтобы некоторые дополнительные прокладки и поля в всплывающем окне, добавьте "ui-content" класс <div> :
Закрытие Popups
По умолчанию, всплывающие окна могут быть закрыты либо нажав вне всплывающем окне или нажав "Esc" ключ. Если вы не хотите, чтобы всплывающее окно замыкаем, щелкнув вне коробки, вы можете добавить data-dismissible="false" атрибут всплывающего окна ( на самом деле не рекомендуется). Вы также можете добавить кнопку для всплывающего окна, помещен вправо или влево. Для этого необходимо добавить ссылку кнопку с data-rel="back" атрибут в всплывающем контейнере и поместите кнопку с помощью классов CSS.
| Описание | пример |
|---|---|
| Правая кнопка закрытия | Попробуй |
| Левая кнопка закрытия | Попробуй |
| Undismissible всплывающих окон | Попробуй |
Позиционирование Popups
По умолчанию, всплывающие окна будут появляться непосредственно над щелкнутыми элементом. Для того, чтобы контролировать положение всплывающего окна, используйте данные-позиционно-приписывать по ссылке, которая используется для открытия всплывающего окна.
Есть три способа позиционирования всплывающего окна:
| значение атрибута | Описание |
|---|---|
| data-position-to="window" | Появится всплывающее окно по центру в пределах окна |
| data-position-to="#myId" | Всплывающие позиционируется над элементом с указанным #ID |
| data-position-to="origin" | По умолчанию. Всплывающие расположен непосредственно над щелкнутыми элемента |
пример
<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window" >Window</a>
<a href="#myPopup2" data-rel="popup"
class="ui-btn" data-position-to="#demo"> id="demo"</a>
<a href="#myPopup3"
data-rel="popup" class="ui-btn" data-position-to="origin" >Origin</a> Попробуй сам " Переходы
По умолчанию, всплывающие окна не имеют каких-либо эффектов перехода, добавленные к ним. Вы можете использовать любой из эффектов, которые мы ввели в главе "Transitions". Просто нанесите дата-переход = "значение" атрибута в ссылку , которая открывает всплывающее окно:
Демонстрация всех доступных эффектов перехода
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade" >Fade</a> Попробуй сам " Всплывающие Стрелки
Чтобы добавить стрелку границы всплывающего окна, используйте атрибут данных со стрелкой, и указать значение "l" (left), "t" (top), "r" (right) или "b" (bottom) :
пример
<a href="#myPopup" data-rel="popup" class="ui-btn">Open
Popup</a>
<div data-role="popup" id="myPopup" class="ui-content"
data-arrow="l" >
<p>There
is an arrow on my LEFT border.</p>
</div> Попробуй сам " Всплывающие Диалоги
Вы можете добавить стандартное диалоговое разметку в всплывающем окне (заголовок, содержание и колонтитул разметки):
пример
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog
Popup</a>
<div data-role="popup" id="myPopupDialog">
<div
data-role="header"><h1>Header Text..</h1></div>
<div
data-role="main" class="ui-content"><p>Some text..</p><a href="#">some
links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>
</div> Попробуй сам " Всплывающие фотографии
Кроме того, можно отображать изображения во всплывающем окне:
пример
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup">
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> Попробуй сам " Примечание: Всплывающие не идеальны , когда у вас есть целый набор изображений , которые вы хотите отобразить (как альбом с 500 изображений). Тем не менее, в течение нескольких изображений, которые должны быть просмотрены больше - они идеальны.
Всплывающие Overlay
Вы можете контролировать цвет фона позади всплывающего окна (самой страницы) с data-overlay-theme атрибута.
По умолчанию наложение является прозрачным. Использование data-overlay-theme="a" , чтобы добавить света и наложения данных оверлеев темы = "B" , чтобы добавить темные наложения:
пример
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup"
data-overlay-theme="b" >
<p>I
have a dark background behind me.</p>
</div> Попробуй сам " Эффект наложения часто используется на всплывающих фото:
пример
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup"
data-overlay-theme="b" >
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> Попробуй сам " Примечание: Вы также узнаете , как использовать всплывающие окна в формах и представлениях списка в последующих главах.