jquerymobile設計像IOS工具欄

Question

我知道這是愚蠢的問題，但我沒有找到答案 我想要設計這個。顏色並不重要 和

我已經做了迄今爲止

這裏是代碼

<!-- Filter Toolbar --> 
      <div data-role="header"> 
       <div data-role="navbar" data-iconpos="left"> 
        <ul> 
         <li><a type="button" id="filterdate" >Date</a></li> 
         <li><a type="button" id="filtermember" class="ui-btn-active">Member</a></li> 
         <li><a type="button" id="filtersubject">Subject</a></li> 

        </ul> 
       </div> 

      </div> 
      <!-- /Filter Toolbar --> 
     <div data-role="footer"> 
       <div data-role="navbar" data-mini="true" data-iconpos="left"> 
        <ul> 
         <li> <a href="#" data-icon="edit">Edit</a></li> 

         <li><a href="#" data-icon="refresh" data-iconpos="notext">Refresh</a></li> 
         <li> 
          <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true"></a> 

          <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true"></a> 
         </li> 

        </ul> 
       </div><!-- /navbar --> 
      </div><!-- /footer --> 

Answer 1

您將有更動頭按鈕組的寬度，但其他然後，它看起來像你張貼的照片。減去顏色...

<div data-role="header"> 
    <div data-role="controlgroup" data-type="horizontal"> 
     <a href="#" data-role="button" class="headerButton">Member</a> 
     <a href="#" data-role="button" class="headerButton">Subject</a> 
     <label for="select-choice-0" class="select">Date</label> 
     <select name="select-choice-0" id="select-choice-0" class="headerButton"> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
      <option value="3">Option 3</option> 
      <option value="4">Option 4</option> 
     </select> 
    </div> 
</div> 


<div data-role="footer"> 
    <div data-role="navbar" data-mini="true" data-iconpos="left"> 
     <a href="#" data-icon="edit">Edit</a> 
     <div data-role="controlgroup" data-type="horizontal" style="float: right;"> 
      <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left" data-theme="a">&nbsp;</a> 
      <a data-role="label">1</a> 
      <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="a" data-inline="true">&nbsp;</a> 
     </div> 
    </div><!-- /navbar --> 
</div><!-- /footer -->