最新公告
  • 欢迎您光临源码资源下载站,一个优质的网站源码和小程序源码分享基地。
  • layui 中实现按钮点击事件

    正文概述 皓玉源码   2023-12-15 18:09:42  
    一、layui 中按钮的点击事件 layui 使用 jquery 方式
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>测试1</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="Access-Control-Allow-Origin" content="*">
        <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="/jslib/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
        <style>
        </style>
    </head>
    <body >
    <button class="layui-btn layui-btn-warm" id="btn">一个标准的按钮</button>
    <p></p>
    <div class="layui-tab">
    <ul class="layui-tab-title">
    <li class="layui-this">首页</li>
    <li>新闻</li>
    <li>案例</li>
    </ul>
    <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">首页</div>
    <div class="layui-tab-item ">新闻</div>
    <div class="layui-tab-item ">案例</div>
    </div>
    </div>
    <script src="/jslib/layuimini/lib/layui-v2.6.3/layui.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['form', 'layedit', 'laydate','element','jquery'], function() {
            var form = layui.form,
            layer = layui.layer,
            element=layui.element,
            $=layui.jquery;
            $(document).on('click','#btn',function(){
                layer.msg('hello');
                alert("111111");
            });
            $(document).
        });
    </script>
    </body>
    </html>
    二、js 实现
    HTML:
    <button class="layui-icon layui-icon-export" id="withExport"></button>
    JS:
    $(document).on('click',"#withExport",function(){
            layer.msg("按钮点击");
    });
    三、jQuery 实现
    HTML:
    <button class="layui-icon layui-icon-export" id="withExport"></button>
    JS:
    $("#withExport").click(function(){
        layer.msg("点击事件");
    });
    四、lay-active 实现
    HTML:
    <div class="layui-btn-container">
      <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>
    </div>
    JS:
    //处理属性 为 lay-active 的所有元素事件
      util.event('lay-active', {
        e1: function(){
          layer.msg('触发了事件1');
        }
        ,e2: function(){
          layer.msg('触发了事件2');
        }
        ,e3: function(){
          layer.msg('触发了事件3');
        }
      });
    通过 util.event 可以监听到所有 lay-active 的 button 点击事件。layui 中实现按钮点击事件
    皓玉源码网,一个优质的源码资源平台!
    皓玉源码网 » layui 中实现按钮点击事件