本文作者:DurkBlue

谈谈layui的弹出层

DurkBlue 2021-11-26 803 抢沙发
谈谈layui的弹出层摘要: layer 至今仍作为 layui 的代表作,它的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务,在 W...

layer 至今仍作为 layui 的代表作,它的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务,在 Web 开发者的圈子里口口相传,乃至于成为今天的 layui 最强劲的源动力。目前,layer 已然成为网页弹出层的首选交互方案,几乎随处可见。

<!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="/css/layui.css">
    </head>
    <script type="text/javascript" src="layui/layui.all.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    
<!--     * 从官网下载的layui包中解压后内容如下
     * ├─css //css目录
      │  │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
      │  │  ├─laydate
      │  │  ├─layer
      │  │  └─layim
      │  └─layui.css //核心样式文件
      ├─font  //字体图标目录
      ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
      │─lay //模块核心目录
      │  └─modules //各模块组件
      │─layui.js //基础核心库
      └─layui.all.js //包含layui.js和所有模块的合并文件
      
      * 这里要十分注意的是,我们测试的代码中引入layui的js要引入 layui.all.js,否则某些功能会无效-->
      
    <body>
        <!-- 你的HTML代码 -->
        <div>
            aa
        </div>
        <button id="start" data-method="setTop" class="layui-btn">显示弹出层</button>
    <script>
    
         $(function(){
             
             //打开弹窗
             $("#start").on("click",function(){
                 f5();
             });
        });
        
        //单个确认按钮(常用)
        function f7(){
            layer.alert("aa");
        }
        
        //确认、取消按钮(常用)
        function f6(){
            layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
              //do something
              alert("aa")
              layer.close(index);
            });
        }
        
        //自动消失提示(常用)
        function f7(){
            layer.msg("aa");
        }
        
        
        //单个按钮
        function f5(){
            layer.open({
              content: 'test'
              ,btn: ['按钮一']
              
            });
        }
         
//下面仅供参考         
         
        //多个确认按钮
        function f2(){
            layer.confirm('纳尼?', {
                btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
                    ,
                btn3: function(index, layero) {
                    //按钮【按钮三】的回调
                }
            }, function(index, layero) {
                //按钮【按钮一】的回调
            }, function(index) {
                //按钮【按钮二】的回调
            });
    
        }
        
        //多个确认按钮
        function f3(){
            layer.open({
              content: 'test'
              ,btn: ['按钮一', '按钮二', '按钮三']
              ,yes: function(index, layero){
                //按钮【按钮一】的回调
                alert(1);
                layer.close(index);
              }
              ,btn2: function(index, layero){
                //按钮【按钮二】的回调
                 alert(2);
                //return false 开启该代码可禁止点击该按钮关闭
              }
              ,btn3: function(index, layero){
                //按钮【按钮三】的回调
                alert(3);
                //return false 开启该代码可禁止点击该按钮关闭
              }
              ,cancel: function(){ 
                //右上角关闭回调
                
                //return false 开启该代码可禁止点击该按钮关闭
              }
            });
        }
        
        //多个确认按钮
        function f4(){
            layer.open({
              content: 'test'
              ,btn: ['确定', '取消']
              ,yes: function(index, layero){
                //确定的回调
                alert(1);
                layer.close(index);
                return 1;
              }
              ,btn2: function(index, layero){
                //取消的回调
                 alert(2);
                 return 2;
                //return false 开启该代码可禁止点击该按钮关闭
              }
             
              ,cancel: function(){ 
                //右上角关闭回调
//                return false //开启该代码可禁止点击该按钮关闭
              }
            });
        }
        
        
    </script>
</html>


此篇短文由DurkBlue发布,写作不易转载请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2021-11-26
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,803人围观)参与讨论

还没有评论,来说两句吧...