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

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

от steve , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от rudolph_senger , год назад

@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.

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

от willa_will , 15 дней назад

@steve 

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