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中实现按钮点击事件 的相关文章

  • 基于LayUI+Servlet的权限管理系统的设计

    权限管理是所有后台系统的都会涉及的一个重要组成部分 主要目的是对不同的人访问资源进行权限的控制 避免因权限控制缺失或操作不当引发的风险问题 如操作错误 隐私数据泄露等问题 本系统基于JSP Servlet JDBC LayUI的技术 在系统
  • layui使用初步入门

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

    div ul class easyui tree ul div div class easyui menu style width 120px div 添加 div div
  • layui树形渲染、layui树形后端返回类型、layui树形属性设置

    最近工作老是和layui打交道 躺过了坑有必要记录一下 下面直接上代码 前端 ajax type get url g const orb url api v1 department companyCode equipment deptIds
  • Layui实现点击文字、缩略图查看图片功能

    刚完成一个客户需求 同一个页面上要有点击缩略图查看大图功能 也有点击图片名称查看原图的功能 点击缩略图查看大图的功能 点击缩略图查看大图的功能实现用的是layui开发文档内的layer photos 相册层 官方开发文档里photos支持传
  • Layui数据表格

    添加表格容器 设置id 和 lay filter div table table div 2 layui use table function var table layui table 第一个实例
  • layui跨域问题

    由于浏览器存在同源策略 所以如果 layui 里面含图标字体文件 所在的地址与你当前的页面地址不在同一个域下 即会出现图标跨域问题 所以要么你就把 layui 与网站放在同一服务器 要么就对 layui 所在的资源服务器的 Response
  • 一款经典的ThinkPhp6开发的CMS内容管理系统

    项目介绍 一款 PHP 语言基于 ThinkPhp6 x Layui MySQL等框架精心打造的一款模块化 插件化 高性能的前后端分离架构敏捷开发框架 可用于快速搭建前后端分离后台管理系统 本着简化开发 提升开发效率的初衷 框架自研了一套个
  • ssm框架+Layui整合案例

    业余写得整合案例 想学习的可以来参考 初来乍到 准备工作 Layui tomcat mysql 目录 1 实现的效果图 2 实现代码 2 0 前端代码 2 1 登录页面login jsp 2 2 登录后跳转的主页面 main jap web
  • layui的使用

    下载链接 https pan baidu com s 1TIRrwFhua61jTqUCjme58Q pwd 1234 提取码 1234 gt layuiAdmin pro 即 单页版 gt layuiAdmin std 即 iframe
  • 2021-12-23 工作记录--LayUI-单击行内容展示子表(手风琴效果),堪称yyds

    LayUI 单击行内容展示子表 手风琴效果 百度了好多办法 都不能达到这种效果 所以记录一下 最开始使用layui soul table 但是它不能实现单击行内容展示子表 而是单击行最左列展示子表 所以与项目不符 则放弃了 但是感兴趣的小萝
  • layui时间选择器---去除秒列

    layui时间选择器 去除秒列 前言 layui开发文档中介绍的时间选择器包含了时 分 秒的选择 在实际开发过程中 我们选择时间可能不需要精确到秒 原始结构 1 HTML页面引入layui js文件 2 HTML文件中添加如下代码 3 在j
  • 使用layui/layuiAdmin的总结

    layui是一个前端UI框架 主要是配合JQuery使用 开始使用 首先是下载文件 然后引入css和js文件 引入之后就需要在
  • echarts实现一个页面同时显示多个图表

    前言 因工作需要 老大要求给我一个JSON数据 用echarts 写一个option实现多个图表 折线图 饼图 关系图 展示 也就是说只要一个div dom对象 实现多个不同形状的图表展示 ps 前期没弄清老大意思 写了三个div来显示 尴
  • Servlet获取Excel中数据的两种方式

    Servlet解析Excel文件的两种方式 简单分享一下Servlet通过解析Excel文件得到其中数据的两种方式 第一种 前端获取 思路 通过layui的第三方插件 layui excel 解析excel文件 得到数据 再通过Ajax传递
  • layui switch 设置默认开关属性

    给元素定义ID switch order var flag true if flag document getElementById switch order setAttribute checked on else document ge
  • 初识Layui——Layui的使用

    目录 1 获取layui 2 开始使用 3 定义layui模块 4 使用layui模块 5 建立入口文件 1 获取layui 1 去官网首页下载 layui已停止维护 2 互联网搜索 目录结构如下 css css目录 modules 模块c
  • layui php+PHPExcel 拉取excel表格数据一键导入

    需求 大量数据需要导入数据库 直接拉取excel表格进行读取数据并存入数据库 过程中不对文件进行存储 使用上传过程中的缓存文件 前端代码 layui php
  • layui与flask模板语言{{}}冲突的最佳方案

    使用 Jinja2的 raw 和 endraw 标签把 JavaScript 模板部分标记出来即可 raw endraw 但这是就需要注意区分项目中的 的值是jinja2还是layui
  • layui表格table不分页,显示全部数据

    layui表格table不分页 显示全部数据 表格渲染时添加两行代码 page false limit Number MAX VALUE 数据表格默认全部显示 table render elem orderTable id orderTab

随机推荐

  • 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 对于这两者