精华内容
下载资源
问答
  • layui自定义js模块(实例)

    万次阅读 2017-09-30 11:22:37
    注意:layui自定义模块整个过程就两步,步骤虽少,但还是要多注意的细节问题,不然在定义模块上花费太多精力就不值得了。第一步:定义模块tablechecked.js layui.define(['layer'], function(exports) {

    注意:layui自定义模块,整个过程就两步,步骤虽少,但还是要多注意的细节问题,不然在定义模块上花费太多精力就不值得了。


    第一步:定义模块

    tablechecked.js

    
    layui.define(['layer'], function(exports) {
        "use strict";
    
        var $ = layui.jquery,
            layer = layui.layer;
    
        var table = {
            /**
             * 带有选择框的表格绑定多选事件
             * @param tblId
             */
            tableBindCheckClick: function (tblId) {
                var tblObj = $("#" + tblId);
    
                tblObj.on('click', 'thead input[type="checkbox"]', function () {
                    var obj = $("#" + tblId + " tbody input[type='checkbox']:checkbox");
                    if (this.checked) {
                        obj.prop("checked", true);
                    } else {
                        obj.prop("checked", false);
                    }
                });
    
            },
            /**
             * 获取带有选择框的表格选中的记录Ids
             * @param tblId
             * @returns {string}
             */
            getTableCheckedRowIds: function (tblId) {
                var ids = '';
                var tblObj = $("#" + tblId);
    
                tblObj.find(" tbody input[type=checkbox]:checked").each(function(){
                    ids += $(this).val() + ',';
                });
    
                // 去除最后一位逗号
                ids = ids.substr(0, (ids.length-1));
                return ids;
            }
    
    
        };
        //expotts("key",value)
        //key你懂吧?  待会在第二步就要用key值来获取var table这个对象。继而调用对象中函数
        exports('tablechecked', table);
    });

    截图:
    这里写图片描述


    第二步:在js中使用模块

    <script th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        //一般直接写在一个js文件中
        layui.config({
            base:'/selfjs/'
        });
        //这里先use,表示使用 base:'/selfjs/'目录下的tablechecked.js文件
    
        layui.use(['form','element','layer','tablechecked'], function(){
            var $ = layui.jquery,
            //layui.key通过key来获取对象
                tools=layui.tablechecked;
    
            //顶部新增事件监听
            console.log("准备新增");
            $('#addBtn').on('click',function(){
                top.layer.open({
                    type:2,
                    area:['450px','380px'],
                    resize:false,
                    title:'商品添加',
                    content:'/sys_stuff/edit'
                });
            });
            //更新事件
            console.log("准备更新");
    
            $('.smt-update').on('click',function(){
                top.layer.open({
                    type:2,
                    area:['450px','400px'],
                    resize:false,
                    title:'用户编辑',
                    content:'/sys_stuff/edit?id='+$(this).data('id')
                });
            });
            //删除事件
            console.log("准备删除");
    
            $('#btnDelete').on('click', function(){
                var ids = tools.getTableCheckedRowIds("myTable");
                if(!ids) return layer.msg('请先选择需要删除的记录。', {time:1500, icon:0});
                layer.confirm('确定删除?', {icon: 3, title:'提示'}, function(index){
                    $.ajax({
                        type: 'POST',
    
                        url: /*[[@{/sys_stuff/delete}]]*/'',
                        data: {ids: ids },
                        dataType: 'json',
                        success: function (result) {
                            if (result.code == 0) {
                                layer.msg('删除成功', {icon: 1,time: 1000});
                                setTimeout(function(){
                                    parent.refreshIframe();
                                },800);
    
                            }
                            else {
                                layer.msg('删除失败!'+result.msg, {time:1000,icon: 2});
                            }
                        },
                        error: function(result, type) {
                            layer.msg('删除失败!', { time:1000,icon: 2 });
                        }
                    });
    
                });
            });
    
    
        });
    </script>

    教程到此结束。


    番外:
    待注意事项:

    • exports(‘tablechecked’, tablechecked); //key你懂吧? 待会在第二步就要用key值来获取var table这个对象。继而调用对象中函数
    • layui.use([tablechecked])表示 ,使用这个模块,也就是咱自定义的js文件。
    • 通过layui.key通过key来获取对象var tools=layui.tablechecked;

    到此,番外也结束了,以上这些,基本上够用了。更多的我暂时不知道,如果你在阅读中遇见任何问题,欢迎你随时给我留言。

    展开全文
  • 如图: <p style="text-align:center"><img alt="" src="https://img-ask.csdnimg.cn/upload/1622885625644.png" /></p> ... ... 是我js配置的路径不对吗?为什么一直都找不到js</p>
  • 在开发中,我们经常需要对一些输入数据通过正则表达式进行有效性验证,基于Layui框架开发下,Layui框架本身已经集成了一些基础的验证,这对我们在前端验证输入的有效性非常便捷,如我们需要验证邮箱的话,可以直接在...

    0 前言

    在开发中,我们经常需要对一些输入数据通过正则表达式进行有效性验证,基于Layui框架开发下,Layui框架本身已经集成了一些基础的验证,这对我们在前端验证输入的有效性非常便捷,如我们需要验证邮箱的话,可以直接在该input域添加 lay-verify=” email”,这样该input域就会验证邮箱的有效性。目前Layui支持的验证规则有:required(必填项);phone(手机号);email(邮箱);url(网址);number(数字);date(日期);identity(身份证),同时他也支持多组合验证,详细见图:

     

    (https://www.layui.com/doc/modules/form.html)

    此外,我们还会遇到一些自定义的验证需求,如我们验证固定电话号码有效性,上面基础的验证需求满足不了项目的实际需求,需要我们重新自定义验证规则,然后适配到控件中。

    Layui是支持我们自己定义并编写正则表达式验证有效性需求的,详细可以查看https://www.layui.com/doc/modules/form.html#verify。本文下面将通过自定义验证固话的规则演示。

    1 自定义固定电话验证规则

    (1)定义验证规则

    如果我们需要自定义验证规则

    // 验证规则  form.verify表单验证定义
    form.verify({
    	//telnumber验证规则的定义
    	telnumber: [
    		/^((0\d{2,3})-)?(\d{5,8})(-(\d{3,}))?$/       // 这部分为验证正则表达式-固话验证正则表达式
    		,'请输入正确的座机号码'                       // 这部分是不符合验证规则提示的错误信息
    	]
    });
    

    (2)控件应用,当你自定义了类似上面的验证规则后,你只需要把 key(这个key就是定义验证规则名称,如上文的telnumber) 赋值给输入框的 lay-verify 属性即可生效

    <input type="text" lay-verify=" telnumber " placeholder="请输入固话">
    展开全文
  • layui 自定义 模块 hello

    2021-01-01 17:12:24
    这里写自定义目录标题layui 自定义模块hello参考链接截图源码效果 layui 自定义模块hello 参考链接 layui封装模块小白教程 版本layui-v2.5.7 截图 源码 hello.js /** layui-v2.5.7 自定义模块 */ layui.define(['...

    layui 自定义模块hello

    参考链接

    layui封装模块小白教程
    版本layui-v2.5.7

    截图

    在这里插入图片描述

    源码

    hello.js

    /** layui-v2.5.7 自定义模块 */
    layui.define(['jquery','layer'],function(exports){
    	//使用内置模块
    	var $ = layui.jquery,layer = layui.layer;
    	//自定义模块的对象
    	var obj = {
    		log: function(text){
    			console.log(text||'hello layui log.');
    		},
    		alert: function(text){
    			layer.msg(text||'hello layui msg.')
    		},
    		html: function(text){
    			$('body').append($('<div></div>').html(text||'<h1>hello layui html</h1>'));
    		}
    	};
    	//输出组件接口
    	exports('hello',obj);
    })
    

    layui.customs.js

    /** layui-v2.5.7 自定义模块-引用 */
    layui.config({
    	base:'static/layui/customs/'
    }).extend({
    	hello:'hello'
    })
    

    test.html

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    		<meta name="renderer" content="webkit"/>
    		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    		<meta http-equiv="Pragma" content="no-cache"/>
    		<meta http-equiv="expires" content="0"/>
    		<meta http-equiv="Cache" content="no-cache"/>
    		<link rel="icon" href="favicon.ico"/>
    		<title>首页</title>
    		<style type="text/css">
    			
    		</style>
    	</head>
    	<body>
    	</body>
    	<script src="static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    	<script src="static/layui/layui.customs.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		layui.use(['hello'],function(){
    			var hello = layui.hello;
    			hello.log();
    			hello.html();
    			hello.alert();
    		})
    	</script>
    </html>
    

    效果

    在这里插入图片描述

    展开全文
  • 基于Layui自定义内容轮播插件是一款表格数据为ajax加载的本地json数据,本地查看会有跨域问题导致数据不能显示。
  • layui自定义模块使用

    2021-03-18 13:49:30
    今天在写一个功能模块的时候突然想起了以前想用但是没有的东西:layui自定义模块,于是按照官方文档进行编写,编写中我遇到两个大坑: 坑一: 我自定义的 js 功能模块没有加载(已解决) 坑二: 我想引入一个 js插件,...

    layui 自定义模块

    1. 前言

    今天在写一个功能模块的时候突然想起了以前想用但是没有的东西:layui自定义模块,于是按照官方文档进行编写,编写中我遇到两个大坑:

    • 坑一: 我自定义的 js 功能模块没有加载(已解决)
    • 坑二: 我想引入一个 js插件,但是一直加载不成功(解决中),我想的是实在不行采用非模块化方式引入。
      虽然坑二未解决,但是如果你不引入外部 js插件也还是可以用的

    2.用法

    首先来看一下我的文件目录很重要的,标红的地方是我自定义的模块文件目录

    layui自定义模块使用

    layuiconfig.js,指定自定义 js 路径,此处注意”:号”后面的 mymod 指的是 js 文件,此处 js 省略了,前面的是模块名

    layui.config({
        base: '/H-Admin/static/plugins/js/' //假设这是你存放拓展模块的根目录
    }).extend({ //设定模块别名
    
        mymod: 'mymod', //如果 mymod.js 是在根目录,也可以不用设定别名
    });
    

    mymod.js 具体实现逻辑,我只写了最简单的

    layui.define(function(exports){
        var obj = {
            myFun: function(){
                alert("hello ");
            }
        };
        
        exports('mymod', obj)
    });

    我是在 index 页面引入的

    layui自定义模块使用

    好了至此最简单的layui模块引入完成。

    说说我第一个坑的解决办法

    打开调试器 F12 查看这里的目录结构是否和你的项目目录结构一致,不一致肯定报错,我在这折腾很久。

    layui自定义模块使用
    layui自定义模块使用

    不一致就更改 base 后面值就好了,base 是相对项目上一层而言的。

    至此定义一个简单的layui模块,讲解完毕,如有其他问题欢迎留言交流

    展开全文
  • layui自定义工具栏

    千次阅读 2019-06-09 17:10:10
    layui自定义工具栏 给大家分享的功能是layui自定义工具栏 功能效果:开启数据表格头部工具栏区域 关键参数:toolbar 参数类型:String/DOM/Boolean 参数说明:toolbar: ‘#toolbarDemo’ //指向自定义工具栏...
  • layui自定义打印

    2021-03-29 19:12:42
    layui官网下载新的layuijs文件,有些旧版本的不支持 在table数据赋值时,添加如下参数 toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板 二、 自定义打印内容的实现 三、 自定义打印table的实现...
  • 主要为大家详细介绍了layui自定义插件citySelect实现省市区三级联动选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • layui自定义时钟模块

    千次阅读 2019-01-08 15:17:40
    clock.js : ...//layui自定义模块写法 layui.define(function (exports) {  var obj = {  now: function () {  setInterval('clock("current-datetime")', 1000);  }  };  exports('cl...
  • layui使用,LayUI select不显示,LayUI文件上传,Layui自定义校验规则 ================================ ©Copyright 蕃薯耀 2020-08-05 https://www.cnblogs.com/fanshuyao/ 一、引入js和css <link rel=...
  • layui自定义模块

    2020-12-25 13:49:38
    layui.define([mods], callback) 通过该方法可定义一个 layui 模块。参数 mods 是可选的,用于声明该模块所依赖的模块。callback 即为模块加载完毕的回调函数,它返回一个 exports 参数,用于输出该模块的接口。 ...
  • 前言 在layui的layer模块中anim参数可以设置layer弹框的弹出动画,...在layuijs文件夹下创建新的文件夹layui_exts,并在文件夹下创建自定义js文件rightPopup.js,如下图: js文件写入代码,代码如下(示例): lay
  • 基于layui自定义树形组件

    千次阅读 2019-12-10 15:58:43
    基于layui自定义树形组件文档 - layui.sw365tree 简介:针对于自己的需求所自定义的树形组件 模块加载名称:sw365tree 1· 快速使用 var tree = layui.sw365tree; 通过 tree.render() 方法指定一个元素,便可快速...
  • layui 自定义模块

    2019-09-28 12:50:42
    新建模块目录modules 新建common.js layui.define(['jquery'], function (exports) { var $ = layui.jquery; var obj = { test: function () { alert('test from common'); } ...
  • 自定义Layui下拉选组件 基于layui,仿照easyui的combobox做的下拉选。可通过接口获取下拉选值,显示的文本,传值内容可自定义生成。 可绑定选中事件,可做多级联动。 定义常用工具模块common.js,并加载到layui的...
  • layui自定义打印功能

    千次阅读 2020-09-24 17:34:11
    a style="float: right" onclick="print()" type="button" class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon layui-icon-print"></i> </a> <table id="table_...
  • 本章给大家分享的是Layui自定义字体图标。 图标扩展及使用方式 layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css ...
  • layui自定义表单校验

    万次阅读 2017-12-14 19:30:57
    自定义一个金额的校验<!DOCTYPE html> 自定义验证 ,chrome=1
  • 导语:(学习视频分享:编程视频)我们知道layui的layer模块中的anim参数是可以设置弹窗动画效果...1.layui封装自定义组件在layuijs文件夹下创建新的文件夹layui_exts,并在文件夹下创建自定义js文件rightPopup.j...
  • 找到layui.all.js文件 搜索exportFile 将d.exportFile=function(e,t,i)修改为d.exportFile=function(e,t,i,name) name这个参数就是标题名称 搜索download 将s.download=(l.title||“table_”+(l.index||"")) 修改为s...
  • layui 自定义个别事件

    2019-10-07 01:32:00
    网页调用自定义函数的两种方法,一种是给id,可以在自定义函数里通过id写自定义函数,另一种是没有id,直接在标签写自调用定义函数的方法。 一、引入支持 首先在<head>标签内引入layui的样式:<link ...
  • script src="layui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //全局定义一次, 加载formSelects layui.config({ base: '../src/' //此处路径请自行...
  • 1.layui自定义模块:方便接口调用 ​ 异步请求url地址不方便 ​ 解决:扩展模块 ​ 1):定义对应js文件 ja>lay-module创建http目录创建http.js文件 ​ 2):lay-config.js文件中引入模板 ​ 3):页面使用引入...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,966
精华内容 1,986
关键字:

layui自定义js