From 215f230d79945896d2c4cb8b0bd48b4895978920 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?=
 <3277200+sentsim@users.noreply.github.com>
Date: Fri, 12 Aug 2022 00:57:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20layer=20=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/layer.html | 111 +++++++++++++++++++++++++-------------------
 1 file changed, 62 insertions(+), 49 deletions(-)
diff --git a/examples/layer.html b/examples/layer.html
index 73cd393b..3ea830ab 100644
--- a/examples/layer.html
+++ b/examples/layer.html
@@ -19,15 +19,17 @@ body{padding: 100px;}
 <body>
 
 <div class="layui-btn-container">
-  <button class="layui-btn layui-btn-primary demo" data-type="test">Alert</button>
-  <button class="layui-btn demo" data-type="test2">Confirm</button>
-  <button class="layui-btn demo" data-type="test3">Msg</button>
-  <button class="layui-btn demo" data-type="test4">Tips</button>
-  <button class="layui-btn demo" data-type="test5">Page</button>
-  <button class="layui-btn demo" data-type="test6">Iframe</button>
-  <button class="layui-btn demo" data-type="test7">Prompt</button>
-  <button class="layui-btn demo" data-type="test8">Tab</button>
-  <a href="http://layer.layui.com/" target="_blank" class="layui-btn demo">更多例子</a>
+  <button class="layui-btn layui-btn-primary" lay-on="test">Alert</button>
+  <button class="layui-btn" lay-on="test2">Confirm</button>
+  <button class="layui-btn" lay-on="test3">Msg</button>
+  <button class="layui-btn" lay-on="test5">Page</button>
+  <button class="layui-btn" lay-on="test6">Iframe</button>
+  <button class="layui-btn" lay-on="testLoading">Loading</button>
+  <button class="layui-btn" lay-on="test4">Tips</button>
+  <button class="layui-btn" lay-on="test7">Prompt</button>
+  <button class="layui-btn" lay-on="test8">Tab</button>
+  <button class="layui-btn" lay-on="testTime">自动关闭</button>
+  <a href="https://layui.gitee.io/v2/demo/layer.html" target="_blank" class="layui-btn">更多例子</a>
 </div>
 
 <div id="test11111" style="display: none; padding: 20px;">
@@ -38,12 +40,11 @@ body{padding: 100px;}
 
 <div class="layui-list">
   <ul class="layui-row" id="photos">
-    <li class="list"><img src="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png"></li>
-    <li class="list"><img src="https://res.layui.com/static/images/fly/fly.jpg"></li>
+    <li class="list"><img src="https://unpkg.com/outeres/demo/1.jpg"></li>
+    <li class="list"><img src="https://unpkg.com/outeres/demo/2.jpg"></li>
   </ul>
 </div>
 
