美文网首页
整理

整理

作者: 你若像风 | 来源:发表于2020-01-14 10:09 被阅读0次
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)){%>&nbsp;<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元素仅在其父元素内生效

相关文章

  • 整理+整理+整理

    最近开启了整理狂魔的模式，各种资料整理，分类梳理，删删减减，颇有强迫症的赶脚，这是为了拖延正事才做的徒劳行为么？ ...

  • 整理~整理~整理~

    整理过后，天晴了 乱了一段时间，把心放逐，让一切随风，但是离意却越差越远，面对诸多的不满意，通过发泄，自我调整，就...

  • 整理整理

    近两天状态不是很好，昨天原本计划好要写作业的，结果喝酒最终没有完成打卡，今天为此还是很焦虑，回家后为了消除情绪上的...

  • 整理整理

    在说点什么之前，先来讲讲一个叫康奈尔笔记法的小笔记法。 所谓的「康奈尔笔记法」，源自美国康奈尔笔记法故而得名，它是...

  • 整理整理

    今天突发奇想洗了洗地毯，结果清洗完地毯以后发现地板很脏，于是又拖了拖地，结果发现屋子又有点乱，然后就开始整理屋子，...

  • 整理整理

    最近已做好的事情： 完成了一篇论文，已投稿，发表应该问题已不大，前几天编辑说已过了二审，在等待三申，到现在没说让改...

  • 整理整理

    今天业余主要是把院长连线的与孩子人际关系的案例进行了一下整理和文字修改。 同时把前段时间整理的体验课的例子也整理完...

  • 整理整理

    家务真是越做越多。 不做的话就俩问题，脏和乱。做了就会冒出很多问题。 1、现在家里要面临被子没地方收的问题 解决方...

  • 整理整理github

    github:Reim nodejs写的简易留言板https://github.com/Reim/messageb...

  • 话说整理整理

    今日心情大好，果然人生在于折腾，折腾一下心情都不一样。 总的来说，今日彻底把房间的格局重新布局整理，豁然开朗，看着...

网友评论

      本文标题：整理

      本文链接：https://www.haomeiwen.com/subject/upygactx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|整理|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！