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可以使用。