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

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

并为显示为

[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]

来源

2011-09-20 rlemon

我发现的唯一解决方案是物理写出按钮所需的标记并将其放置在'float'容器中。我不喜欢编写所有额外的html .. – rlemon

这应该开箱即用。你可以尝试将'href'属性设置为有效的URL而不是'＃'吗？这可能是工具包不改变链接的原因。 –

看到我上面的更新。注意：改变'href'属性什么都不做。:(:) – rlemon

解决方案：

使用的包装容器以固定的位置向左或右对齐（我用的是类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>

来源

2011-09-20 15:39:03 rlemon

你可以给我-2点使用类“ui-btn-right”/“ui-btn-left”我已经测试过它只有一个按钮在每边，所以我没有测试多个按钮:)。 Thnx无论如何，我学会了一些 – Dynamikus

更新你的答案。它仍然是错误的;）_also，你不能改变你的投票（除非答案更新）_ – rlemon

使用类 “UI-BTN-右”/ “UI-BTN左”

更新使用多个按钮的包装

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

来源

2011-09-20 15:13:54 Dynamikus

然后所有的链接层叠在彼此之上。使用这个类只适用于一个按钮或一个包含所有按钮的容器。 ..容器解决方案失败，因为在标记按钮时框架错过了链接。 – rlemon

ups对不起没有时间测试我正在尝试。:( – Dynamikus

这使事情变得更糟了。再次，按钮标记未被框架应用并且所有的位置都是左侧的，右侧没有任何东西 – rlemon

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

来源

2013-09-16 09:26:41

工程。谢谢。您还可以添加一个像这样的CSS规则： div.ui-btn-left a { \t padding：0; } div.ui-btn-right a { \t padding：0; } ...所以它看起来好多了。 – 2014-05-05 22:51:07

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

回答

相关问题