使用jqMobi开发app基础:定义header详解手机开发

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

      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 = “返回”;

官方文档

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/tech/app/5283.html

(0)
上一篇 2021年7月16日 23:40
下一篇 2021年7月16日 23:40

相关推荐

发表回复

登录后才能评论