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

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