发布新版

2019-05-31 14:36:29 +08:00
parent 1ff124de94
commit 27e2295cbc
60 changed files with 2038 additions and 450 deletions
--- a/examples/all.html
+++ b/examples/all.html
@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-<title>合并版使用 - layui</title>
+<title>完整库使用 - layui</title>

 <link rel="stylesheet" href="../build/css/layui.css">

@@ -35,6 +35,14 @@ body{padding: 10px;}
  });
  
  
+  //测试加载非内置模块
+  layui.config({
+    base: 'extends/'
+  }).extend({
+    mod1: 'mod1'
+    ,mod2: 'mod2'
+  }).use('mod1');
+  
  //触发事件
  var active = {
    test: function(){
--- a/examples/carousel.html
+++ b/examples/carousel.html
@@ -75,6 +75,7 @@ layui.use('carousel', function(){
    ,index: 2
    //,full: true
    ,arrow: 'always'
+    //,interval: 5000
    //,autoplay: false
    //,indicator: 'outside'
    //,trigger: 'hover'
--- a/examples/extends/mod1.js
+++ b/examples/extends/mod1.js
@@ -0,0 +1,10 @@
+
+layui.define(['mod2', 'layer'], function(exports){
+  var $ = layui.jquery;
+  
+  console.log(layui.mod2, layui.layer, layui.form)
+  
+  exports('mod1', {
+    name: 'mod1'
+  })
+});
--- a/examples/extends/mod2.js
+++ b/examples/extends/mod2.js
@@ -0,0 +1,8 @@
+
+layui.define(['jquery', 'form'], function(exports){
+  console.log(layui.$)
+  
+  exports('mod2', {
+    name: 'mod2'
+  })
+});
--- a/examples/form.html
+++ b/examples/form.html
@@ -22,7 +22,7 @@ body{padding: 10px;}
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
-      <input type="text" name="title" lay-verify="required|title" required placeholder="请输入标题" autocomplete="off" class="layui-input">
+      <input type="text" name="title" lay-verify="required|title" lay-reqText="标题不能为空" required placeholder="请输入标题" autocomplete="off" class="layui-input" >
    </div>
  </div>
  <div class="layui-form-item">
@@ -37,6 +37,12 @@ body{padding: 10px;}
      <input type="email" name="email" lay-verify="email"  lay-verType="alert" autocomplete="off" class="layui-input">
    </div>
  </div>
+  <div class="layui-form-item">
+    <label class="layui-form-label">生日</label>
+    <div class="layui-input-block">
+      <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
+    </div>
+  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
@@ -187,9 +193,12 @@ body{padding: 10px;}

 <script>

-layui.use('form', function(){
-  var form = layui.form;
-  
+layui.use(['form', 'layedit', 'laydate'], function(){
+  var form = layui.form
+  ,layer = layui.layer
+  ,layedit = layui.layedit
+  ,laydate = layui.laydate;
+
  //自定义验证规则
  form.verify({
    title: function(value){
@@ -204,6 +213,11 @@ layui.use('form', function(){
    ]
  });
  
+  //日期
+  laydate.render({
+    elem: '#date'
+  });
+  
  //初始赋值
  form.val('first', {
    'title': '测试'
--- a/examples/table.html
+++ b/examples/table.html
@@ -20,6 +20,7 @@ body{padding: 20px; /*overflow-y: scroll;*/}
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
+    <button class="layui-btn layui-btn-sm" lay-event="reload">无抖重载</button>
  </div>
 </script>

@@ -31,13 +32,21 @@ body{padding: 20px; /*overflow-y: scroll;*/}
 </script>

 <script type="text/html" id="usernameTpl">
-  <a href="" class="layui-table-link">{{d.username || ''}}</a>
+  <a href="" class="layui-table-link">{{d.username || ''}}1</a>
 </script>

 <script type="text/html" id="switchTpl">
  <input type="checkbox" name="yyy" lay-skin="switch" lay-text="女|男">
 </script>

+<script type="text/html" id="cityTpl">
+  <select lay-ignore>
+    <option value="浙江杭州">浙江杭州</option>
+    <option value="江西南昌">江西南昌</option>
+    <option value="湖北武汉">湖北武汉</option>
+  </select>
+</script>
+
 <script type="text/html" id="checkboxTpl">
  <input type="checkbox" name="" title="锁定" checked>
 </script>
@@ -193,12 +202,12 @@ layui.use('table', function(){
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
-      ,{field:'username', title:'用户名', hide: true, width:120, edit: 'text', templet: '#usernameTpl'}
+      ,{field:'username', title:'用户名', width:120, edit: 'text', templet: '#usernameTpl'}
      ,{field:'email', title:'邮箱', hide: true, width:150, edit: 'text', templet: function(x){
        return '<em>'+ x.email +'</em>'
      }}
      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
-      ,{field:'city', title:'城市', width:100}
+      ,{field:'city', title:'城市', width:120, templet: '#cityTpl1'}
      ,{field:'sign', title:'签名'}
      ,{field:'experience', title:'积分', width:80, sort: true, totalRow: true}
      ,{field:'ip', title:'IP', width:120}
@@ -246,6 +255,12 @@ layui.use('table', function(){
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选')
      break;
+      case 'reload':
+        table.reload('test', {
+          page: {curr: 5}
+          //,height: 300
+        }, 'data');
+      break;
    };
  });

--- a/examples/transfer.html
+++ b/examples/transfer.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <title>穿梭框</title>
+
+  <link rel="stylesheet" href="../src/css/layui.css">
+  <style>
+    body{padding-left: 200px; padding-top: 30px;}
+    #text1,#text2{padding-top: 80px;}
+  </style>
+</head>
+<body>
+
+<button id="btn" class="layui-btn">获取右侧值</button>
+  
+<div id="text1"></div>
+
+<div id="text2"></div>
+
+<div id="text3"></div>
+
+
+<script src="../src/layui.js"></script>
+<script>
+  layui.use('transfer', function(){
+    var transfer = layui.transfer
+    ,$ = layui.$;
+
+    var ins1 = transfer.render({
+      elem: '#text1'
+      ,parseData: function(res){
+        return {
+          "value": res.status
+          ,"title": res.label
+          ,"disabled": res.check
+        }
+      }
+      ,data: [{"status": "1", "label": "瓦罐汤", "check": false}
+        ,{"status": "2", "label": "油酥饼", "check": false}
+        ,{"status": "3", "label": "炸酱面", "check": false}
+        ,{"status": "4", "label": "串串香", "check": true}
+        ,{"status": "5", "label": "豆腐脑", "check": false}
+        ,{"status": "6", "label": "驴打滚", "check": false}]
+      ,value: ["1", "5"]
+      ,showSearch: true
+    });
+    
+    $("#btn").on('click', function(){
+      alert(JSON.stringify(ins1.getValue()))
+    });
+
+    var ins2 = transfer.render({
+      elem: '#text2'
+      ,onchange: function(obj){
+        console.log(obj)
+      }
+      ,data: [{"value": "1", "title": "瓦罐汤", "disabled": false}
+        ,{"value": "2", "title": "油酥饼", "disabled": false}
+        ,{"value": "3", "title": "炸酱面", "disabled": false}
+        ,{"value": "4", "title": "串串香", "disabled": true}
+        ,{"value": "5", "title": "豆腐脑", "disabled": false}
+        ,{"value": "6", "title": "驴打滚", "disabled": false}
+        ,{"value": "7", "title": "北京烤鸭", "disabled": false}
+        ,{"value": "8", "title": "烤冷面", "disabled": false}
+        ,{"value": "9", "title": "毛血旺", "disabled": true}
+        ,{"value": "10", "title": "肉夹馍", "disabled": false}
+        ,{"value": "11", "title": "臊子面", "disabled": false}
+        ,{"value": "12", "title": "凉皮", "disabled": false}
+        ,{"value": "13", "title": "羊肉泡馍", "disabled": false}
+        ,{"value": "14", "title": "冰糖葫芦", "disabled": true}
+        ,{"value": "15", "title": "狼牙土豆", "disabled": false}]
+      ,value: ["1", "3", "5", "7", "9", "11"]
+    });
+  });
+</script>
+
+</body>
+</html>
--- a/examples/tree.html
+++ b/examples/tree.html
@@ -1,147 +1,218 @@
+
 <!DOCTYPE html>
 <html>
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-<title>树模块 - layui</title>
+  <meta charset="utf-8">
+  <title>树组件 - layui</title>
+  <meta name="renderer" content="webkit">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="format-detection" content="telephone=no">

-<link rel="stylesheet" href="../src/css/layui.css">
-
-<style>
-body{padding: 50px 100px;}
-</style>
+  <link rel="stylesheet" href="../src/css/layui.css" media="all">
+  
+  <style>
+    body{padding: 150px;}
+    #test1,#test2{margin-bottom: 100px; width: 400px;}
+  </style>
 </head>
 <body>

-<ul id="demo"></ul>
+<div id="test1"></div>
+<div id="test2"></div>

-<ul id="demo1" style="margin-top: 50px;"></ul>
-
-<script src="../src/layui.js"></script>
+<script src="../dist/layui.js"></script>
 <script>
+  layui.use(['tree', 'layer'], function(){
+    var tree = layui.tree
+    ,$ = layui.$
+    ,layer = layui.layer
+    ,index = 100;
+    
+    //数据源
+    var data1 = [{
+      label: '一级1'
+      ,id: 1
+      ,children: [{
+        label: '二级1-1'
+        ,id: 3
+        ,href: 'https://www.layui.com/doc/'
+        ,children: [{
+          label: '三级1-1-3'
+          ,id: 23
+          ,children: [{
+            label: '四级1-1-3-1'
+            ,id: 24
+            ,children: [{
+              label: '五级1-1-3-1-1'
+              ,id: 30
+            },{
+              label: '五级1-1-3-1-2'
+              ,id: 31
+            }]
+          }]
+        },{
+          label: '三级1-1-1'
+          ,id: 7
+          ,children: [{
+            label: '四级1-1-1-1'
+            ,id: 15
+            ,href: 'https://www.layui.com/doc/base/infrastructure.html'
+          }]
+        },{
+          label: '三级1-1-2'
+          ,id: 8
+          ,children: [{
+            label: '四级1-1-2-1'
+            ,id: 32
+          }]
+        }]
+      },{
+        label: '二级1-2'
+        ,id: 4
+        ,children: [{
+          label: '三级1-2-1'
+          ,id: 9
+          ,disabled: true
+        },{
+          label: '三级1-2-2'
+          ,id: 10
+        }]
+      },{
+        label: '二级1-3'
+        ,id: 20
+        ,children: [{
+          label: '三级1-3-1'
+          ,id: 21
+        },{
+          label: '三级1-3-2'
+          ,id: 22
+        }]
+      }]
+    },{
+      label: '一级2'
+      ,id: 2
+      ,children: [{
+        label: '二级2-1'
+        ,id: 5
+        ,children: [{
+          label: '三级2-1-1'
+          ,id: 11
+        },{
+          label: '三级2-1-2'
+          ,id: 12
+        }]
+      },{
+        label: '二级2-2'
+        ,id: 6
+        ,children: [{
+          label: '三级2-2-1'
+          ,id: 13
+        },{
+          label: '三级2-2-2'
+          ,id: 14
+          ,disabled: true
+        }]
+      }]
+    },{
+      label: '一级3'
+      ,id: 16
+      ,children: [{
+        label: '二级3-1'
+        ,id: 17
+        ,fixed: true
+        ,children: [{
+          label: '三级3-1-1'
+          ,id: 18
+        },{
+          label: '三级3-1-2'
+          ,id: 19
+        }]
+      },{
+        label: '二级3-2'
+        ,id: 27
+        ,children: [{
+          label: '三级3-2-1'
+          ,id: 28
+        },{
+          label: '三级3-2-2'
+          ,id: 29
+        }]
+      }]
+    }];

-layui.use('tree', function(){
-  var tree = layui.tree({
-    elem: '#demo' //指定元素
-    //,check: 'checkbox' //勾选风格
-    ,skin: 'as' //设定皮肤
-    //,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
-    ,drag: true
-    ,click: function(item){ //点击节点回调
-      console.log(item)
-    }
-    ,nodes: [ //节点
-      {
-        name: '常用文件夹'
-        ,id: 1
-        ,alias: 'changyong'
-        ,children: [
-          {
-            name: '所有未读'
-            ,id: 11
-            //,href: 'http://www.layui.com/'
-            ,alias: 'weidu'
-          }, {
-            name: '置顶邮件'
-            ,id: 12
-          }, {
-            name: '标签邮件'
-            ,id: 13
-          }
-        ]
-      }, {
-        name: '我的邮箱'
-        ,id: 2
-        ,spread: true
-        ,children: [
-          {
-            name: 'QQ邮箱'
-            ,id: 21
-            ,spread: true
-            ,children: [
-              {
-                name: '收件箱'
-                ,id: 211
-                ,children: [
-                  {
-                    name: '所有未读'
-                    ,id: 2111
-                  }, {
-                    name: '置顶邮件'
-                    ,id: 2112
-                  }, {
-                    name: '标签邮件'
-                    ,id: 2113
-                  }
-                ]
-              }, {
-                name: '已发出的邮件'
-                ,id: 212
-              }, {
-                name: '垃圾邮件'
-                ,id: 213
-              }
-            ]
-          }, {
-            name: '阿里云邮'
-            ,id: 22
-            ,children: [
-              {
-                name: '收件箱'
-                ,id: 221
-              }, {
-                name: '已发出的邮件'
-                ,id: 222
-              }, {
-                name: '垃圾邮件'
-                ,id: 223
-              }
-            ]
-          }
-        ]
+    var tree1 = tree.render({
+      elem: '#test1'
+      ,data: data1
+      ,click: function(obj){
+        layer.msg(JSON.stringify(obj.data))
      }
-    ]
-  });
-  
-  //生成一个模拟树
-  var createTree = function(node, start){
-    node = node || function(){
-      var arr = [];
-      for(var i = 1; i < 10; i++){
-        arr.push({
-          name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
-        });
+      ,oncheck: function(obj){
+        console.log(obj);
      }
-      return arr;
-    }();
-    start = start || 1;  
-    layui.each(node, function(index, item){  
-      if(start < 10 && index < 9){
-        var child = [
-          {
-            name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
-          }
-        ];
-        node[index].children = child;
-        createTree(child, index + start + 1);
+      ,onsearch:function(obj){
+        console.log(obj);
+      }
+      ,operate: function(obj){
+        var type = obj.type;
+        if(type == 'add'){
+          //ajax操作，返回key值
+          return index++;
+        }else if(type == 'edit'){
+          console.log(obj.elem.find('.layui-tree-txt').html());
+        }else if(type == 'del'){
+          console.log(obj);
+        };
+      }
+      ,dragend: function(state, obj, target){
+        console.log(state, obj, target);
+      }
+      ,showCheckbox: true  //是否显示复选框
+      ,key: 'id'  //自定义唯一标识的字段名
+      ,checked: [6, 7, 9]  //选中节点(依赖于 showCheckbox 以及 key 参数)
+      ,spread: [2, 4, 5]  //展开节点(依赖于 key 参数)
+      ,accordion: 0  //是否开启手风琴模式
+      ,expandClick: true  //选择在点击节点(true)/箭头图标(false)的时候展开节点
+      ,isJump: 0  //点击文案跳转地址
+      ,renderContent: true  //增删改
+      ,showSearch: true  //是否打开节点过滤
+      ,draggable: true  //是否开启节点拖拽
+    });
+
+    console.log(tree1.getCheck()); //返回当前勾选节点
+    tree1.setCheck([2, 3]); //设置节点勾选
+
+
+
+    
+    tree.render({
+      elem: '#test2'
+      ,data: data1
+      //,expandClick: false
+      ,showLine: false //关闭连接线
+      ,click: function(obj, state){
+        console.log(obj[0]);
+      }
+      ,oncheck: function(obj, checked, child){
+        if(checked){
+          console.log(obj[0]);
+        }
+      }
+      ,onsearch: function(data, num){
+        console.log(num);
+      }
+      ,dragstart: function(obj, parent){
+        console.log(obj, parent);
+      }
+      ,dragend: function(state, obj, target){
+        console.log(state, obj, target);
      }
    });
-    return node;
-  };
-
-  layui.tree({
-    elem: '#demo1' //指定元素
-    ,nodes: createTree()
+     
  });
-  
-});
 </script>

-<pre class="layui-code">
-# layui.tree-v2 备忘
-* check参数 - checkbox、radio的支持
-* 拖拽的支持
-</pre>
-
 </body>
-</html>
+</html>
--- a/examples/upload.html
+++ b/examples/upload.html
@@ -101,7 +101,7 @@ layui.use('upload', function(){
      }
    }
    ,choose: function(){
-      console.log(1)
+      
    }
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
@@ -110,6 +110,7 @@ layui.use('upload', function(){
      });
    }
    ,done: function(res){
+    
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
@@ -117,6 +118,8 @@ layui.use('upload', function(){
      //上传成功
    }
    ,error: function(){
+      this.item.html('重选上传');
+      
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
@@ -126,6 +129,13 @@ layui.use('upload', function(){
    }
  });
  
+  //重置上述 upload 实例
+  uploadInst.reload({
+    name:'avatar'
+    ,acceptMime: 'image/*'
+    //,size: 2
+  });
+  
  upload.render({
    elem: '#test2'
    ,url: ''
--- a/examples/util.html
+++ b/examples/util.html
@@ -13,6 +13,12 @@ body{padding: 50px;}
 </head>
 <body>

+<button class="layui-btn" lay-active="e1">事件1</button>
+<button class="layui-btn" lay-active="e2">事件2</button>
+<button class="layui-btn" lay-active="e3">事件3</button>
+
+<hr>
+
 <div id="test"></div>

 <hr>
@@ -51,6 +57,20 @@ layui.use('util', function(){
  //某个时间在当前时间的多久前
  var str = util.timeAgo(new Date(2017,7,15,2,58,0));
  $('#test1').html('示例写于：'+ str);
+  
+  //处理属性 为 lay-active 的所有元素事件
+  util.event('lay-active', {
+    e1: function(){
+      alert('事件1')
+    }
+    ,e2: function(){
+      alert('事件2')
+    }
+    ,e3: function(){
+      alert('事件3')
+    }
+  });
+  
 });
 </script>
 </body>