html5+css3之制做header案例与升级

日期:2021-03-06 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

之前,大家产生了两种header的合理布局,1种flexbox,1种float,最终与身旁做重构的朋友沟通交流下来,挑选了float的合理布局。
 
客观事实上合理布局的选型不必须我关心,我的参加或1些建议大部分是自身提高,但要说html构造彻底操纵于csser的话就不1定了
 
在全部header组件的编码全过程中,我与重构朋友就1些地区产生了反复的沟通交流,争执,今日就header组件的合理布局和作用完成,聊1聊js与css的相互配合
 
随后header组件自身是1个老组件,大家顺带讨论下,这类老组件应当怎样翻新较为适合。
 
最开始的构造
 
最初重构的朋友给了我1个早已做好了的网页页面:
 


大家对于在其中1些小的体验上做了探讨,而且知会到设计方案组,便改了,很畅顺,随后我刚开始了愉快的编码,这是在其中1块HTML的构造:
 

拷贝编码
编码以下:

<header class="cm-header" style="top: 50px;">
<span class="fl cm-header-icon icon-back "></span>
<span class="fr cm-header-btn">确定</span>
<span class="fr cm-header-icon"><i class="icon-home"></i></span>
<span class="fr cm-header-icon"><i class="icond-list"></i></span>
<h1 class="cm-page-title">
网页页面题目</h1>
</header>

这里去除h1标识中的文本不说,由于在其中将会主要表现的十分繁杂,大家后边再说,在其中的按钮有下列作用:
 
① 第2行:返回按钮
 
② 第3行:确定
 
PS:左侧选用float合理布局因此第1个元素在最右侧
 
③ 第4行:home标识
 
④ 第5行:3个点,点一下会出1个侧面栏
 
以上就是HTML的完成,可是对与程序流程员来讲,头顶部除按钮(btn)之外就仅有标志(icon),因此以上的构造客观事实上js1般是不买账的
 
Jser必须的构造
 
与重构朋友沟通交流下来,缘故是这样的:
 
① 由于返回较为独特,因此多了1个款式,实际甚么我没记牢了
 
② icon意味着情况图,icond意味着CSS3画的,CSS3画的可拓展性高,例如换色调甚么的
 
③ ......
 
那时候彼此的探讨還是较为猛烈的,可是对icond所有变为icon,重构朋友不一样意,因而也就罢手,历经1轮探讨,构造变为了这样:
 

拷贝编码
编码以下:

<header class="cm-header" style="top: 50px;">
<span class="fl cm-header-icon"><i class="icon-back"></i></span>
<span class="fr cm-header-btn">确定</span>
<span class="fr cm-header-icon"><i class="icon-home"></i></span>
<span class="fr cm-header-icon"><i class="icond-list"></i></span>
<h1 class="cm-page-title">
网页页面题目</h1>
</header>

做了很小的转变,将back的构造与其它icon种类按钮做了统1,因而我刚开始了愉快的编码
 
PS:留意,icond与icon种类的标识会不一样水平的在header处出現,没法操纵
 
构造的难题
 
由于企业的header1直便存在,我做的全过程中务必考虑到到两个层面的难题:
 
① 便捷拓展可是要保证插口适配
 
② 必须根据各个标识的tagname与Hybrid开展联调
 
也便是说,每一个标识叫甚么姓名,是早已定死了的,乃至1些标识的回调函数也被限定了,我这里的数据信息构造大约以下:
 

拷贝编码
编码以下:

