Multiple buttons on right hand side of Header

I would like to have more than 开发者_运维知识库one button on the right side of the Header bar. The docs say you can customize using a DIV, but when I do that the buttons do not have their normal style. Any advice?

The above example puts more than buttons on the header but they are all positioned to the left of the header. I think you can group your buttons in a controlgroup and position the control the group to the right of the header. Maybe something like this:

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

Hope this helps.

This is how I did it, seems clean.

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

I've seen this done in the footer (Shown Here), might give you an idea for the header or toolbar

You can use the grid class.

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

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