-
 <script>
 var LAYUI_GLOBAL = {
   //path: '../src/'
@@ -91,64 +92,63 @@ window.jQuery && runTest(1, window.jQuery, window.layer);
 
 layui.use(['layer', 'util'], function(layer, util){
   var $ = layui.jquery;
+  var util = layui.util;
   //return
   
-  var index = layer.msg('hello');
+  var index = layer.msg('Hello World');
   //layer.close(index);
   //runTest(1, $, layer);
   
   
-  //触发事件
-  var active = {
+  // 触发事件
+  util.on('lay-on', {
     test: function(){
-      layer.alert('你好么，体验者。<br>在标题栏显示自动关闭倒计秒数', {
-        time: 5*1000
-        ,success: function(layero, index){
-          var timeNum = this.time/1000, setText = function(start){
-            layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
-          };
-          setText(!0);
-          this.timer = setInterval(setText, 1000);
-          if(timeNum <= 0) clearInterval(this.timer);
+      var icon = -1;
+      (function changeIcon(){
+        var index = layer.alert('Hi，你好！ 点击确认更换图标', {
+          icon: icon,
+          shadeClose: true,
+          title: icon === -1 ? 'Alert' : ('icon: '+ icon)
+        }, changeIcon);
+        if(icon++ > 6){
+          layer.close(index);
+          icon = -1;
         }
-        ,end: function(){
-          clearInterval(this.timer);
-        }
-      });
+      }());
     }
     ,test2: function(){
-      layer.confirm('您是如何看待前端开发？', {
-        btn: ['重要','奇葩'] //按钮
+      layer.confirm('一个询问层的测试示例？', {
+        btn: ['确定','关闭'] //按钮
       }, function(){
-        layer.msg('的确很重要', {icon: 1});
+        layer.msg('第一个回调', {icon: 1});
       }, function(){
-        layer.msg('也可以这样', {
+        layer.msg('第二个回调', {
           time: 20000, //20s后自动关闭
           btn: ['明白了', '知道了']
         });
       });
     }
     ,test3: function(){
-      layer.msg('提示中');
+      !1 ? layer.msg('一个常用消息框')
+      : layer.msg('一个常用消息框',{closeBtn: 0,time: 0, icon: 16});
     }
     ,test4: function(){
       layer.tips('Hi，我是一个小提示', this, {tips: 1});
     }
     ,test5: function(){
-       layer.open({
+      layer.open({
         title:'自定义页面层',
         type: 1,
-        skin: 'layui-layer-rim', 
+        skin: 'layui-layer-border', 
         area: ['1000px', '580px'], 
         content: $('#test11111'),
         maxmin: true,
+        shade: false,
         minStack: false, //最小化不堆叠在左下角
         id: 'page1', //定义 ID，防止重复弹出
         min: function(layero, index){
-          
           layer.msg('阻止了默认的最小化');
           layer.style(index, {top: 'auto', bottom: 0});
-          
           return false;
         }
       });
@@ -161,6 +161,12 @@ layui.use(['layer', 'util'], function(layer, util){
         ,maxmin: true
       });
     }
+    ,testLoading: function(){
+      layer.load(2, {
+        //time: 5*1000
+        //content: '123'
+      });
+    }
     ,test7: function(){
       layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
         layer.close(index);
@@ -185,8 +191,23 @@ layui.use(['layer', 'util'], function(layer, util){
         }]
       });
     }
-    
-  };
+    ,testTime: function(){
+      layer.alert('你好么，体验者。<br>在标题栏显示自动关闭倒计秒数', {
+        time: 5*1000
+        ,success: function(layero, index){
+          var timeNum = this.time/1000, setText = function(start){
+            layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
+          };
+          setText(!0);
+          this.timer = setInterval(setText, 1000);
+          if(timeNum <= 0) clearInterval(this.timer);
+        }
+        ,end: function(){
+          clearInterval(this.timer);
+        }
+      });
+    }
+  });
   
   //相册层
   layer.photos({
@@ -201,16 +222,8 @@ layui.use(['layer', 'util'], function(layer, util){
   
   
   //动态追加
-  $('#photos').append('<li class="list"><img src="https://res.layui.com/static/images/sentsin/night.gif"></li>');
-  
-  //{"status":1,"msg":"","title":"JSON请求的相册","id":8,"start":0,"data":[{"alt":"layer","pid":109,"src":"//cdn.layui.com/upload/2017_3/168_1488985841996_23077.png","thumb":""},{"alt":"说好的，一起 Fly","pid":110,"src":"//res.layui.com/static/images/fly/fly.jpg","thumb":""},{"alt":"星空如此深邃","pid":113,"src":"//res.layui.com/static/images/sentsin/night.gif","thumb":""}]}
-  
-  
-  
-  $('.demo').on('click', function(){
-    var type = $(this).data('type');
-    active[type] ? active[type].call(this) : '';
-  });
+  $('#photos').append('<li class="list"><img src="https://unpkg.com/outeres/demo/3.jpg"></li>');
+ 
 });
 </script>
 </body>
