layui中实现按钮点击事件

2023-05-16

首先,小编要告诉大家一个残酷的现实,那就是小编没有找到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
            });*/
        });
 
    });
 
});

 


 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

layui中实现按钮点击事件 的相关文章

  • 简单制作后台系统页面(含菜单)

    第一步 制作数据库表 我个人喜欢在PowerDesigner先建好数据库模型 然后导入到mysql里 导入方式 在PowerDesigner导航栏点开Datebase选择Datebase Generation再选择最后的preview 然后
  • layui文件上传+ThinkPHP5.1

    引入文件 1 前端html代码
  • LayUi之手风琴的趣味案例

    Welcome Huihui s Code World 接下来看看由辉辉所写的关于LayUi的相关操作吧 目录 Welcome Huihui s Code World 一 手风琴是什么 二 手风琴在什么时候使用 常见使用场景 三 怎么完成手
  • layui使用初步入门

    目录 布局元素 字体图标 按钮 表单 数据表格 弹出层 layui官方地址 layui是模块化框架 这表示你想实现它的某个功能 可以选择不全部引入 只要引入一个一个相关的模块文件即可 引入的方式有两种 一种是将之当成独立组件引入 如 另一种
  • LayUI导入Excel表(Apache POI)

    LayUI导入Excel表 Apache POI 前端框架LayUI 将excel表导入到数据库 并展示在页面 首先要明白 excel表整体构造 一整个 excel表是一个工作簿 workbook 而其中又有很多工作表 sheet 然后一行
  • layui折叠面板无效 - 已解决

    出现折叠面板无效 可能因为一下两点造成的 原因一 原因二 具体是为什么 我不清楚 正确的方式
  • layui 前端下载文件方法

    文件下载 function downLoadFile ids name 获取token var tableName layui data setter tableName 创建下载请求 var oReq new XMLHttpRequest
  • layui 手风琴折叠

    效果图 1 引入文件 注意 文件的位置不一样 引入的路径也不同 2 编写div样式 div style width 100 div class layui collapse div class layui c div div div
  • layui跨域问题

    由于浏览器存在同源策略 所以如果 layui 里面含图标字体文件 所在的地址与你当前的页面地址不在同一个域下 即会出现图标跨域问题 所以要么你就把 layui 与网站放在同一服务器 要么就对 layui 所在的资源服务器的 Response
  • LayUI之CRUD(增删改查)

    目录 前言 一 前端静态模板 二 用户管理后台代码 查看表 MySQL数据库 表结构 实体类 Dao方法 UserDao 查询 增加 删除 修改 测试后台dao方法 Junit UserDaoTest 查询 增加 修改 删除 web 三 用
  • layui弹窗间的传值(layui弹出层传值)(窗口传值)

    layui弹窗间的传值 layui弹出层传值 窗口传值 LayUI父窗口向弹出层传递数据可以解决页面中的编辑数据的操作 点击编辑按钮 父窗口传递当前选中行当数据至弹出层 弹出层获取到父窗口传递的数据 接着在弹出层中展示出来 效果如下 具体步
  • springboot实战---记账本项目

    项目放在了服务器上 点我访问项目 root权限账号密码 root root 普通用户账号密码 user 123456 登陆界面预览 主页面预览 只做了一个页面的增删改查 使用springboot mybatis shiro layui 我使
  • 让Layui的table模块支持动态表头

    layui自带的table js插件是不支持的 这里我们简单的加几个字符进去 就可以支持了 1 打开插件目录下的layui lay modules目录 用文本文件打开table js 然后搜索 item2 title 在table js将
  • Layui实现登录注册共用页面

    正文 创建一个Spring Boot项目 勾选Web Thymeleaf即可 pom文件中导入图片验证码的依赖
  • 关于Layui后台ajax返回问题

    刚接触LayUI 几次出现 返回的数据异常 问题 皆是因为数据的格式不对 这里做个小笔记 一般的格式这个样子 data result array code gt 0 msg gt count gt 100 data gt
  • LayUi介绍&前言

    目录 1 什么是layui 2 layui easyui与bootstrap的对比 有趣的对比方式 嘿嘿嘿 easyui jquery html4 用来做后台的管理界面 半老徐娘 bootstrap jquery html5 美女 拜金 l
  • 使用layui/layuiAdmin的总结

    layui是一个前端UI框架 主要是配合JQuery使用 开始使用 首先是下载文件 然后引入css和js文件 引入之后就需要在
  • 文件ajax上传方式

    直接看代码 1 html table class layui table thead tr td width 20 产品信息 td td 产品信息 td tr thead tbody tr td 产品名称 td td td tr tbody
  • layui switch 设置默认开关属性

    给元素定义ID switch order var flag true if flag document getElementById switch order setAttribute checked on else document ge
  • layui会议OA项目数据表格新增改查

    文章目录 前言 一 后台代码编写 1 1 数据表优化 1 2 R工具类 1 3 UserDao新增改查 1 4 Servlet的编写 二 前台页面的编写 2 1 userManege jsp 2 2 userManage js 2 3 新增

随机推荐

  • STM32MP157AAA3裸机点灯(汇编)

    STM32MP157AAA3裸机点灯 汇编 MP157的A7核裸机点灯 使用的开发板为华清远见的MP157开发板 xff0c 默认板内emmc已经烧写好了uboot 这篇就只记录一下汇编点灯过程 xff0c uboot等内容暂不涉及 xff
  • 用tkinter写出you-get下载器界面,并用pyinstaller打包成exe文件

    写在前面 xff1a 本文为笔者最早于 2019 05 11 23 15 以 64 拼命三郎 的身份发表于博客园 本文为原创文章 xff0c 转载请标明出处 一 you get介绍 you get是一个基于 python3 的下载工具 xf
  • Linux网络协议栈4--bridge收发包

    bridge 是linux上的虚拟交换机 xff0c 具有交换机的功能 网卡收到包后 xff0c 走到 netif receive skb core后 xff0c 剥完vlan找到vlan子接口 xff08 如果有的话 xff09 xff0
  • linux redis启动时报错WARNING overcommit_memory is set to 0! Background save may fail under low memory con

    报错 xff1a WARNING overcommit memory is set to 0 Background save may fail under low memory condition To fix this issue add
  • STM32编程语言介绍

    STM32入门100步 第8期 编程语言介绍 杜洋 洋桃电子 上一期我们在电脑上安装好了KEIL软件 xff0c 也新建了工程 xff0c 在工程中安装了固件库 准备工作完成后 xff0c 接着就是在工程中编写程序了 只有程序使ARM内核有
  • VMware虚拟机安装Linux教程(超详细)

    写给读者 为了帮助Linux系统初学者学习的小伙伴更好的学习 xff0c VMware虚拟机是不可避免的 xff0c 因此下载 安装VMware和完成Linux的系统安装是非常必要的 接下来 xff0c 我们就来系统的学习一下VMware虚
  • Markdown中的LaTeX公式——希腊字母详解

    若要在Markdown中使用 xff0c 则在两个美元符号之间敲入对应LaTeX代码实现公式行显示效果 xff0c 若为公式块 xff0c 则要在四个美元符号中间敲入 xff0c 类似Markdown代码行和代码块 共24个希腊字母 xff
  • FFmpeg学习(一)-- ffmpeg 播放器的基础

    FFmpeg学习 xff08 一 xff09 FFmpeg学习 xff08 二 xff09 FFmpeg学习 xff08 三 xff09 FFmpeg的的是一套可以用来记录 xff0c 转换数字音频 xff0c 视频 xff0c 并能将其转
  • ios Instruments之Allocations

    文章目录 一 span class hljs function Allocations 监测内存分配 span 1 简介 2 如何使用 一 Allocations 1 简介 性能优化中使用Instruments Allocations工具进
  • linux-Centos-7-64位:4、 mysql安装

    从最新版本的Linux系统开始 xff0c 默认的是 Mariadb而不是MySQL xff01 这里依旧以mysql为例进行展示 1 先检查系统是否装有mysql rpm qa span class hljs string style c
  • Win10 WSL忘记用户密码,重置密码

    win10中WSL登录是不用密码的 xff0c 当需要使用用户权限但是忘记密码的时候 xff0c 可以使用如下办法以root身份登录WSL并重置密码 1 以管理员身份打开 PowerShell 2 输入命令 wsl exe user roo
  • 51单片机定时时间的计算

    单片机根据计时 计数模式的不同 xff0c 来进行计算 M1 M0 工作模式 说明 0 0 0 13位计时计数器 xff08 8192 xff09 0 1 1 16位计时计数器 xff08 65536 xff09 1 0 2 8位计时计数器
  • Go语言之禅

    本文翻译自Go社区知名Gopher和博主Dave Cheney的文章 The Zen of Go 本文来自我在GopherCon Israel 2020上的演讲 文章很长 如果您希望阅读精简版 xff0c 请移步到the zen of go
  • UIScrollView及其子类停止滚动的监测

    作为iOS中最重要的滑动控件 UIScrollView居然没有停止滚动的Delegate方法 这有点蛋疼 但是我们可以根据滚动状态来判断是否滚动 span class hljs preprocessor pragma mark scroll
  • PCL库中Marching Cubes(移动立方体)算法的解析

    PCL库中Marching Cubes xff08 移动立方体 xff09 算法解析 1 Marching Cubes算法的原理这里不再赘述 xff0c 不懂的话 xff0c 提供一下文献资源 xff1a 链接 xff1a MARCHING
  • ubuntu18.04安装cuda-10.0和cudnn-7.4.2

    安装cuda 10 0 1 gcc 版本 Ubuntu18 04默认gcc g 43 43 7 3版本 xff0c 如果安装cuda 9并不支持 gcc g 43 43 7 xff0c 所以先降级至6或6以下 我自己的gcc是7 5 0 安
  • Ubuntu安装anaconda3后找不到conda命令

    Ubuntu安装anaconda3后找不到conda命令的原因是没有把anaconda3添加到路径 xff0c 类似于Windows中添加到环境变量 xff0c 所以找不到命令 解决方法是在终端中运行一下命令 xff1a echo 39 e
  • uCharts Y轴格式化

    官方文档 uCharts跨平台图表库 1 Y轴格式化用法 xff1a yAxis data calibration true position 39 left 39 title 39 折线 39 titleFontSize 12 forma
  • C#/.NET Winform 界面库UI推荐

    以下是C CSkin界面库的官方板块 xff1a http bbs cskin net thread 622 1 1 html 几款开源的Windows界面库 https blog csdn net blade2001 article de
  • layui中实现按钮点击事件

    首先 xff0c 小编要告诉大家一个残酷的现实 xff0c 那就是小编没有找到layui对点击事件的支持 这里的点击事件是指单纯的点击事件 xff0c 而不是提交事件 xff0c 或者是数据表格中内嵌的button xff0c 对于这两者