layui中实现按钮点击事件

首先,小编要告诉大家一个残酷的现实,那就是小编没有找到layui对点击事件的支持…

这里的点击事件是指单纯的点击事件,而不是提交事件,或者是数据表格中内嵌的button,对于这两者,layui是有lay-submit和lay-event这个属性进行支持的,所以这里只能使用最原始的js和jq进行监听点击事件。

第一种,js的监听://给普通按钮绑定事件

<button class="layui-btn layui-btn-warm" id="btn">一个标准的按钮</button>

<script src="static/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');

});

});

</script>
第二种,jQuery的监听 //给普通按钮绑定事件

button class="layui-icon layui-icon-export" id="withExport"></button>
 
$("#withExport").click(function(){
    layer.msg("点击事件");
});
 
以上就是在layui中可以使用的监听事件。

在layui中按钮绑定点击事件 action 方法

https://blog.csdn.net/weixin_44578313/article/details/96430189

layui 绑定事件监听

下面是绑定普通事件

①html页面给你想要绑定的地方加上id或class属性,下面我以id举例

 <a class="iconfont icon-touxiang layui-hide-xs" id="zq_login"></a>

②js部分

$(function () {
    layui.use('layer', function(){
        var $ = layui.jquery
            ,layer = layui.layer //弹层
 
        //弹出登录页面
        $(document).on('click','#zq_login',function(){
            alert("这里写自己的功能...");
            /*layer.open({ //layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
                type: 2,
                title:"登录页面",
                area: ['55%','85%'],//类型:String/Array,默认:'auto'  只有在宽高都定义的时候才不会自适应
                fix: false, //不固定
                maxmin: true,//开启最大化最小化按钮
                shadeClose: true,//点击阴影处可关闭
                shade:0.4,//背景灰度
                skin: 'layui-layer-rim', //加上边框
                content: '/zq_blog/html/login_page/index.html',
                // resize:false
            });*/
        });
 
    });
 
});

 


 

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值