{
left: [],
center: [],
right: [
{
'tagname': 'home', callback: function () {
console.log('回到');
}
},
{ 'tagname': 'search' },
{
'tagname': 'list', callback: function (e) {
//......
}
},
{ 'tagname': 'tel', 'number': '56973144' },
{
'tagname': 'commit', 'value': '登陆', callback: function () {
console.log('登陆');
}
},
{
'tagname': 'custom', 'value': '订制化',
itemFn: function () {
return '<span class="cm-header-btn fr js_custom">订制化</span>';
},
callback: function () {
console.log('订制化');
}
}
]

能够看到,1个tagname1个按钮,而如今难题来了:大家其实不了解某个tagname应当是icon或是icond
 
可是依据是不是存在value字段,大家是能够分辨其是不是应当具备i子标识,这个情况下大家是如何处理的呢?
 
创建tagname与classname的投射关联,例如:


拷贝编码
编码以下:

var map = {
'home': 'icon',
'list': 'icond'
}

自然,这类做法,当然10分令人觉得难受,假如小标志统1为icon,我在模版中能够统1这般编码:
 

拷贝编码
编码以下:

<span class="cm-header-icon <%=dir %> js_<%=item.tagname %>" >
<% if(item.value) { %>
<%=item.value %>
<% } else { %>
<i class="icon-<%=item.tagname %>"></i>
<% } %>
</span>

可是因为多了1个投射关联,我的编码便不太好看了,而且业务流程逻辑性还变得繁杂了起来,因而带着这些考虑再度寻找了重构朋友,重构朋友也很明事理,立刻同意改了:
 

拷贝编码
编码以下:

<header class="cm-header" style="top: 50px;">
<span class="fl cm-header-icon"><i class="icon-back"></i></span>
<span class="fr cm-header-btn">确定</span>
<span class="fr cm-header-icon"><i class="icon-home"></i></span>
<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 = left;
var right = right.reverse();
var item = null;
var dir;
var btnObj = null;
%>
<%for(keyagain=0; keyagain < 2; keyagain++) { %>
<%
if(keyagain == 0) { dir = 'fl'; btnObj = left; } else { dir = 'fr'; btnObj = right; }
%>
<% for(i = 0, len = btnObj.length; i < len; i++) { %>
<% item = btnObj[i]; %>
<%if(typeof item.itemFn == 'function') { %>
<%=item.itemFn() %>
<%} 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选用到的left与Right是重要字,这个得解决...
 
订制化要求
 
能够看到,1个循环系统,大家即可以随便的转化成左侧和右侧的按钮,可是立刻难题来了,大家必须拓展如何办,上面就会有下列难题:
 
① tel标识默认设置是a标识,大家这里确是span标识


拷贝编码
编码以下:

<a href="tel:56973144" class="cm-header-btn fr js_tel "><i class="icon-tel"></i></a>

② back按钮大家1般会做成a标识,用以处理javascript错误在Hybrid的假死难题
 
简言之,便是尽管标识按钮应当有统1的构造,可是必须保存订制化的工作能力
 
这里订制化的工作中交到了各个标识的itemFn这个涵数,他回到1个标识符串,而且具备1定标准,这里取1个编码片断:
 

拷贝编码
编码以下:

handleSpecialParam: function (data) {
var k, i, len, item;
for (k in data) {
if (_.isArray(data[k])) {
for (i = 0, len = data[k].length; i < len; i++) {
item = data[k][i];
if (this['customtHandle_' + item.tagname]) {
this['customtHandle_' + item.tagname](data[k][i], k);
} //if
} //for
} //if
} //for
},

_getDir: function (dir) {
var kv = { left: 'fl', right: 'fr' };
return kv[dir];
},

//解决back的按钮逻辑性
customtHandle_back: function (item, dir) {
dir = this._getDir(dir);
item.itemFn = function () {
var str = '<a href="<a href="http://m.ctrip.com/html5/">http://m.ctrip.com/html5/</a>" class="cm-header-btn ' + dir + ' js_' + item.tagname + ' " >';
if (item.value) {
str += item.value + '</a>';
} else {
str += '<i class="icon-' + item.tagname + '"></i></a>';
}
return str;
};
},

当发现某个按钮不考虑要求或有订制化要求时,便想方法设定其itemFn便可,情况下上这个编码能够立即写到原始化的json串去
 
花式百出的title
 
到title时,发现其主要表现便5花8门了,这个情况下1般是依据不一样的种类转化成不一样的HTML构造,架构给默认设置的几个选项,不适用便自身订制itemFn
 

拷贝编码
编码以下:

<% item = center; %>
<%if(typeof item.itemFn == 'function') { %>
<%=item.itemFn() %>
<%} else if(item.tagname=='title' || item.tagname=='subtitle') { %>
<h1 class="cm-page-title js_<%=item.tagname %>" >
<%if(typeof(item.value) == 'object' && item.title.value == 2) { %>
<span class="cm-title-l"><%=item.value[0]%></span>
<span class="cm-title-s"><%=item.value[1]%></span>
<%} else { %>
<%=item.value %>
<%} %>
</h1>
<%} else if(item.tagname=='select'){ %>
<h1 class="cm-page-select-title js_<%=item.tagname %>" >
<%=item.value %>
</h1>
<%} else if(item.tagname=='tabs') { %>
<h1 class="cm-page-tabs-title js_<%=item.tagname %>" >
<%for(j = 0; j < item.data.items.length; j ++) { %>
<span data-key="<%=item.data.items[j].id %>" class="<%if(item.data.index===j){ %>active<%} %>" ><%=item.data.items[j].name %></span>
<% } %>
</h1>
<% } else{ %>

<%} %>

恶性事件关联的完成
 
header组件自身承继至Abstract.View这个类,因此要是设定
 
this.events = {}
便能以恶性事件代理商的方法将恶性事件关联至根元素,而header的恶性事件1般便是click恶性事件:
 

拷贝编码
编码以下:

setEventsParam: function () {
var item, data = this.datamodel.left.concat(this.datamodel.right).concat(this.datamodel.center);

for (var i = 0, len = data.length; i < len; i++) {
item = data[i];
if (_.isFunction(item.callback)) {
this.events['click .js_' + item.tagname] = $.proxy(item.callback, this.viewScope);
}
}
},

这里有1个必须留意的点就是,恶性事件关联的钩子就是大家的tagname,这个是唯1的,大家会为每一个标识动态性转化成“.js_tagname”的类,以便捷恶性事件关联
 
老插口的适配
 
以前便说了,该组件是1个老组件的翻新,因而各个业务流程精英团队早已应用了,例如原先是这样启用的:
 

拷贝编码
编码以下:

this.header.set({
title: '基础Header应用',
subtitle: '正中间副题目',
back: true,
backtext: '撤销',
tel: { number: 1111 },
home: true,
search: true,
btn: { title: "登陆", id: 'confirmBtn', classname: 'header_r' },
events: {
returnHandler: function () {
console.log('back');
},
homeHandler: function (e) {
}
}
});

而如今大家期待的启用方法是这样的:
 

拷贝编码
编码以下:

this.header.set({
left: [],
center: {},
right: [
{ tagname: 'home', callback: function () { } },
{ tagname: 'tagname', value: 'value', data: {}, itemFn: function(){}, callback: function () { } }
]
});

这个情况下大家应当如何做呢?自然是不破不立,先破后立,自然是规定业务流程精英团队改!!!随后被无情的喷了回家,因而做了插口适配
 
翻新老组件,插口适配是务必的,假如并不是最底层体制产生颠复,而颠复能够带来颠复性的考试成绩,插口還是不提议改!
 
这里上面就是新插口的启用,下面是老插口的启用,实际效果以下:
 

上一篇:浅谈CSS Sprites切图技术性 返回下一篇:没有了