Виджет навигационной панели

Виджет навигационной панеливерсия добавлена: 1.0

Описание: Создаёт виджет навигационной панели

Быстрый переходПримеры

Параметры

Методы

События

create

Простая навигационная панель

jQuery Mobile имеет очень базовый виджет навигационной панели, который полезен для предоставления до 5 кнопок с необязательными иконками в панели, обычно в заголовке или футере. Также есть вариант постоянной навигационной панели, который работает больше как панель вкладок, остающаяся закреплённой при перемещении по страницам.

Навигационная панель кодируется как неупорядоченный список ссылок, заключённых в элемент контейнера, который имеет атрибут data-role="navbar". Это пример навигационной панели с двумя кнопками:

<div data-role="navbar">
  <ul>
    <li><a href="a.html">One</a></li>
    <li><a href="b.html">Two</a></li>
  </ul>
</div><!-- /navbar -->

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

Чтобы установить элемент в активное состояние при инициализации навигационной панели, добавьте class="ui-btn-active" к соответствующему якорю в вашей разметке. Дополнительно добавьте класс ui-state-persist, чтобы фреймворк восстановил активное состояние каждый раз, когда страница отображается, пока она существует в DOM. Пример ниже демонстрирует навигационную панель с активным элементом "Один":

<div data-role="navbar">
  <ul>
    <li><a href="a.html" class="ui-btn-active ui-state-persist">One</a></li>
    <li><a href="b.html">Two</a></li>
  </ul>
</div><!-- /navbar -->

Обратите внимание, что это относится только к навигационным панелям, которые находятся внутри страницы. Если вы используете истинную постоянную панель инструментов, которая находится вне страницы и хотите установить текущий элемент в активное состояние, вам нужно добавить скрипт, который добавит класс class="ui-btn-active".

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

Добавление третьего элемента автоматически сделает каждую кнопку 1/3 ширины окна браузера:

Добавление четвёртого элемента автоматически сделает каждую кнопку 1/4 ширины окна браузера:

Навигационная панель достигает максимального значения с 5 элементами, каждый из которых занимает 1/5 ширины окна браузера:

Если добавлено более 5 элементов, навигационная панель будет просто переноситься на несколько строк:

Навигационные панели с 1 элементом будут отображаться просто как 100%.

Навигационные панели в заголовках

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

Навигационные панели в футерах

Если вы хотите добавить навигационную панель в нижнюю часть страницы, чтобы она работала больше как панель вкладок, просто оберните навигационную панель в контейнер с data-role="footer".

<div data-role="footer">
  <div data-role="navbar">
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div><!-- /navbar -->
</div><!-- /footer -->

Тема

Виджет навигационной панели использует фреймворк CSS jQuery Mobile для настройки своего внешнего вида. Если нужна специфическая стилизация навигационной панели, можно использовать следующие имена классов CSS для переопределений или в качестве ключей для опции classes:

ui-navbar: Внешний контейнер для виджета навигационной панели
- ui-navbar-row: Строки систем навигационной панели. Это представляет каждую строку навигационной панели, кроме первой
- ui-navbar-row-n: (n+1) строка системы навигационной панели, кроме первой строки

Иконки в навигационных панелях

Иконки можно добавить к элементам навигационной панели, добавив атрибут data-icon, указывающий стандартную мобильную иконку к каждому якорю. По умолчанию иконки добавляются над текстом (data-iconpos="top"). Следующие примеры добавляют иконки к навигационной панели в футере.

Положение иконки устанавливается в контейнере навигационной панели, а не для отдельных ссылок для визуальной согласованности. Например, чтобы разместить иконки под метками, добавьте атрибут data-iconpos="bottom" в контейнер навигационной панели.

<div data-role="navbar" data-iconpos="bottom">

Это приведёт к выравниванию иконок снизу:

Положение иконки можно установить в data-iconpos="left":

Или положение иконки можно установить в data-iconpos="right":

Использование наборов иконок сторонних разработчиков

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

Иконки Джозефом Уэном / glyphish.com. Лицензировано по лицензии Creative Commons Attribution 3.0 United States.

Тема навигационных панелей

Навигационные панели наследуют тему подложки от родительского контейнера, как и кнопки. Если навигационная панель расположена в панели инструментов заголовка или футера, она будет наследовать стандартную тему панели инструментов "a", если вы не установили это в разметке.

Вот несколько примеров навигационных панелей в различных темах контейнера, которые автоматически наследуют букву темы родителя. Обратите внимание, что в этих примерах вместо использования атрибута data-theme, мы вручную добавляем классы подложки, чтобы применить подложку тела (ui-body-a) и класс для добавления стандартной отступы тела (ui-body), но наследование работает одинаково:

Чтобы установить цвет темы для элемента навигационной панели, добавьте атрибут data-theme к отдельным ссылкам и укажите тему подложки. Обратите внимание, что применение темы подложки к контейнеру навигационной панели не поддерживается.

Параметры

classes

Тип: Объект

По умолчанию:

{}

Укажите дополнительные классы для добавления к элементам виджета. Любые классы, указанные в разделе Тема, могут использоваться в качестве ключей для переопределения их значений. Чтобы узнать больше об этом параметре, ознакомьтесь со статьей учебником о параметре classes.

