页眉/页脚中的 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 中并使用浮动（添加类 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>