Jquery mobile 页眉/页脚中的JQueryMobile分组按钮

我在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>

我曾尝试将链接包装在div中并使用float（添加类）

ui btn left/right

似乎也能工作），但是锚定标记保持原样，框架定义的样式从未应用过（我所看到的只是常规链接，没有奇特的按钮）

有人能告诉我我是否缺少一个属性吗？或者，如果我可以使用一个容器类，它不会阻止按钮应用其新标记

---

编辑： 上述代码将当前输出

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

使用类“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>

使用类“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>

解决方案：

使用包装容器固定左对齐或右对齐的位置（我使用的是类

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>

页面标题

解决方案：

使用包装容器固定左对齐或右对齐的位置（我使用的是类

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>

页面标题

页面标题

页面标题

我找到的唯一解决方案是实际写出按钮所需的标记，并将其放入

float

容器中。我不喜欢写所有那些额外的html..这应该是现成的。您是否可以尝试将

href

属性设置为有效URL，而不是

#

？这可能就是工具箱不转换链接的原因。请参阅上面的“我的更新”。注意：更改

href

属性没有任何作用..：（我找到的唯一解决方案是实际写出按钮所需的标记，并将其放在

float

容器中。我不喜欢编写所有额外的html。这应该是现成的。你能尝试将

href

属性设置为有效URL而不是

#

吗？这可能是原因所在。）son为什么工具箱不转换您的链接。请参阅上面我的更新。注意：更改

href

属性没有任何作用..：（然后所有的链接层相互覆盖。使用所述类仅在应用于单个按钮或包含所有按钮的容器时有效。并且..如前所述..容器解决方案失败，因为框架在标记按钮时丢失了链接。ups抱歉，没有时间测试我正在尝试。：（这让事情变得更糟。同样，框架没有应用按钮标记，并且定位都是向左的。右侧没有。更正：应用了按钮标记。但是定位仍然很差。两组按钮和标题相互阻塞并强制换行。因此line1:buttons1，line2：标题，第3行：按钮2（左对齐）请参阅下面我的答案。感谢您的帮助和时间。然后，所有链接彼此重叠。使用所述类仅在应用于单个按钮或包含所有按钮的容器时有效。并且..如前所述..容器解决方案失败，因为框架在标记按钮时遗漏了链接。ups抱歉，没有时间测试我正在努力（这让事情变得更糟。同样，框架没有应用按钮标记，并且定位都是向左的。右侧没有。更正：应用了按钮标记。但是定位仍然很差。两组按钮和标题相互阻塞并强制换行。因此line1:buttons1，line2：标题，第3行：按钮2（左对齐）见下面我的答案。谢谢你的帮助和时间。你能给我-2分吗？使用类“ui btn right”/“ui btn left”我只测试了每侧一个按钮，所以我没有测试多个按钮：）.Thnx无论如何，我学到了一些东西更新你的答案。它仍然是错误的；）此外，你不能改变你的投票（除非答案更新）你能给我-2分吗？使用类“ui btn right”/“ui btn left”我只测试了每边一个按钮，所以我没有测试多个按钮：）.Thnx无论如何，我学到了一些东西更新你的答案。它仍然是错误的；）而且，你不能改变你的投票（除非答案更新）。谢谢。你也可以添加这样的css规则：div.ui-btn-left a{padding:0；}div.ui-btn-right a{padding:0；}…所以看起来好多了。谢谢。你也可以添加这样的css规则：div.ui-btn-left a{padding:0；}div.ui-btn-right a{padding:0；}…这样看起来好多了。