标题右侧的多个按钮

时间:2011-05-01 15:06:26

标签: header jquery-mobile

我想在标题栏的右侧有多个按钮。 docs表示您可以使用DIV进行自定义,但是当我这样做时,按钮没有正常的样式。有什么建议吗?

5 个答案:

答案 0 :(得分:32)

上面的示例在标题上放置了多个按钮,但它们都位于标题的左侧。我认为您可以将控件组中的按钮分组,并将控件组定位到标题的右侧。也许是这样的:

 
  <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">  
     //have your button here
  </div>

希望这有帮助。

答案 1 :(得分:12)

这就是我做的,看起来很干净。

HTML

<div id="myHeader" data-role="header" data-theme="a">
    <span class="ui-title"></span>
    <div class="ui-btn-right">
        <a id="myButton1" class="headerButton" href="#" data-role="button"></a>
        <a id="myButton2" class="headerButton" href="#" data-role="button"></a>
    </div>
</div>

CSS

.headerButton {
    float: left;
    margin-right: 5px!important;
}

答案 2 :(得分:8)

我在页脚(Shown Here)中看到过这种情况,可能会为您提供标题或工具栏的提示

答案 3 :(得分:4)

您可以使用网格类。

<div class="ui-grid-a ui-btn-right">
        <div class="ui-block-a" ><a href="#" data-role="button" data-inline="true" >Button1</a></div>
        <div class="ui-block-b" ><a href="#" data-role="button" data-inline="true" >Button2</a></div>
</div>

答案 4 :(得分:0)

 <a href="#" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-icon-left 
    ui-btn-corner-all ui-shadow" data-rel="back" data-icon="cancel" 
    data-theme="a">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">Cancel</span>
      <span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
    </span>
 </a>