Jquery Мобильные панели
Панели в JQuery Mobile выскользнет из левой или правой части экрана с дополнительным контентом.
Чтобы создать панель, добавить data-role="panel" атрибут к <div> элемент и указать id .
Добавьте любой HTML - разметку внутри этого <div> , который вы хотите отобразить на панели:
<div data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>Примечание: Панель разметки должен быть помещен до или после заголовка, содержания и колонтитула внутри страницы JQuery Mobile.
Для того, чтобы получить доступ к панели, создать ссылку , которая указывает на id панели <div> . Когда пользователь нажимает на ссылку, то откроется панель:
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>Вот основной пример панели:
пример
<div data-role="page" id="pageone">
<div
data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
</div>
<div
data-role="header">
<h1>Standard Page Header</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the button below to open the Panel.</p>
<a
href="#myPanel" class="ui-btn ui-btn-inline">Open
Panel</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div> Попробуй сам " Закрытие панели
Вы можете закрыть панель, щелкнув вне его, проводя или нажав Esc ключ. Вы можете отключить щелчок и считывания функций путем добавления дополнительных data-* атрибуты панели <div> :
| Атрибут | Стоимость | Описание | пример |
|---|---|---|---|
| data-dismissible | true | false | Определяет, будет ли панель можно закрыть, нажав вне его, или нет | Попробуй |
| data-swipe-close | true | false | Указывает ли панель может быть закрыта путем считывания, или нет | Попробуй |
Вы также можете закрыть панель с помощью кнопки: Просто добавьте ссылку внутри панели <div> с data-rel="close" атрибут прилагается к нему. И по причинам совместимости, вы также должны указать href атрибут , чтобы указать на идентификатор страницы пользователь должен перейти к при закрытии панели:
пример
<div
data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
<a
href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div> Попробуй сам " Панель дисплея
Вы можете управлять режимом отображения панели с атрибутом данных дисплея:
| значение атрибута | Описание |
|---|---|
| data-display="overlay" | Отображает панель над содержанием |
| data-display="push" | Анимирует как панель и страницу в то же время |
| data-display="reveal" | По умолчанию. Панель будет сидеть под страницу и показать, как страница ускользает |
пример
<div data-role="panel" id="overlayPanel" data-display="overlay" >
<div
data-role="panel" id="revealPanel" data-display="reveal" >
<div
data-role="panel" id="pushPanel" data-display="push" > Попробуй сам " Позиционирование Панели
По умолчанию, панели будут появляться на левой стороне экрана. Для панели появится на правой стороне экрана, указать data-position="right" атрибут.
Можно также указать, каким образом следует расположить содержание третейской группы в соответствии с остальной частью страницы, когда пользователь начинает прокручивать. По умолчанию, панель будет прокручиваться со страницей (но содержание этой группы будет оставаться на верхней части страницы). Если вы всегда хотите, чтобы отобразить содержимое панели, независимо от того , как далеко вы прокрутите страницу, добавьте data-position-fixed="true" атрибут к панели: