在JQuery Mobile中向标题添加许多按钮

Question

我知道我们可以在Jquery Mobile App的标题中添加左右按钮.

但是我们可以在标题部分中添加更多按钮或控件吗？

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

如果您使用c#mvc razor引擎进行编程,请不要忘记使用2 @ like so @@ media编写css media标签,因为剃刀引擎会将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帮助.