Последние учебники веб-разработки
 

jQuery Mobile Панели


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" атрибут.

пример

<div data-role="panel" id="myPanel" data-position="right" >
Попробуй сам "

Можно также указать, каким образом следует расположить содержание третейской группы в соответствии с остальной частью страницы, когда пользователь начинает прокручивать. По умолчанию, панель будет прокручиваться со страницей (но содержание этой группы будет оставаться на верхней части страницы). Если вы всегда хотите, чтобы отобразить содержимое панели, независимо от того , как далеко вы прокрутите страницу, добавьте data-position-fixed="true" атрибут к панели:

пример

<div data-role="panel" id="myPanel" data-position-fixed="true" >
Попробуй сам "