JQuery Mobile Panel
JQuery Mobile панель будет опираться справа на левой стороне экрана.
Назначенных идентификатор элемента <div>, чтобы добавить данные-роль = "панель" свойство для создания панели.
Добавьте HTML-теги <DIV>, чтобы отобразить содержимое панели:
<div data-role="panel" id="myPanel"> <h2>面板标题..</h2> <p>文本内容..</p> </div>
Примечание: панель Тег должен быть помещен перед заголовком страницы, содержание, или после того, как состав дна.
Для того, чтобы получить доступ к панели, необходимо создать ссылку панели <div> идентификатор ссылки, нажмите на ссылку, чтобы открыть панель:
<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
Простые примеры панели
примеров
<DIV данных роли = "Панель " ID = "MyPanel">
<H2> Панель голова .. </ h2>
<P> Содержание панель .. </ p>
</ Div>
<Div данных роли = "заголовок">
<H1> стандартный заголовок страницы </ h1>
</ Div>
<Div данных роли = "основной" класс = "Пользовательский интерфейс-контент">
<P> Нажмите ниже, чтобы открыть панель. </ P>
<a href="#myPanel" class="ui-btn ui-btn-inline"> открытой панели </a>
</ Div>
<Div данных роли = "сноска">
<H1> в нижней части текста </ h1>
</ Div>
</ Div>
Попробуйте »
Закрыть панель
Вы можете нажать на панели или внешней области или нажмите клавишу Esc, чтобы закрыть раздвижные панели. Вы можете использовать данные- * атрибут, чтобы отключить и нажмите, чтобы закрыть раздвижные панели:
| свойство | значение | описание | примеров |
|---|---|---|---|
| Данные неотстранимый | правда | ложь | Определяет, будет ли панель, нажав на панель, чтобы закрыть внешнюю область. | пробовать |
| Данные салфетки-близко | правда | ложь | Указывает, может ли быть закрыто раздвижными. | пробовать |
Вы можете использовать кнопку, чтобы закрыть панель: нужно только добавить данные-отн = "закрыть" в панели свойств <DIV> в. Из соображений производительности, нам нужно закрыть ссылку HREF атрибут указывает на идентификатор страницы.
примеров
<H2> Панель голова .. </ h2>
<P> Панель некоторый текст .. </ p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline"> Закрыть панель </a>
</ Div>
Попробуйте »
индикаторная панель
Вы можете использовать свойство режима данных дисплея для управления панелью дисплея:
| Значение свойства | описание |
|---|---|
| данных дисплей = "наложение" | На дисплее панели на содержание |
| данных дисплей = "толчок" | Одновременно "толчок" и панель страницы. |
| данных дисплей = "показывают" | По умолчанию страница будет рисовать на экране, как слайд-шоу, будет отображаться панель |
примеров
<DIV данных роли = "Панель " ID = "revealPanel" данных дисплей = "показывают">
<DIV данных роли = "Панель " ID = "pushPanel" данных дисплей = "толчок">
Попробуйте »
Панель Расположение
По умолчанию, панель будет отображаться на левой стороне экрана. Если вы хотите на правой стороне экрана появится панель, вы можете указать данные-позицию = свойство "вправо".
Вы можете указать содержимое панели в соответствии с прокрутки страниц и прокрутки. По умолчанию панель вместе с прокруткой страницы (но содержание панели все еще находится в верхней части страницы). Если вам нужно реализовать содержимое панели находится в неподвижном состоянии с прокрутки страниц и прокрутки, вы можете добавить данных с фиксированным положением = "истинный" атрибут в панели:
примеров
Попробуйте »