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

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

Grouped buttons网站上的

jQuerymobile Framework。

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

标题中有多个按钮

5 个答案: