1、template.js
template.js是前端javascript模板引擎，主要解决了html+js 拼接繁琐和效率低下的问题。
下载template.js并引入，代码片段：
2、Swiper的用法
首先加载插件：
...
...
html:
函数调用
另外，函数调用还支持jQuery和Zepto，如果需要使用，请先加载jQuery.js或zepto.js。由于IE7不支持querySelectorAll和querySelector方法，因此IE7必须要引入Jquery。
其中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
代码片段:
6、拷贝文字
引入
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元素仅在其父元素内生效