我花时间研究和实践了一样叫jqMobi的东西，对其中的header有点理解。今儿就来跟大家聊聊，希望能帮到你们！
一、全局header的定义
全局header，就是给所有面板设置的默认头。要在里面（就是跟同样级别的地方）加个header标签id得设成header。比如说这样：
html <headerid="header">这里是全局header的内容</header>
好处就是能让所有面板共用那个头，省时又方便。当然，要是有个别面板的头要特别改一下，那也是有法子的！
二、panel引入header标签
如果要让某块板子用特殊的标题，就在板子里顶上一个带ID的标题标签，再加个“data-header=‘自定义标题’”的属性就行了。
<headerid=”custom_header”>这里是自定义header的内容</header>
<divdata-header=”custom_header”>这个panel将使用自定义的header</div>
这个方法更灵活，咱们可以随心所欲地给每个面板配上自己喜欢的标题，打造出个性十足的布局！
jqMobi
Back Single Page App
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
sketch
三、给每个panel自定义header
别只依赖外面那个头标签，你也能在区块中亲自给自己设置一个独特的头标签！这个头标就是专属于你的窝了，别的地方都碰不到它。
<header>这里是该panel独有的header内容</header>
这个panel内部的文字
这个办法更自由、更私密，每块面板都能有自己特色的标题，互相既不妨碍又不干扰。
四、通过title属性自动生成header
jqMobi有个神奇功能，就是可以帮你自动生成header！只要给标签加上title属性，它就按照你设定的属性值自动给你添上相应的header框架~
这里是div的内容
这个方法挺省事儿，不用手动加header标签，它会自动搞定。不过生成的header样子比较普通，不够多样。
五、header的样式定制
在搞定头部的样式后，接下来就得按设计要求去调整了！jqMobi里有好多样式分类，加个名字就能换色调、字体啥的。
css
#header{
font-size:16px;
color:#333;
background-color:#f5f5f5;
}
那肯定，我们还能用自定义CSS来搞出更个性的样式~
六、header的交互功能
jqMobi
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
sketch
Back
Single Page App
Header，不光要放信息，也得有些基本操作像点一下就能展开菜单，一键回到页面最上面，还有重新加载网页啥的。用jqMobi的话，有它自己的按键和方法能帮你搞定这些功能~
javascript
点击旁边的”导航栏”，会自动打开新页面！
alert(‘你点击了header’);
});
添加好点的头条交互功能就能让用户的使用感更好！也会让应用变得更实用。
七、header在移动端的适配
手机屏幕小，咱们得小心处理header才行！针对不同的屏幕宽窄，调整header的排版，字号啥的，这样才能保证在各种设备上看得舒服。
屏幕宽度小于等于480像素的时候，用这个样式！
#header{
jqMobi
Back
Single Page App
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
sketch
font-size:14px;
}
移动端的适配是header设计中非常重要的一个方面。
八、header设计的最佳实践
最后，我想分享一些header设计的最佳实践：
1.header的内容要简洁明了，突出重点信息
2.header的样式要与整体风格保持一致
3.header的交互要简单直观，易于操作
jqMobi
首页
4.header在不同设备上都要有良好的显示效果
5.header要便于维护和扩展，方便后续的修改
遵循这几招，就能做个更牛逼、好用的header了。
这阵子学了点儿jqMobi，特别是header那块儿，越琢磨越有意思。你知道吗，这个东西真的很关键，弄得好的话，用户体验就能提升不少。所以，我就把自己学到的分享出来了，希望能帮到你们，一起来搞出更好用的手机应用！
最后，我想问问大家，你们头图设计中有没有遇见过啥难题？是怎么解决的？快来评论区聊聊！别忘了给文章点个赞，分享出去，让更多人学到东西~
评论0