《layUI 弹出层 and 按钮》

亦凉 2022-04-17 02:12 495阅读 0赞

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>按钮 and 弹出层</title>
    </head>
    <body>
    
    
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all">
    
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    
    <%-- <script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script> --%>
    
    <script type="text/javascript">
    //JavaScript代码区域
    
      layui.use(['element','layer'], function(){
    	  var layer = layui.layer,
    	  element = layui.element;
    
    //	  layer.msg(treeNode.id+" , "+treeNode.name + " , " +treeNode.checked);
      
      layer.ready(function(){
            layer.msg('很高兴一开场就见到你');
      });      
      
      document.getElementById('Button1').onclick = function () {
          layer.open({
              type: 2, //弹出层类别:layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
              closeBtn: 1, //关闭按钮显示0-2
              btnAlign: 'c', //按钮居中对齐 I-C-R
              fixed: false, //即鼠标滚动时，层是否固定在可视区域(true/false是否开启)
              title: "弹出层！", //标题
              shade: 0, //弹框外的区域是否覆盖
              //shadeClose:false, // 是否点击遮罩关闭
              area: ['340px', '215px'], //弹出层大小
              resize:true, //是否允许拉伸,该参数对loading、tips层无效
              moveOut:true, // 是否允许拖拽到窗口外
              
           /* offset: 'auto' 	默认坐标，即垂直水平居中
              offset: '100px' 	只定义top坐标，水平保持居中
              offset: ['100px', '50px'] 	同时定义top、left坐标
              offset: 't' 	快捷设置顶部坐标
              offset: 'r' 	快捷设置右边缘坐标
              offset: 'b' 	快捷设置底部坐标
              offset: 'l' 	快捷设置左边缘坐标
              offset: 'lt' 	快捷设置左上角
              offset: 'lb' 	快捷设置左下角
              offset: 'rt' 	快捷设置右上角
              offset: 'rb' 	快捷设置右下角*/
              offset: 'auto', //坐标 
              
              time: 5000, //自动关闭时间（毫秒）
              isOutAnim: true, //关闭动画(true/false是否开启)
              anim: 2, //弹出方式0-6
              content: ['HtmlPage2.html', 'no'], //iframe的url，no代表不显示滚动条
              end: function () { //关闭后回调函数
                  //alert('关闭！');
            	  layer.msg('关闭！');
              }
          });
      }
      
      
      document.getElementById('Button2').onclick = function () {
          layer.open({
              type: 0, //弹出层类别
              title: "弹出层！", //标题
              closeBtn: 1, //关闭按钮显示
              btnAlign: 'c', //按钮居中对齐
              area: ['340px', '215px'], //弹出层大小
              offset: 'auto', //坐标
              cancel: function(index, layero){ 
            	  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            	    layer.close(index)
            	  }
            	  return false; 
            	}    
           });
      }
      
      
      document.getElementById('Button3').onclick = function () {
          layer.open({
              type: 1, //弹出层类别
              title: "弹出层！", //标题
              closeBtn: 1, //关闭按钮显示
              btnAlign: 'c', //按钮居中对齐
              shadeClose:true, // 是否点击遮罩关闭
              area: ['340px', '215px'], //弹出层大小
              offset: 'auto', //坐标
              cancel: function(index, layero){ 
            	  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            	    layer.close(index)
            	  }
            	  return false; 
            	}    
           });
      }
    
    	  
      document.getElementById('Button4').onclick = function () {
          layer.open({
              type: 0, //弹出层类别
              title: "弹出层！", //标题
              closeBtn: 1, //关闭按钮显示
              btnAlign: 'c', //按钮居中对齐
              area: ['340px', '215px'], //弹出层大小
              offset: 'auto', //坐标
              cancel: function(index, layero){ 
            	  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            	    layer.close(index)
            	  }
            	  return false; 
            	}    
           });
      }
      
      
      document.getElementById('Button5').onclick = function () {
          layer.open({
              type: 0, //弹出层类别
              title: "弹出层！", //标题
              closeBtn: 1, //关闭按钮显示
              btnAlign: 'c', //按钮居中对齐
              area: ['340px', '215px'], //弹出层大小
              offset: 'auto', //坐标
              cancel: function(index, layero){ 
            	  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            	    layer.close(index)
            	  }
            	  return false; 
            	}    
           });
      }
      
      
      document.getElementById('Button6').onclick = function () {
          layer.open({
              type: 0, //弹出层类别
              title: "弹出层！", //标题
              closeBtn: 1, //关闭按钮显示
              btnAlign: 'c', //按钮居中对齐
              shade: 0, //弹框外的区域是否覆盖
              area: ['340px', '215px'], //弹出层大小
              offset: 'auto', //坐标
              cancel: function(index, layero){ 
            	  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            	    layer.close(index)
            	  }
            	  return false; 
            	}    
           });
      }
      
      
      document.getElementById('Button7').onclick = function () {
          layer.open({
              type: 0, //弹出层类别
              title: "弹出层！", //标题
              closeBtn: 1, //关闭按钮显示
              btnAlign: 'c', //按钮居中对齐
              shade: 0, //弹框外的区域是否覆盖
              area: ['340px', '215px'], //弹出层大小
              offset: 'lt', //坐标 
              cancel: function(index, layero){ 
            	  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            	    layer.close(index)
            	  }
            	  return false; 
            	}    
           });
      }
      
      
      document.getElementById('Button8').onclick = function () {
          layer.open({
              type: 0, //弹出层类别
              title: "弹出层！", //标题
              closeBtn: 1, //关闭按钮显示
              btnAlign: 'c', //按钮居中对齐
              shade: 0, //弹框外的区域是否覆盖
              area: ['340px', '215px'], //弹出层大小
              offset: 'lb', //坐标 
              cancel: function(index, layero){ 
            	  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            	    layer.close(index)
            	  }
            	  return false; 
            	}    
           });
      }
      
      
      document.getElementById('Button9').onclick = function () {
          layer.open({
              type: 0, //弹出层类别
              title: "弹出层！", //标题
              closeBtn: 1, //关闭按钮显示
              btnAlign: 'c', //按钮居中对齐
              shade: 0, //弹框外的区域是否覆盖
              area: ['340px', '215px'], //弹出层大小
              offset: 'rt', //坐标 
              cancel: function(index, layero){ 
            	  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            	    layer.close(index)
            	  }
            	  return false; 
            	}    
           });
      }
      
      
      document.getElementById('Button10').onclick = function () {
          layer.open({
              type: 0, //弹出层类别
              title: "弹出层！", //标题
              closeBtn: 1, //关闭按钮显示
              btnAlign: 'c', //按钮居中对齐
              shade: 0, //弹框外的区域是否覆盖
              area: ['340px', '215px'], //弹出层大小
              offset: 'rb', //坐标
              cancel: function(index, layero){ 
            	  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            	    layer.close(index)
            	  }
            	  return false; 
            	}    
           });
      }
      
      
      document.getElementById('Button11').onclick = function () {
    	  
    	//eg2
    	 layer.open({
    	  content: 'test'
    	  ,btn: ['按钮一', '按钮二', '按钮三']
    	  ,yes: function(index, layero){
    	    //按钮【按钮一】的回调
    		  layer.msg("按钮【按钮一】的回调");
    	  }
    	  ,btn2: function(index, layero){
    	    //按钮【按钮二】的回调
    	    layer.msg("按钮【按钮二】的回调");
    	    //return false 开启该代码可禁止点击该按钮关闭
    	  }
    	  ,btn3: function(index, layero){
    	    //按钮【按钮三】的回调
    	    layer.msg("按钮【按钮三】的回调");
    	    //return false 开启该代码可禁止点击该按钮关闭
    	  }
    	  ,cancel: function(){ 
    	    //右上角关闭回调
    	    layer.msg("关闭回调");
    	    //return false 开启该代码可禁止点击该按钮关闭
    	  }
    	  
    	});
    
      }
      
      
      document.getElementById('Button12').onclick = function () {
          
    	//eg1--信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。如：
    	// layer.alert('酷毙了', {icon: 1});
    	//eg2
    	// layer.msg('不开心。。', {icon: 5});
    	//eg3
    	 layer.load(1); //风格1的加载
          
      }
      
      
      document.getElementById('Button13').onclick = function () {
              
        	   //eg1       
        	   layer.confirm('弹出层', {
        	    btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
        	    ,btn3: function(index, layero){
        	      //按钮【按钮三】的回调
        	      
        	    	layer.open({
        	            type: 0, //弹出层类别
        	            title: "按钮弹出层3", //标题
        	            closeBtn: 1, //关闭按钮显示
        	            btnAlign: 'c', //按钮居中对齐
        	            area: ['340px', '215px'], //弹出层大小
        	            offset: 'auto', //中间
        	         });
        	      
        	    }
        	  },function(index, layero){
        	    //按钮【按钮一】的回调
        		  layer.open({
      	            type: 0, //弹出层类别
      	            title: "按钮弹出层1", //标题
      	            closeBtn: 1, //关闭按钮显示
      	            btnAlign: 'c', //按钮居中对齐
      	            area: ['340px', '215px'], //弹出层大小
      	            offset: 'auto', //中间
      	         });
        	    
        	  },function(index){
        	    //按钮【按钮二】的回调
        		  layer.open({
      	            type: 0, //弹出层类别
      	            title: "按钮弹出层2", //标题
      	            closeBtn: 1, //关闭按钮显示
      	            btnAlign: 'c', //按钮居中对齐
      	            area: ['340px', '215px'], //弹出层大小
      	            offset: 'auto', //中间
      	         });
        	    
        	  });
    
      }
      
    
      });  
      
    </script> 
    
    <br>
    <br>
    <br>
    
     <h5>按钮</h5>                            
    <button id="Button1" type="button" class="layui-btn layui-btn-normal layui-btn-lg layui-btn-radius">弹出层</button>
    
    <br>
    <br>
    <br>
    
    
     <h5>按钮组</h5>
    <div class="layui-btn-group">
      <button id="Button2" type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon"></i>
      </button>
      <button id="Button3" type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon"></i>
      </button>
      <button id="Button4" type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon"></i>
      </button>
      <button id="Button5" type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon"></i>
      </button>
    </div>
    
    <br>
    <br>
    <br>
    
    
     <h5>按钮容器</h5>
    <div class="layui-btn-container">
      <button id="Button6" type="button" class="layui-btn">默认按钮</button> 
      <button id="Button7" type="button" class="layui-btn layui-btn-primary">原始按钮</button>
      <button id="Button8" type="button" class="layui-btn layui-btn-normal">百搭按钮</button> 
      <button id="Button9" type="button" class="layui-btn layui-btn-warm">暖色按钮</button> 
      <button id="Button10" type="button" class="layui-btn layui-btn-danger">警告按钮</button> 
      <button class="layui-btn layui-btn-disabled">禁用按钮</button> 
    </div>
    
    <br>
    <br>
    <br>
    
    
     <h5>图标按钮</h5>
    <button id="Button11" type="button" class="layui-btn">
      <i class="layui-icon"></i> 添加
    </button>
     
    <button id="Button12" type="button" class="layui-btn layui-btn-sm layui-btn-primary">
      <i class="layui-icon">ဂ</i>
    </button>
    
    <br>
    <br>
    <br>
    
    
     <h5>流体按钮（最大化适应）</h5>
    <button id="Button13" type="button" class="layui-btn layui-btn-fluid">流体按钮</button>
    
    </body>
    </html>