javascript - 标题中的多个按钮

Question

我试图在 jQuery Mobile 框架中获得以下效果：

|-------------------------------------------------|
|[button1]      HeaderText/Image  [b1] [b2] [b3]  |
|-------------------------------------------------|

其中[b1]和是页眉[b2]中[b3]的小图像按钮。

目前这甚至可能吗？

Answer 1

就这么简单

<div class="ui-btn-right">
    <a href="index.html" data-role="button" data-iconpos="notext"></a>
    <a href="index.html" data-role="button" data-iconpos="notext"></a>
    <a href="index.html" data-role="button" data-iconpos="notext"></a>
</div>

Answer 2

我过去曾遇到过这方面的麻烦。诀窍是，强制所有链接成为data-role="button"并将所述链接包装在一个容器中class="ui-btn-[left/right]" （分别）这会处理传统的标题按钮定位和标记。

<div data-role="header">
    <div class="ui-btn-left">
        <a href="#" data-role="button">Button1</a>
    </div>
    <h1>HeaderText/Image</h1>
    <div class="ui-btn-right">
        <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">B1</a>
        <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">B2</a>
        <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">B3</a>
    </div>
</div>

Answer 3

似乎有可能，请查看此链接：

jQuerymobile 框架网站上的分组按钮。

Answer 4

我就是这样做的。某些样式可能不是必需的，因为父 div 上使用的类就足够了。

<div data-type="horizontal" style="top:10px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right"> 
        <a href="index.html" data-role="button" data-icon="settings" data-ajax="false">Team Call</a>
        <a href="index.html" data-role="button" data-icon="delete" data-ajax="false">Logout</a> 
    </div>

Answer 5

为了在右侧使用您自己的图像按钮，您需要将 div 浮动或定位到右侧，然后添加您的按钮。

然后，您需要覆盖这些特定按钮的 jQuery 移动样式，以防止它们获得库自动添加的圆形渐变按钮样式。

#header {
    float: right;
}

#header .ui-btn-up-b,
#header .ui-btn-hover-b, 
#header .ui-btn-down-b 
#header .ui-btn-active { 
    border: 0px; 
    background: none;  
}