Кнопки группировки JQueryMobile в верхнем / нижнем колонтитуле

Question

Я видел документацию на сайте JQueryMobile, в которой показано, как группировать ссылки в верхнем / нижнем колонтитуле вместе.Я также видел документы, которые позволяют размещать ссылки конкретно в поле слева и / или справа от тега заголовка.Я НЕ видел никаких документов о том, как их объединить

В основном я хочу

<div data-role="header">
  <a href="#" data-icon="gear">left 1</a>
  <a href="#" data-icon="gear">left 2</a>
  <h1>Page Title</h1>
  <a href="#" data-icon="gear">right 1</a>
  <a href="#" data-icon="gear">right 2</a>
  <a href="#" data-icon="gear">right 3</a>
</div>

и чтобы это выглядело как

 [left 1][left 2]           Page Title           [right 1][right 2][right 3]

Я попытался обернутьссылки в div и использование float (добавление класса (ов) ui-btn-left/right также, кажется, работает), однако теги привязки остаются как есть, и стили, определенные каркасом, никогда не применяются (все, что я вижу, это обычные ссылки,нет причудливых кнопок)

Может кто-нибудь сказать мне, если я пропускаю атрибут?или если есть контейнерный класс, который я могу использовать, который не будет блокировать кнопки для применения их новой разметки?

---

Редактировать: Приведенный выше код будет в настоящее время вывод

 [left 1]           Page Title           [left 2]
 [right 1][right 2][right 3]

Answer 1

Решение:

Используйте контейнер для переноса, чтобы зафиксировать положение влево или вправо (я использую класс ui-btn-[left/right]), а затем принудительно заставьте ссылку принять разметку с помощью data-role="button"

Так выглядит

<div data-role="header">
  <div class="ui-btn-left">
    <a href="#" data-role="button" data-icon="gear">left 1</a>
    <a href="#" data-role="button" data-icon="gear">left 2</a>
  </div>
  <h1>Page Title</h1>
  <div class="ui-btn-right">
    <a href="#" data-role="button" data-icon="gear">right 1</a>
    <a href="#" data-role="button" data-icon="gear">right 2</a>
    <a href="#" data-role="button" data-icon="gear">right 3</a>
  </div>
</div>

Answer 2

используйте класс "ui-btn-right" / "ui-btn-left"

Обновление использования обёрток для нескольких кнопок

<div class="ui-btn-left">
    <a href="#" data-role="button" data-icon="gear">left 1</a>
    <a href="#" data-role="button" data-icon="gear">left 2</a>
  </div>

Answer 3

 <div data-role="header">
  <div class="ui-btn-left" data-role="controlgroup">
    <a href="#" data-role="button" data-icon="gear">left 1</a>
    <a href="#" data-role="button" data-icon="gear">left 2</a>
  </div>
  <h1>Page Title</h1>
  <div class="ui-btn-right" data-role="controlgroup">
    <a href="#" data-role="button" data-icon="gear">right 1</a>
    <a href="#" data-role="button" data-icon="gear">right 2</a>
    <a href="#" data-role="button" data-icon="gear">right 3</a>
  </div>
</div>