标题中的多个按钮答案

【问题标题】：Multiple buttons in the header标题中的多个按钮
【发布时间】：2011-05-07 18:50:03
【问题描述】：

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

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

其中[b1]、[b2] 和[b3] 是标题中的小图像按钮。

目前这可能吗？

【问题讨论】：

标签： javascript jquery css jquery-mobile

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

好像有可能，看看这个链接：

Grouped buttons 在jQuerymobile Framework 网站上。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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;  
}

【讨论】：