1

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

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

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

目前这甚至可能吗？

4

5 回答 5

7

就这么简单

<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>
于 2011-08-24T20:53:25.347 回答
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>
于 2011-09-20T15:50:12.020 回答
1

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

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

于 2010-11-10T10:01:43.567 回答
1

我就是这样做的。某些样式可能不是必需的，因为父 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>
于 2011-04-29T17:02:29.697 回答
0

为了在右侧使用您自己的图像按钮，您需要将 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;  
}
于 2011-01-31T23:31:57.053 回答