在JQuery Mobile中添加許多按鈕到標頭中

Question

我知道我們可以在JQuery Mobile應用程序的標頭中添加左右按鈕。

但是我們可以在標題部分本身有更多的按鈕或控件嗎？

Answer 1

我想我有一個更好的解決方案，

<header data-role ="header" data-theme="b"> 
    <h1 class="ui-title" role="heading">Staff</h1> 
    <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal"> 
    <a href="#" data-role="button" data-icon="gear">filter</a> 
     <a href="#" data-role="button" data-icon="grid">move</a> 
    </div> 
</header> 

截圖;

Answer 2

這可能是更容易地創建一個自定義導航欄，而不是修改標題欄，在這裏對文檔：http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html

Answer 3

沒有，有2個硬限制，據我已經找到。我能夠想出的最好的辦法是獲得另一個無風格的鏈接。然而，navbars - 在我的一個項目中，我需要在標題區域有一些按鈕，我在它下面放置了一個導航欄，並且對結果感到滿意。

他們在這裏詳細解釋說：

http://jquerymobile.com/test/docs/toolbars/docs-navbar.html

Answer 4

我能夠通過下面的代碼來實現這一目標：

<div data-role ="header" data-theme="b"> 
<a href="#" data-role="button" data-theme="b" class="ui-btn-left" id="BackButtonHandler">Prev</a> 
<div data-role="controlgroup" data-type="horizontal" style="margin-left:75px;margin-top:5px;" > 
    <a href="index.html" data-role="button" data-icon="arrow-l" >P.Week</a> 
    <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">N.Week</a> 
    </div> 
<a href="#" data-role="button" data-theme="b" class="ui-btn-right" id="BackButtonHandler">Next</a> 
</div> 

Answer 5

這可能幫助：

<div class="ui-btn-right"> 
    <!-- Home Button --> 
    <a href="index.html" data-role="button" 
     data-icon="refresh" data-iconpos="notext" data-direction="reverse" data-corners="true" 
     data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Refresh"> 
    </a> 
    <!-- Home Button --> 
    <a href="index.html" data-role="button" 
     data-icon="home" data-iconpos="notext" data-direction="reverse" data-corners="true" 
     data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Home"> 
    </a> 
</div> 

這給我那些漂亮的圓形按鈕，兩個並排在右側。

就像在移動文檔。

工程在1.1.1，沒試過最新RC

Answer 6

關於這個信息：

你可以在這裏找到： http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png

您可以使用此代碼：

<style type="text/css">    
    @media all{ 
     .my-header-grid.ui-grid-b .ui-block-a { width: 30%; } 
     .my-header-grid.ui-grid-b .ui-block-b { width: 40%; } 
     .my-header-grid.ui-grid-b .ui-block-c { width: 30%; } 
     } 
    }  
    </style> 
    <div class="my-header-grid ui-grid-b" data-theme="a"> 
     <div class="ui-block-a ui-bar-a" data-theme="a"> 
      <div align="left" style="padding-left:5px;padding-top:3px;height:33px;height:40px;"> 
       <a href="#" class="ui-btn-left" rel="external" data-mini="true" data-role="button" data-icon="back" data-theme="a">Back</a> 
       <a href="#" class="ui-btn-right" data-role="button" data-icon="gear" data-iconpos="notext">Edit</a> 
      </div> 
     </div> 
     <div class="ui-block-b ui-bar-a"> 
      <div align="center" style="padding-top:3px;height:33px;text-align:center;height:40px;"> 
      <div style="padding-top:7px;"> 
       <article role="heading" aria-level="1">expand </article> 
      </div> 
      </div> 
     </div> 
     <div class="ui-block-c ui-bar-a"> 
      <div align="right" style="padding-top:3px;height:33px;height:40px;"> 
      <a href="#" class="ui-btn-left" data-role="button" data-icon="plus" data-iconpos="notext">Add</a> 
      <a href="#" class="ui-btn-right" rel="external" data-mini="true" data-role="button" data-icon="refresh" data-theme="a">Refresh</a>       
      </div> 
     </div> 
    </div><!-- /grid-b --> 

如果任何機會你的編程無線th c＃mvc razor引擎不要忘記用2 @就像所以@@ media一樣編寫css媒體標籤，因爲剃鬚刀引擎會將2 @視爲一個整體。

你看，可與所有在這個環節這裏顯示的設計的玩法：
http://jsfiddle.net/yakirmanor/BAat8/

---

IV增加了一些聯繫，但我建議你會這樣說的：
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/

簡單着牀是：

<header data-role ="header" data-theme="a"> 
     <a data-icon="back" href="/" rel="external">Back</a> 
     <h1 class="ui-title" role="heading">Staff</h1> 
     <a class="ui-btn-right" data-icon="back" href="#" rel="external">Refresh</a> 
    </header> 

或本：

<div data-role="header" data-theme="b"> 
     <a data-icon="back" href="/" rel="external">Back</a> 
     <h1 class="ui-title" role="heading">Staff</h1> 
     <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">   
      <a href="#" data-role="button" data-icon="gear">filter</a> 
      <a href="#" data-role="button" data-icon="grid">move</a> 
     </div> 
    </div> 

或本：

<div data-role="header" data-theme="e"> 
     <div class="ui-btn-left" data-role="controlgroup" data-type="horizontal"> 
      <a href="#" data-role="button" data-icon="gear">filter</a> 
      <a href="#" data-role="button" data-icon="grid">move</a> 
     </div> 
     <h1 class="ui-title" role="heading">Staff</h1> 
     <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal"> 
      <a href="#" data-role="button" data-icon="gear">filter</a> 
      <a href="#" data-role="button" data-icon="grid">move</a> 
     </div> 
    </div> 

希望IV幫助。