把预览例子迁移到 examples 目录

2025-10-21 19:17:33 +08:00 · 2017-08-23 12:29:22 +08:00
parent 67944ce224
commit f28819e903
23 changed files with 0 additions and 0 deletions
--- a/examples/tree.html
+++ b/examples/tree.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>树模块 - layui</title>
+
+<link rel="stylesheet" href="../src/css/layui.css">
+
+<style>
+body{padding: 50px 100px;}
+</style>
+</head>
+<body>
+
+<ul id="demo"></ul>
+
+<ul id="demo1" style="margin-top: 50px;"></ul>
+
+<script src="../src/layui.js"></script>
+<script>
+
+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 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')
+        });
+      }
+      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);
+      }
+    });
+    return node;
+  };
+
+  layui.tree({
+    elem: '#demo1' //指定元素
+    ,nodes: createTree()
+  });
+  
+});
+</script>
+
+<pre class="layui-code">
+# layui.tree-v2 备忘
+* check参数 - checkbox、radio的支持
+* 拖拽的支持
+</pre>
+
+</body>
+</html>