layui 中实现按钮点击事件
时间：2023年04月13日
编辑：佚名
一、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 点击事件。
<!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 点击事件。
相关文章
猜你需要
