添加一個開關到頭jQuery Mobile

Question

我想添加一個開關到頭。它工作正常，但開關的下一行，我希望它的標題

典權：

<div data-role="page" id="moreevents"> 
    <div data-role="header" data-position="fixed"> 
     <a href="#defaultclub" data-icon="arrow-l" data-theme="b" onclick="getClubData(curClub)" id="backtoclub">Back</a> 
     <h1>All Events</h1> 
     <div align="right"> 
      <select name="switch" id="alleventsswitch" data-role="slider"> 
      <option value="off">No Past</option> 
      <option value="on">Past</option> 
      </select> 
     </div> 
    </div> 
</div> 

工作實例：

http://jsfiddle.net/Y9ntF/

Answer 1

點擊這裏DEMO http://jsfiddle.net/yeyene/Y9ntF/1/

您需要減少默認的h1寬度和餘量以給出空間switch。

HTML

<div data-role="page" id="moreevents"> 
    <div data-role="header" data-position="fixed"> 
     <a href="#defaultclub" data-icon="arrow-l" data-theme="b" onclick="getClubData(curClub)" id="backtoclub">Back</a> 
     <h1 id="myTitle">All Events</h1> 
     <span id="mySelect"> 
      <select name="switch" id="alleventsswitch" data-role="slider"> 
      <option value="off">No Past</option> 
      <option value="on">Past</option> 
      </select> 
     </span> 
    </div> 
</div> 

CSS

#myTitle{ 
    float:left; 
    width:20%; 
    margin: .6em 0 .8em 40%; 
} 
#mySelect{ 
    float:right; 
    z-index: 1; 
}