Как создать панель навигации в jQuery Mobile?

Пользователь

от steve , в категории: JavaScript , 2 месяца назад

Как создать панель навигации в jQuery Mobile?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от rudolph_senger , 3 дня назад

@steve 

Для создания панели навигации в jQuery Mobile нужно использовать специальные элементы и классы.


Пример кода для создания панели навигации:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
  Название страницы
  
  




  
    Одна ссылка
    Другая ссылка
  




  Содержимое страницы


В этом примере использованы следующие элементы и классы:

  • data-role="header" - определяет шапку страницы;
  • data-icon="bars" - определяет иконку кнопки-ссылки для открытия боковой панели;
  • data-iconpos="notext" - определяет позицию иконки (без текста);
  • class="ui-btn-right" - определяет класс для выравнивания кнопки-ссылки вправо;
  • data-role="panel" - определяет боковую панель;
  • id="mypanel" - определяет идентификатор для боковой панели;
  • data-position="right" - определяет расположение боковой панели (справа);
  • data-display="overlay" - определяет тип отображения боковой панели (выдвигающаяся поверх содержимого страницы);
  • data-role="listview" - определяет список ссылок внутри боковой панели;
  • data-inset="true" - определяет внутренний отступ для списка ссылок;
  • data-rel="close" - определяет действие при нажатии на ссылку - закрытие боковой панели.


Также можно добавить другие ссылки и элементы в шапку страницы или внутри основного содержимого страницы, например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
  Название страницы
  
  
  







  Создать новый документ
  
    Одна ссылка
    Другая ссылка
    Еще одна ссылка
  


В этом примере добавлена еще одна кнопка-иконка слева в шапку страницы, а в основном содержимом страницы - ссылка и список ссылок. Для них использованы классы ui-btn и ui-icon-*, которые определяют стиль кнопок и иконок в jQuery Mobile.