您的位置：首页 > 移动开发

使用jqMobi开发app基础：定义header

2014-01-13 09:00 417 查看

定义头部官方说有三种，一种是公共的，两种自定义的。我经过测试，实际上还有第四种。

1定义公共的header，

也就是所有panel默认的header，需要在div id="afui">内部，也就是和<div id="content">同一级的位置添加一个header 标签，并且id必须是header

例如：

<header id="header">
<h1>协同办公平台header</h1>
<a id="A3" href="javascript:;" class="button" >返回</a>
</header>

2自定义的两种header

第一种在div id="afui">内部，也就是和<div id="content">同一级的位置加一个header 标签，并且命名id。

然后再需要这个header的panel添加一个属性
data-header
=
"custom_header"

例如：

<div id="content">
<div class="panel" id="main" data-header="custom_header">
<!-- content goes here -->
</div>
</div>
<header id="custom_header">
<h1>Welcome</h1>
<a class="button" style="float:right;" class="icon home"></a>
</header>

第二种就是在需要自定义的panel的div内部定义一个header

例如：

<div id="content">
<div class="panel" id="main">
<!-- this can really go anywhere in the panel, but we'll put it at the top -->
<header>
<h1>Welcome</h1>
<a class="button" style="float:right;" class="icon home"></a>
</header>

<!-- content goes here -->
</div>
</div>

3就是给相应的标签定义title属性，系统也会自动生成header

例如：

<div id="content">
<div class="panel" id="main" title="Welcome">

<!-- content goes here -->
</div>
</div>

注意事项：如果定义了title，同时还会有公共的header或者是自定义header，则会出现两个header同时显示的情况，导致显示混乱。

这四种定义header的方法对于panel来说都可以，但前三种对与其他标签就不行了。但定义title的方式定义header还是可以的。

例如如下代码：

<div id="wodezhanghu"  class="panel" data-header="customheader">
<a href="wodezhanghu.html" title="我的账户" data-header="customheader" data-persist-ajax="true">我的账户</a>
</div>

panel的data-header有作用，a标签的data-header就没有作用，title定义的header可以使用。

修改header的返回按钮文字，默认情况下，显示英文back,可以使用脚本修改为其他文字

例如：修改为“返回”

$.ui.backButtonText = "返回";

官方文档

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航