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>

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

3 个答案: