李董出版

李董出版

关注
发信
关注(28)粉丝(399)

折叠面板实现，上传文件进度条，三级联选择器，多级联选择器， 利用layui实现

首先贴出html代码

      <form class="layui-form" action="">
        <div class="layui-form-item checkBox">
          <div class="layui-input-block">
            <input type="checkbox" name="like1[write]" lay-skin="primary" title="多选/全选" checked="">
          </div>
        </div>
        <div class="info-edit-cont">
          <div class="info-item">
              <h2 class="info-title clearfix file-progress">
                  <div class="layui-form-item checkBox fl">
                    <div class="layui-input-block">
                      <input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
                    </div>
                  </div>
                  <div class="file-text fl nowrap">
                    <i class="icon-file icon-file-file"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
                    <!-- <i class="icon-file icon-file-video"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
                    <i class="icon-file icon-file-music"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
                    <i class="icon-file icon-file-photo"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
                    <i class="icon-file icon-file-td"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
                  </div>
                  <div class="progress-cont fl clearfix">
                    <div class="fl progress-view layui-progress layui-progress-big" lay-showpercent="true"
                      lay-filter="demo">
                      <div class="layui-progress-bar layui-bg-color" lay-percent="0%"></div>
                    </div>
                    <div class="progress-label fr">
                      正在生成
                    </div>
                  </div>
                  <div class="fr handle-view cancelFile">
                    取消上传
                  </div>
                </h2>
                <div class="info-item-view">
                    <h2 class="info-title clearfix file-edit">
                        <div class="layui-form-item checkBox fl">
                          <div class="layui-input-block">
                            <input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
                          </div>
                        </div>
                        <div class="layui-input-block item-title fl">
                          <input class="layui-input title-input" type="text" name="title" value="《管理者的商业逻辑》- 李董出版 20170612" lay-verify="title" autocomplete="off"
                            placeholder="请输入文件名称" />
                        </div>
                        <div class="fr handle-view">
                          <i class="showView layui-icon layui-icon-down"></i>
                          <i class="deleteView layui-icon layui-icon-delete"></i>
                        </div>
                      </h2>
                      <div class="info-content">
                        <div class="layui-form-item">
                          <label class="layui-form-label">课程：</label>
                          <div class="layui-input-block">
                            <input type="text" id="courseSelect" class="layui-input" readonly="readonly" />
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <div class="layui-inline">
                            <label class="layui-form-label">应用类型：</label>
                            <div class="layui-input-block">
                              <select name="interest" lay-filter="aihao">
                                <option value=""></option>
                                <option value="0">写作</option>
                                <option value="1">阅读</option>
                                <option value="2">游戏</option>
                                <option value="3">音乐</option>
                                <option value="4">旅行</option>
                              </select>
                            </div>
                          </div>
                          <div class="layui-inline">
                            <label class="layui-form-label">媒体类型：</label>
                            <div class="layui-input-block">
                              <select name="interest" lay-filter="aihao">
                                <option value=""></option>
                                <option value="0">写作</option>
                                <option value="1">阅读</option>
                                <option value="2">游戏</option>
                                <option value="3">音乐</option>
                                <option value="4">旅行</option>
                              </select>
                            </div>
                          </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                          <label class="layui-form-label">资源简介：</label>
                          <div class="layui-input-block">
                            <textarea placeholder="简要介绍资源内容，适合阅读人群等" class="layui-textarea"></textarea>
                          </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                          <label class="layui-form-label">使用建议：</label>
                          <div class="layui-input-block">
                            <textarea placeholder="简要说明资源的使用建议" class="layui-textarea"></textarea>
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <div class="layui-input-block">
                            <input type="checkbox" name="like1[write]" lay-skin="primary" title="推荐给学生" checked="">
                            <span class="icon-tip">
                              ?
                              <div id="fileTips" class="fileTips">
                                <b class="tip-em"><i class="em1"></i><i class="em2"></i></b>
                                <div class="tip-title">
                                  推荐给学生的资源，学生登录,系统也可以查看哦！
                                </div>
                              </div>
                            </span>
                          </div>
                        </div>
                      </div>
                </div>

          </div>
          <div class="info-item">
              <h2 class="info-title clearfix file-progress">
                  <div class="layui-form-item checkBox fl">
                    <div class="layui-input-block">
                      <input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
                    </div>
                  </div>
                  <div class="file-text fl nowrap">
                    <!-- <i class="icon-file icon-file-file"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
                    <i class="icon-file icon-file-video"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
                    <!-- <i class="icon-file icon-file-music"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
                    <i class="icon-file icon-file-photo"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
                    <i class="icon-file icon-file-td"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
                  </div>
                  <div class="progress-cont fl clearfix">
                    <div class="fl progress-view layui-progress layui-progress-big" lay-showpercent="true"
                      lay-filter="demo">
                      <div class="layui-progress-bar layui-bg-color" lay-percent="0%"></div>
                    </div>
                    <div class="progress-label fr">
                      正在生成
                    </div>
                  </div>
                  <div class="fr handle-view cancelFile">
                    取消上传
                  </div>
                </h2>
                <div class="info-item-view">
                    <h2 class="info-title clearfix file-edit">
                        <div class="layui-form-item checkBox fl">
                          <div class="layui-input-block">
                            <input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
                          </div>
                        </div>
                        <div class="layui-input-block item-title fl">
                          <input class="layui-input title-input" type="text" name="title" value="《管理者的商业逻辑》- 李董出版 20170612" lay-verify="title" autocomplete="off"
                            placeholder="请输入文件名称" />
                        </div>
                        <div class="fr handle-view">
                          <i class="showView layui-icon layui-icon-down"></i>
                          <i class="deleteView layui-icon layui-icon-delete"></i>
                        </div>
                      </h2>
                      <div class="info-content">
                        <div class="layui-form-item">
                          <label class="layui-form-label">课程：</label>
                          <div class="layui-input-block">
                            <input type="text" id="courseSelect" class="layui-input" readonly="readonly" />
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <div class="layui-inline">
                            <label class="layui-form-label">应用类型：</label>
                            <div class="layui-input-block">
                              <select name="interest" lay-filter="aihao">
                                <option value=""></option>
                                <option value="0">写作</option>
                                <option value="1">阅读</option>
                                <option value="2">游戏</option>
                                <option value="3">音乐</option>
                                <option value="4">旅行</option>
                              </select>
                            </div>
                          </div>
                          <div class="layui-inline">
                            <label class="layui-form-label">媒体类型：</label>
                            <div class="layui-input-block">
                              <select name="interest" lay-filter="aihao">
                                <option value=""></option>
                                <option value="0">写作</option>
                                <option value="1">阅读</option>
                                <option value="2">游戏</option>
                                <option value="3">音乐</option>
                                <option value="4">旅行</option>
                              </select>
                            </div>
                          </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                          <label class="layui-form-label">资源简介：</label>
                          <div class="layui-input-block">
                            <textarea placeholder="简要介绍资源内容，适合阅读人群等" class="layui-textarea"></textarea>
                          </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                          <label class="layui-form-label">使用建议：</label>
                          <div class="layui-input-block">
                            <textarea placeholder="简要说明资源的使用建议" class="layui-textarea"></textarea>
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <div class="layui-input-block">
                            <input type="checkbox" name="like1[write]" lay-skin="primary" title="推荐给学生" checked="">
                            <span class="icon-tip">
                              ?
                              <div id="fileTips" class="fileTips">
                                <b class="tip-em"><i class="em1"></i><i class="em2"></i></b>
                                <div class="tip-title">
                                  推荐给学生的资源，学生登录,系统也可以查看哦！
                                </div>
                              </div>
                            </span>
                          </div>
                        </div>
                      </div>
                </div>

          </div>
        </div>
      </form>

css  less代码如下:

.info-item {
  background: #fff;
  border: 1px solid #d5ebff;
  margin-bottom:10px;
}
.info-item-view{
  display: none;
}
.info-title {
  height: 62px;
  padding: 0 20px;
  border-bottom: 1px solid #e8ecf0;
  background-color: #f1f5f8;
  .item-title {
    margin-left: 0px;
  }
  .title-input {
    width: 648px;
    height: 30px;
    line-height: 30px;
    margin-top: 15px;
  }
  .handle-view {
    line-height: 60px;
    i {
      margin-left: 10px;
      color: #bcc0c5;
      font-size: 18px;
      cursor: pointer;
    }
    i:hover {
      color: #228cf9;
    }
  }
  .cancelFile{
    color:#FD5A62;
    cursor: pointer;
  }
}
.info-content {
  background-color: #fff;
  padding-top: 20px;
  display: none;
  .layui-form-label {
    width: 120px;
    text-align: right;
    color: #75797a;
  }
  .layui-input-block {
    margin-left: 120px;
    width: 648px;
  }
  .layui-inline {
    .layui-input-block {
      width: 140px;
    }
  }

}

/*进度条样式*/
.file-progress{
  .file-text{
    width:300px;
    line-height: 60px;
    >i{
      display: inline-block;
      width:18px;
      height: 18px;
      position: relative;
      top:4px;
      margin-right:4px;
    }
    .icon-file-file{
      background:url('../../img/upload/icon-file-file.png') center center no-repeat;
    }
    .icon-file-video{
      background:url('../../img/upload/icon-file-video.png') center center no-repeat;
    }
    .icon-file-music{
      background:url('../../img/upload/icon-file-music.png') center center no-repeat;
    }
    .icon-file-photo{
      background:url('../../img/upload/icon-file-photo.png') center center no-repeat;
    }
    .icon-file-td{
      background:url('../../img/upload/icon-file-td.png') center center no-repeat;
    }
  }
  .progress-cont{
    display: none;
    position: relative;
    margin-right:10px;
    top:20px;
  }
  .progress-view{
    width:180px;
    position: relative;
    top:4px;
  }
  .progress-label{
    color:#3ED07B;
    font-size: 14px;
    line-height: 22px;
    margin-left: 10px;
  }
  .progress-over{
    box-sizing: border-box;
    margin-left:26px;
    width:18px;
    height:18px;
    background:rgba(62,208,123,1);
    border-radius:50%;
    color:#fff;
    line-height: 18px;
    font-style: normal;
    text-align: center;
  }
  .layui-bg-color{
    background-color:#3ED07B;
  }
  .layui-progress-text {
    position: relative;
    top: 0px;
    line-height: 12px;
    font-size: 12px;
    color: #666;
  }
  .layui-progress-big, .layui-progress-big .layui-progress-bar {
    height: 14px;
    line-height: 14px;
  }
  .layui-progress {
    background-color: #F1EFFF;
    position: relative;
    height: 14px;
    border-radius: 2px;
    border:1px solid #E8ECF0;
  }
  .layui-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    max-width: 100%;
    height: 6px;
    border-radius: 2px;
    text-align: right;
    background-color: #5FB878;
    transition: all .3s;
    -webkit-transition: all .3s;
  }
}

js代码如下：

  <script src="../../static/js/libs/jquery-1.9.1.min.js"></script>
  <script src="../../layui/layui.all.js"></script>
  <script>
    $(function () {
      layui
        .config({
          base: "../../layui/lay/mymodules/"
        })
        .use(["form", "cascader", "upload", "element"], function () {
          var form = layui.form;
          form.render();
          var cascader = layui.cascader;
          var upload = layui.upload;
          var element = layui.element;

          /* 级联选择器 方法 开始 */
          var id = 1;
          var casView = cascader({
            elem: "#courseSelect",
            data: [{
              value: "A",
              label: "a"
            }],
            lazy: true,
            lazyLoad: function (node, callback) {
              setTimeout(() => {
                var arr = [];
                id++;
                /* 这里可以写动态获取数据数组*/
                for (var i = 0; i < id; i++) {
                  arr.push({
                    value: id + "-" + i,
                    label: "选项" + id + "-" + i,
                    leaf: id >= 6
                  });
                }
                // node节点数据需要与新数据一并传递回去
                callback(arr, node);
              }, 1000);
            },
            success: function (valData, labelData) {
              console.log(valData, labelData);
            }
          });

          /* 进度条设置 开始*/
          //触发事件
          /* 执行 */
          var fileProgress = function () {
            var fileSize = 41.12;
            var othis = $(this);
            // var DISABLED = 'layui-btn-disabled';
            // if(othis.hasClass(DISABLED)) return;
            element.progress('demo', '0%');
            $(".progress-cont").css({
              "display": "block"
            });
            $(".progress-label").removeClass("progress-over").text('0k/' + fileSize + "k")
            $(".progress-view").css({
              "display": "block"
            });
            //模拟loading
            var n = 0,
              timer = setInterval(function () {
                n = n + Math.random() * 10 | 0;
                $(".progress-label").removeClass("progress-over").text((fileSize * (n / 100)).toFixed(2) + 'k/' +
                  fileSize + "k")
                if (n > 100) {
                  n = 100;
                  clearInterval(timer);
                  // othis.removeClass(DISABLED);
                  $(".progress-label").addClass("progress-over").text('✓');
                  $(".progress-view").css({
                    "display": "none"
                  });

                  /* 上传成功之后  */
                  /* 取消上传 按钮 进行隐藏 */
                  $(".cancelFile").css({display:'none'})
                  /* 将file-progress隐藏  info-item-view显示*/
                  $(".file-progress").css({display:'none'})
                  $(".info-item-view").css({display:'block'})
                }
                element.progress('demo', n + '%');
              }, 300 + Math.random() * 1000);

            // othis.addClass(DISABLED);
          };
          /* 进度条设置 结束*/
          //执行进度条方法
          fileProgress();
        });

        /* 取消上传 */
      $(".cancelFile").click(function(){
        var itemBoxHtml = $(this).parents('.info-item').first();
        $(itemBoxHtml).css({display:'none'})
        dataCount = dataCount-1;
        flagShowCheckBox();
      })

      /* 点击头部的 关闭 展示按钮 */
      $(".showView").click(function () {
        let falg = $(this).hasClass('layui-icon-up')
        if (falg) {
          $(this).removeClass('layui-icon-up').addClass('layui-icon-down');
          $(this).parents('.info-item').find(".info-content").css({
            display: 'none'
          });
        } else {
          $(this).parents('.info-item').find(".info-content").css({
            display: 'block'
          });
          $(this).removeClass('layui-icon-down').addClass('layui-icon-up');
        }
      })

      /* 点击删除按钮 */
      $(".deleteView").click(function () {
        $(this).parents(".info-item").css({
          display: 'none'
        });
        dataCount = dataCount-1;
        flagShowCheckBox();
      })
      /* 用来判断是否显示复选框
       * 当值大于1时才显示复选框
       */
      var dataCount = $(".info-edit-cont").find('.info-item').length;
      console.log(dataCount);
      var flagShowCheckBox = function () {
        if (dataCount > 1) {
          $(".checkBox").css({
            display: 'block'
          })
        } else {
          $(".checkBox").css({
            display: 'none'
          })
        }
      }
      flagShowCheckBox();

      $("#addBtn").click(function(){
        window.location.href = './resourcesUpload.html'
      })
    });
  </script>
<form class="layui-form" action="">
<div class="layui-form-item checkBox">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="多选/全选" checked="">
</div>
</div>
<div class="info-edit-cont">
<div class="info-item">
<h2 class="info-title clearfix file-progress">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="file-text fl nowrap">
<i class="icon-file icon-file-file"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<!-- <i class="icon-file icon-file-video"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-music"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-photo"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-td"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
</div>
<div class="progress-cont fl clearfix">
<div class="fl progress-view layui-progress layui-progress-big" lay-showpercent="true"
lay-filter="demo">
<div class="layui-progress-bar layui-bg-color" lay-percent="0%"></div>
</div>
<div class="progress-label fr">
正在生成
</div>
</div>
<div class="fr handle-view cancelFile">
取消上传
</div>
</h2>
<div class="info-item-view">
<h2 class="info-title clearfix file-edit">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="layui-input-block item-title fl">
<input class="layui-input title-input" type="text" name="title" value="《管理者的商业逻辑》- 李董出版 20170612" lay-verify="title" autocomplete="off"
placeholder="请输入文件名称" />
</div>
<div class="fr handle-view">
<i class="showView layui-icon layui-icon-down"></i>
<i class="deleteView layui-icon layui-icon-delete"></i>
</div>
</h2>
<div class="info-content">
<div class="layui-form-item">
<label class="layui-form-label">课程：</label>
<div class="layui-input-block">
<input type="text" id="courseSelect" class="layui-input" readonly="readonly" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">应用类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">媒体类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">资源简介：</label>
<div class="layui-input-block">
<textarea placeholder="简要介绍资源内容，适合阅读人群等" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">使用建议：</label>
<div class="layui-input-block">
<textarea placeholder="简要说明资源的使用建议" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="推荐给学生" checked="">
<span class="icon-tip">
?
<div id="fileTips" class="fileTips">
<b class="tip-em"><i class="em1"></i><i class="em2"></i></b>
<div class="tip-title">
推荐给学生的资源，学生登录,系统也可以查看哦！
</div>
</div>
</span>
</div>
</div>
</div>
</div>
 
</div>
<div class="info-item">
<h2 class="info-title clearfix file-progress">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="file-text fl nowrap">
<!-- <i class="icon-file icon-file-file"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
<i class="icon-file icon-file-video"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<!-- <i class="icon-file icon-file-music"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-photo"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-td"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
</div>
<div class="progress-cont fl clearfix">
<div class="fl progress-view layui-progress layui-progress-big" lay-showpercent="true"
lay-filter="demo">
<div class="layui-progress-bar layui-bg-color" lay-percent="0%"></div>
</div>
<div class="progress-label fr">
正在生成
</div>
</div>
<div class="fr handle-view cancelFile">
取消上传
</div>
</h2>
<div class="info-item-view">
<h2 class="info-title clearfix file-edit">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="layui-input-block item-title fl">
<input class="layui-input title-input" type="text" name="title" value="《管理者的商业逻辑》- 李董出版 20170612" lay-verify="title" autocomplete="off"
placeholder="请输入文件名称" />
</div>
<div class="fr handle-view">
<i class="showView layui-icon layui-icon-down"></i>
<i class="deleteView layui-icon layui-icon-delete"></i>
</div>
</h2>
<div class="info-content">
<div class="layui-form-item">
<label class="layui-form-label">课程：</label>
<div class="layui-input-block">
<input type="text" id="courseSelect" class="layui-input" readonly="readonly" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">应用类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">媒体类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">资源简介：</label>
<div class="layui-input-block">
<textarea placeholder="简要介绍资源内容，适合阅读人群等" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">使用建议：</label>
<div class="layui-input-block">
<textarea placeholder="简要说明资源的使用建议" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="推荐给学生" checked="">
<span class="icon-tip">
?
<div id="fileTips" class="fileTips">
<b class="tip-em"><i class="em1"></i><i class="em2"></i></b>
<div class="tip-title">
推荐给学生的资源，学生登录,系统也可以查看哦！
</div>
</div>
</span>
</div>
</div>
</div>
</div>
 
</div>
</div>
</form>
01-11 11:13
Powered by LMLPHP ©2024 李董出版 0.076622