Примеры кода:

Инициализируйте навигационную строку с указанным параметром classes, изменяя тему для класса ui-navbar:

$( ".selector" ).navbar({
  classes: {
    "ui-navbar": "highlight"
  }
});

Получите или задайте свойство параметра classes, после инициализации, здесь читая и изменяя тему для класса ui-navbar:

// Getter
var themeClass = $( ".selector" ).navbar( "option", "classes.ui-navbar" );
 
// Setter
$( ".selector" ).navbar( "option", "classes.ui-navbar", "highlight" );

defaults

Тип: Булево

По умолчанию: false

Установка этого параметра в true указывает, что у других параметров виджета есть значения по умолчанию, и заставляет код автоматического повышения jQuery Mobile опустить шаг, в котором он извлекает значения параметров из атрибутов данных. Это может улучшить время запуска.

Этот параметр также доступен в виде атрибута данных: data-defaults="true".

Примеры кода:

Инициализируйте навигационную строку с указанным параметром defaults:

$( ".selector" ).navbar({
  defaults: true
});

Получите или задайте параметр defaults, после инициализации:

// Getter
var defaults = $( ".selector" ).navbar( "option", "defaults" );
 
// Setter
$( ".selector" ).navbar( "option", "defaults", true );

defaults

Тип: Булево

По умолчанию: false

Этот параметр также доступен в виде атрибута данных: data-defaults="true".

Примеры кода:

Инициализируйте навигационную строку с указанным параметром defaults:

$( ".selector" ).navbar({
  defaults: true
});

Получите или задайте параметр defaults, после инициализации:

// Getter
var defaults = $( ".selector" ).navbar( "option", "defaults" );
 
// Setter
$( ".selector" ).navbar( "option", "defaults", true );

disabled

Тип: Булево

По умолчанию: false

Отключает навигационную строку, если установлено значение true.

Этот параметр также доступен в виде атрибута данных: data-disabled="true".

Примеры кода:

Инициализируйте навигационную строку с указанным параметром disabled:

$( ".selector" ).navbar({
  disabled: true
});

Получите или задайте параметр disabled, после инициализации:

// Getter
var disabled = $( ".selector" ).navbar( "option", "disabled" );
 
// Setter
$( ".selector" ).navbar( "option", "disabled", true );

disabled

Тип: Булево

По умолчанию: false

Отключает навигационную строку, если установлено значение true.

Этот параметр также доступен в виде атрибута данных: data-disabled="true".

Примеры кода:

Инициализируйте навигационную строку с указанным параметром disabled:

$( ".selector" ).navbar({
  disabled: true
});

Получите или задайте параметр disabled, после инициализации:

// Getter
var disabled = $( ".selector" ).navbar( "option", "disabled" );
 
// Setter
$( ".selector" ).navbar( "option", "disabled", true );

iconpos

Тип: Строка

По умолчанию: "top"

Позиционирует значок в кнопке. Возможные значения: слева, справа, сверху, снизу, нет, notext. Значение notext отобразит кнопку только со значком без текстовой информации.

<div data-role="navbar" data-iconpos="bottom">

initSelector

Тип: Селектор

По умолчанию: See below

Значение по умолчанию initSelector для виджета навигационной строки:

":jqmData(role='navbar')"

Примечание: Этот параметр устарел в версии 1.4.0 и будет удален в версии 1.5.0.
Начиная с jQuery Mobile 1.4.0, параметр initSelector больше не является параметром виджета. Вместо этого он объявлен непосредственно в прототипе виджета. Таким образом, вы можете указать пользовательское значение, обработав событие mobileinit и переопределив initSelector в прототипе:

$( document ).on( "mobileinit", function() {
  $.mobile.navbar.prototype.initSelector = "div.custom";
});

Примечание: Не забудьте прикрепить обработчик mobileinit после загрузки jQuery, но перед загрузкой jQuery Mobile, так как событие срабатывает в процессе загрузки jQuery Mobile.

Значение этого параметра — строка селектора jQuery. Фреймворк выбирает элементы на основе значения этого параметра и инициализирует виджеты навигационной строки на каждом из полученного списка элементов.

(устаревшая версия: 1.4.0)

События

create()Тип: `navbarcreate`

срабатывает при создании навигационной строки

Этот метод не принимает аргументов.

Примечание: Объект ui пустой, но включен для согласованности с другими событиями.

Примеры кода:

Инициализируйте навигационную строку со значением обратного вызова create:

$( ".selector" ).navbar({
  create: function( event, ui ) {}
});

Привяжите обработчик событий к событию navbarcreate:

$( ".selector" ).on( "navbarcreate", function( event, ui ) {} );

Пример:

Базовый пример навигационной строки

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>navbar demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="page1">
  <div data-role="header">
    <h1>jQuery Mobile Example</h1>
  </div>
  <div role="main" class="ui-content">
    <p>Some Content here</p>
  </div>
  <div data-role="footer">
    <div data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active">One</a></li>
        <li><a href="#">Two</a></li>
      </ul>
    </div><!-- /navbar -->
  </div><!-- /footer -->
</div><!-- /page -->
</body>
</html>

Виджет навигационной панели