html设置header,css header布局

　　上次我们形成了两种表头布局，一种flexbox，一种float。最后和做重构的同事沟通，选择了float的布局。

　　其实版面的选择不需要我关注。我的参与或者说一些看法，大多是自我完善，但html结构完全由csser掌控就不必说了。

　　在header组件的整个编码过程中，我和我的重构同事对一些地方进行了反复的交流和争论。今天我们就来说说header组件的布局和功能实现，说说js和css的配合。

　　那么头组件本身就是一个旧组件。让我们顺便讨论一下如何翻新这种旧组件。

最初的结构

　　开始重构的同事给了我一个已经做好的页面：

　　我们讨论了一些小经验，也通知了设计团队，顺利改了。然后我开始编写快乐代码，这是一个HTML的结构：

　　header class= cm-header style= top:50px； flcm-header-icon icon-back /Span class= frcm-header-BTN 确认/Span class= frcm-header-icon I class= icon-home /I/Span class= fr cm-header-icon I class= icon-list /I/Span h1 class= cm-page-title 页面标题/h1 /header。这里没有提到H1标签中的文本，因为它可能非常复杂。我们以后再谈。这些按钮具有以下功能：

　　第2行：返回按钮

　　第3行：确认。

　　PS:左侧采用浮动布局，所以第一个元素在最右侧。

　　第四行：首页标签

　　第五行：三个点，点击显示一个侧边栏。

　　以上是HTML的实现，但是对于程序员来说，header除了button (btn)之外只有icon，所以上面的结构一般js都不买账。

Jser需要的结构

　　与重构同事交流。原因如下：

　　因为回退比较特殊，所以多了一种风格。我不记得细节了。

　　 icon代表背景图片，icon代表CSS3绘画，CSS3绘画具有很高的扩展性，比如改变颜色。

　　 .

　　当时双方讨论比较激烈，但是icond全部变成icon，重构同事不同意，就放弃了。经过一轮讨论，结构变成了这样：

　　header class= cm-header style= top:50px；class= flcm-header-icon I class= icon-back /I/Span class= frcm-header-BTN 确认/Span class= frcm-header-icon I class= icon-home /I/Span class= fr cm-header-icon I class= icon-list /I/Span H1 class= cm-Page-title 页面标题/h1 /header做了一个小改动，统一了back与其他图标类型按钮的结构，于是我开始了开心码。

　　PS:注意icond和icon标签会不同程度的出现在表头，这是不可控的。

结构的问题

　　因为公司的表头一直存在，所以我在做的过程中要考虑两个方面：

　　(1)易于扩展但接口兼容。

　　需要与每个标签的混合直通标记名进行联合调试。

　　也就是说，每个标签的名字是什么，已经被固定了，甚至有些标签的回调也被限制了。我这里的数据结构大概如下：

　　{左：[]，中：[]，右：[{tagname: home ，callback:function(){ console . log( return )；} }，{ 标记名:搜索 }，{ 标记名:列表，回调：函数(e) { //.} }，{ 标记名: tel ， number: 56973144 }，{ 标记名:提交，值:登录，回调：function(){ console . log( log in )；} }，{tagname: custom ， value: customization ，item fn:function(){ return span class= cm-header-btnfrjs _ custom customization/span ；}，回调：function(){ console . log( customization )；}}如你所见，一个标记名有一个按钮，现在问题来了：我们不知道一个标记名应该是图标还是图标。

　　但是根据值字段的存在，我们可以判断它是否应该有I子标签。这个时候我们怎么解决这个问题？

　　建立标记名和类名之间的映射关系，例如：

　　Var={home: icon ， list: icon}当然这种做法自然是很难受的。如果把小图标统一成图标，我可以在模板里统一成这样的代码：

　　span class= cm-header-icon %=dir % js _ %=item . tagname % % if(item . value){ % %=item . value % % } else { % I class= icon-%=item . tagname % /I % } %/但是，因为多了一个映射关系，我的代码不好看了，业务逻辑也变得复杂了。于是，带着这些考虑，我又找到了我的重构同事，他也很懂事，答应马上改：

　　header class= cm-header style= top:50px；class= flcm-header-icon I class= icon-back /I/Span class= frcm-header-BTN 确认/Span class= frcm-header-icon I class= icon-home /I/Span class= fr cm-header-icon I class= icon-list /I/Span h1 class= cm-page-title 页面标题/h1 /header如果不考虑h1的风格，我们修复上面的代码真的太简单了！

　　header class=cm-header % var i=0，len=0，j=0，keyagain=0；var left=leftvar right=right . reverse()；var item=nullvar dirvar btnObj=null% % for(keyagain=0；keyagain 2；keyagain){ % % if(keyagain==0){ dir= fl ；btnObj=left} else { dir= frbtnObj=right} % % for(i=0，len=btnObj.length我lenI){ % % item=BTN obj[I]；% % if(type of item . item fn== function ){ % %=item . item fn()% % } else { % span class= cm-header-icon %=dir % js _ %=item . tagname % % if(item . value){ % %=item . value % % } else { % I class= icon-%=item . tagname % /I % } %/span % } % % } %/header PS:从代码着色的角度来看，js中使用的左右是关键字、关键字.

定制化需求

　　可见我们可以很容易的循环生成左右两边的按钮，但是问题马上就来了。如果需要延长应该怎么做？上面会有以下问题：

　　TEL标签默认是一个标签，但这里我们是span标签。

　　a href= tel:56973144 class= cm-header-BTN fr js _ tel I class= icon-tel /I/a

　　后退按钮通常做成标签，用来解决Hybrid中javascript错误的假死问题。

　　说白了，标签按钮虽然要有统一的结构，但是需要保留定制的能力。

　　这里，定制工作交给了每个标签的itemFn函数，该函数返回一个具有一定规则的字符串。这里，取一段代码：

　　handleSpecialParam:function(data){ var k，I，len，itemfor (k in data) { if (_。isArray(data[k]){ for(I=0，len=data[k])。长度；我lenI){ item=data[k][I]；if(this[ custom thandle _ item . tagname]){ this[ custom thandle _ item . tagname](data[k][I]，k)；} //if } //for } //if } //for }，_ getDir:function(dir){ var kv={ left: fl ，right: fr }；返回kv[dir]；}，//按钮逻辑自定义handle _ back: function (item，dir) {dir=this。_ getdir(dir)；item . item fn=function(){ var str= a href= http://m . Ctrip . com/html 5/ class= cm-header-BTN dir js _ item . tagname ；if(item . value){ str=item . value /a ；} else { str= I class= icon- item . tagname /I/a ；}返回str};}，当你发现一个按钮不符合要求或者有定制需求的时候，你可以想办法设置它的itemFn，然后这个代码就可以直接写到初始化的json字符串里了。

花样百出的title

　　到了title，发现它的表现五花八门。这个时候我一般会根据不同的类型生成不同的HTML结构，框架给了我几个默认选项。如果我不支持，我会自己定制itemFn。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。