1、template.js
template.js是前端javascript模板引擎，主要解决了html+js 拼接繁琐和效率低下的问题。
下载template.js并引入，代码片段：
<script type="text/html" id="banner_tpl">
<% if( banners && banners.length > 0 ) { %>
<div class="swiper-container-b" id="js_swiper">
<div class="swiper-wrapper">
<% for( var i in banners ) {
var data = banners[i];
%>
<div class="swiper-slide">
<a href="javascript:;" class="jump" style="background-image: url(<%- data['img'] %>)"></a>
</div>
<% } %>
</div>
<div class="swiper-pagination"></div>
</div>
<% } %>
</script>
2、Swiper的用法
首先加载插件：
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/swiper.min.js"></script>
</body>
</html>
html:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"> Slide1</div>
<div class="swiper-slide"> Slide2</div>
<div class="swiper-slide"> Slide3</div>
</div>
</div>
函数调用
<script type="text/javascript">
window.onload = function() {
var mySwiper = new Swiper('.swiper-container',{
loop: true
//其他设置
});
}
</script>
另外，函数调用还支持jQuery和Zepto，如果需要使用，请先加载jQuery.js或zepto.js。由于IE7不支持querySelectorAll和querySelector方法，因此IE7必须要引入Jquery。
<script type="text/javascript">
$(function(){
var mySwiper = $('.swiper-container').swiper({
loop: true
//其他设置
});
})
</script>
其中onSlideChangeStart方法能获取当前活动块的下标 realIndex。
onSlideChangeStart: function(swiper){
swiperData.index = swiper.realIndex
}
3、上移、下移、删除 代码片段
image.png
//上移
.on('click', ".up", function() {
var _this = $(this);
var par = _this.parents(".workflow_cont"); //获取当前 workflow_cont
var flow_no = par.data('flow_no'); //获取当前 workflow_cont 的类别
var step = par.data('step'); //获取当前 workflow_cont 的步骤
//这里对数组顺序进行调整
$.each(js_data.flowList, function(i, e) {
var wstep = js_data.flowList[i].step_no;
var wflow_no = js_data.flowList[i].flow_no;
if(wstep == step && wflow_no == flow_no) { //找得到，那么上移 就是拿它的前一个 和它 替换，用一个临时变量去做交换
var temp = js_data.flowList[i-1];
if(temp.step_type == '审批' && temp.flow_no == flow_no) { //确保它是审批流 并且和它也是同一类别
js_data.flowList[i-1] = js_data.flowList[i];
js_data.flowList[i-1].step_no = temp.step_no; //拿回原来的步骤
js_data.flowList[i] = temp;
js_data.flowList[i].step_no = temp.step_no - 0 + 1; //计算后面那个步骤
//重新渲染页面
if(js_data.flowList.length) {
var label = tmpl("workflow_tmpl", {
data: js_data.flowList
});
$(".workflow_box").html(label);
}
return false;
}
}
});
})
//下移
.on("click", ".down", function() {
var _this = $(this);
var par = _this.parents(".workflow_cont"); //获取当前 workflow_cont
var flow_no = par.data('flow_no'); //获取当前 workflow_cont 的类别
var step = par.data('step'); //获取当前 workflow_cont 的步骤
//这里对数组顺序进行调整
$.each(js_data.flowList, function(i, e) {
var wstep = js_data.flowList[i].step_no;
var wflow_no = js_data.flowList[i].flow_no;
if(wstep == step && wflow_no == flow_no) { //找得到，那么下移 就是拿它的后一个 和它 替换，用一个临时变量去做交换
var temp = js_data.flowList[i+1];
if(temp.step_type == '审批' && temp.flow_no == flow_no) { //确保它是审批流 并且和它也是同一类别
js_data.flowList[i+1] = js_data.flowList[i];
js_data.flowList[i+1].step_no = temp.step_no;
js_data.flowList[i] = temp;
js_data.flowList[i].step_no = temp.step_no - 0 - 1;
//重新渲染页面
if(js_data.flowList.length) {
var label = tmpl("workflow_tmpl", {
data: js_data.flowList
});
$(".workflow_box").html(label);
}
setLineHeight();
return false;
}
}
});
})
//删除
.on("click", ".remove", function() {
var _this = $(this);
var par = _this.parents(".workflow_cont"); //获取当前 workflow_cont
var step = par.data('step'); //获取它的步骤数
var flow_no = par.data('flow_no'); //获取它的步骤数
//在数据结构中删除
$.each(js_data.flowList, function(i, e) {
if(e.step_no == step && e.flow_no == flow_no) { //步骤数一样，类别也一样，才能删除
js_data.flowList.splice(i, 1);
//这里需要先重新对步骤排序
if(js_data.flowList.length) {
var flag = false;
var b = 0; //用来标记循环（2）的起点并且用于结束循环
$.each(js_data.flowList, function(k, ee) {
var a = 1; //用来记步骤
flag = false;
if(b==js_data.flowList.length) return false;
$.each(js_data.flowList, function(i, e) { //循环（2）
//这里需要针对同类别的重置步骤
if(b==js_data.flowList.length) return false;
if(b != 0 && flag) {
if(js_data.flowList[b].flow_no != js_data.flowList[b-1].flow_no) {
return false; //跳出这个循环
}
}
js_data.flowList[b].step_no = (a++);
b++;
flag = true;
});
});
var label = tmpl("workflow_tmpl", {
data: js_data.flowList
});
//重新渲染页面
$(".workflow_box").html(label);
}
setLineHeight();
return false;
}
})
})
4、常规操作事件
$('body')
.on('click', '.edit', function() {
console.log('点击事件')
})
.on('change', 'input', function() {
console.log('文本域改变事件')
})
如果某个节点是后生成的，绑定在它上面的事件要写在$('body')下，像上面的写法，下面的写法不生效：
$('.edit').on('click', function() {...})
5、工作流程
image.png
代码片段:
<!-- 审批流程 -->
<script type="text/template" id="step_list_temp1">
<%
if(json.all_flow.length){
for(var i = 0; i < json.all_flow.length; i++){
var data = json.all_flow[i];
var icon = (data.status == '等待处理' || data.status == '待处理' ? 'dengdai' : (data.status == '已作废' || data.status == '驳回' || data.status == '被退回' ? 'bohui' : 'duile'));
%>
<div class="contentBox">
<div class="s_item">
<div class="sicon_b">
<div class="sicon <%-icon%>"></div>
<div class="oline <%if(i>0){%>hide<%}%>"></div>
</div>
<div class="scontent">
<span class="tl"></span>
<%if(data.step_type == '操作' && !utils.isEmpty(data.operator)){%>
<div class="oname clearfix">
<%-data.operator%>
<%if(!utils.isEmpty(data.creator_role_name)){%> <span class="tipp"><%-data.creator_role_name%>发起<%}%></span>
<%if(data.op_flag == 'k2' || data.op_flag == 'k2cz') {%>
<%if(!utils.isEmpty(data.kt_id)) {%>
<span> (流程号ID: <b><%-data.kt_id%></b>)</span>
<%}%>
<a href="javascript:;" class="seeK2 extraBtn floatR" id="<%-data.kt_id%>">查看K2流程</a>
<%}%>
</div>
<%}%>
<%if(data.step_type == '审批'){%>
<div class="oname clearfix">
<div class="l">审批人：
<%if(data.pass_type == '全部通过'){%>
<%if(data.status == '已作废' || data.status == '驳回' || data.status == '被退回') {%>
<span><%-data.operator%></span>
<%}else{%>
<span><%-data.auth_approvers%></span>
<%}%>
<%}else{%>
<%if(data.status != '等待处理' && data.status != '待处理'){%>
<span><%-data.operator%></span>
<%}else{%>
<span><%-data.auth_approvers%></span>
<%}%>
<%}%>
<%if(!utils.isEmpty(data.title)){%>
<span class="tipp"><%-data.title%></span>
<%}%>
</div>
<%if((data.status == '等待处理' || data.status == '待处理') || (data.pass_type == '全部通过' && (data.status == '已通过' || data.status == '已完成'))){%>
<div class="r closeR"><i></i></div>
<%}%>
</div>
<%}%>
<%if(data.step_type == '操作'){%>
<div class="clearfix odetail">
<%if(($.inArray(data.status, ['已作废', '驳回', '被退回']) >= 0) && ($.inArray(data.op_flag, ['sharecenter', 'pay', 'k2', 'k2cz']) >= 0)){%>
驳回原因：<%-data.operator_remark || '无'%>
<%}else{%>
<%=data.remark%>
<%if(utils.isEmpty(data.operator) && (data.op_flag == 'k2' || data.op_flag == 'k2cz')) {%>
<%if(!utils.isEmpty(data.kt_id)) {%>
<span> (流程号ID: <b><%-data.kt_id%></b>)</span>
<%}%>
<a href="javascript:;" class="seeK2 extraBtn floatR" id="<%-data.kt_id%>">查看K2流程</a>
<%}%>
<% } %>
</div>
<%if(data.create_time && icon != 'dengdai'){%>
<div class="otime"><%-data.create_time%></div>
<%}%>
<%}%>
<%if(data.step_type == '审批'){%>
<%if(data.is_show_remark && data.remark){%>
<div class="odetail"><%=data.remark%></div>
<%}%>
<%if(data.pass_type == '单一通过'){%>
<div class="odBox">
<%if(data.status == '等待处理' || data.status == '待处理'){%>
<div class="odetail">
<span class="ti">以下人员一人审批即可</span>
<div class="pbox">
<%if(data.approvers.length){%>
<%for(var f = 0; f < data.approvers.length; f++){
var fd = data.approvers[f];
%>
<span><%-fd.name%></span><%if(f < data.approvers.length-1){%>、<%}%>
<%}%>
<%}%>
</div>
</div>
<%}%>
<%if((data.status == '已作废' || data.status == '驳回' || data.status == '被退回') && !utils.isEmpty(data.operator_remark)){%>
<div class="odetail">
驳回原因：<%-data.operator_remark%>
</div>
<%}%>
<%if(data.create_time && icon != 'dengdai'){%>
<div class="otime"><%-data.create_time%></div>
<%}%>
</div>
<%}%>
<%if(data.pass_type == '全部通过'){%>
<div class="odBox">
<%if((data.status == '等待处理' || data.status == '待处理') || (data.pass_type == '全部通过' && (data.status == '已通过' || data.status == '已完成'))){%>
<div class="odetail">
<span class="ti">以下人员需全员通过</span>
<div class="ppbox">
<%if(data.approvers.length){%>
<%for(var j = 0; j < data.approvers.length; j++){
var jd = data.approvers[j];
%>
<div class="ppitem">
<span class="name"><%-jd.name%></span>
<%if(jd.is_approval == -1){%>
<span class="status jbohui"><i></i></span>
<%}%>
<%if(jd.is_approval == 0){%>
<span class="status jdengdai"><i></i></span>
<%}%>
<%if(jd.is_approval == 1){%>
<span class="status jduile"><i></i></span>
<%}%>
</div>
<%}%>
<%}%>
</div>
</div>
<%}%>
<%if((data.status == '已作废' || data.status == '驳回' || data.status == '被退回') && !utils.isEmpty(data.operator_remark)){%>
<div class="odetail">
驳回原因：<%-data.operator_remark%>
</div>
<%}%>
<%if(data.create_time && icon != 'dengdai'){%>
<div class="otime"><%-data.create_time%></div>
<%}%>
</div>
<%}%>
<%}%>
</div>
</div>
</div>
<%
}
}
%>
</script>
6、拷贝文字
引入<script src="dist/clipboard.min.js"></script>
var clipboard = new Clipboard('.copy');
clipboard.on('success', function (e) {
$.message.show('复制成功');
});
clipboard.on('error', function(e) {
$.message.show('复制失败');
});
7、flex布局（弹性布局）
flex布局有两条轴，X轴为主z轴，Y轴为交叉轴。
常用属性：
flex-direction、justify-content、align-items
1、flex-direction，定义了排列方向
flex-direction:row | row-reverse | column | column-reverse;
2、justify-content，定义了在主轴上的对齐方式
justify-content:flex-start | flex-end | center | space-between |space-around;
3、align-items，定义了在交叉轴上的对齐方式。
align-items:flex-start | flex-end | center |baseline | stretch;
8、position：sticky; 粘性定位
设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效
