我知道我们可以在Jquery Mobile App的标题中添加左右按钮。
但是我们可以在标题部分中再添加任何按钮或控件吗?
答案 0 :(得分:38)
我认为我有更好的解决方案,
<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>
截图;
答案 1 :(得分: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 -->
如果您使用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帮助。
答案 2 :(得分:4)
创建自定义导航栏而不是修改标题工具栏可能更容易,这里是文档:http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html
答案 3 :(得分:3)
这可能会有所帮助:
<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
答案 4 :(得分:2)
我能够通过以下代码实现这一目标:
<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>
答案 5 :(得分:1)
不,据我所知,存在2的硬限制。我能想到的最好的方法是让另一个没有风格的链接出现。
然而,有一些导航栏 - 在我的一个项目中,我在标题区域需要一些按钮,我在其下方放置了一个导航栏,并对结果非常满意。这里详细解释: