layui 自定义 div

2024-09-07

layui的弹出层的title的自定义html

layui的弹出层的title的自定义html //在这里面输入任何合法的js语句 layer.open({ type: 1 //Page层类型 ,area: ['500px', '300px'] ,title: '你好,layer.<a class="layui-icon layui-icon-share" style="float:right;margin-right:10px;"></a>' ,shade: 0.6 //遮罩透明度

vue中点击屏幕其他区域关闭自定义div弹出框

直接上代码: mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('.myDiv')[0]; // 自定义div的class if (dom) { // 如果点击的区域不在自定义dom范围 if (!dom.contains((e.target))) { that.showMyDiv = false; } } }); }, beforeDestroy() { $(do

layui自定义插件citySelect 省市区三级联动选择

省市区三级菜单联动插件 citySelect.js /** * @ name : citySelect 省市区三级选择模块 * @ Author: aggerChen * @ version: 1.0 */ layui.define(['layer','form','element','laytpl'], function(exports){ var $ = layui.$; var form = layui.form; var laytpl = layui.laytpl; var elemen

layui 自定义表单验证的几个实例

*注:使用本方法请先引入layui依赖的layu.js和layui.css 1.html <input type="text" name="costbudget" lay-verify="required|validateMoney" placeholder="请输入" autocomplete="off" class="layui-input"> 2.js文件 <sc

layui 自定义表单验证以及提交表单

订购数量</span> <span style="color: red">*</span>: <input type="text" required lay-verify="required|number|isXiaoYu|isManZu" id="proOrderNum" name="proOrderNum" class="input" val

layui 自定义模块

新建模块目录modules 新建common.js layui.define(['jquery'], function (exports) { var $ = layui.jquery; var obj = { test: function () { alert('test from common'); } }; //输出接口 exports('common', obj); }); 配置 layui.config({ base: '/xadmin/lib/layui/modules/' //自定

Layui自定义模块的使用方式

为什么要自定义模块呢?好处很多.比如可以大量重用代码...... 根据layui官方的文档说明.首先第一步是要确定你要扩展的模块名称现在做的是登录功能.因此扩展模块名叫 login 使用layui.define()方法来扩展模块.当然模块中你也可以使用layui的其他方法.如下 layui.define('layer', callback); 在定义扩展模块的时候.我需要使用layui的layer模块.然后在回调函数中定义自己的方法 layui.define(["layer",&q

jQuery easyUI Pagination控件自定义div分页（不用datagrid）

一般后台管理页面分页是通过datagrid加Pagination分页,但是如果前台页面没有用表格,例如博客的文章列表从上到下一般是到div分页, 这时如果还要用Pagination,则可以这样: 页面服务端返回json格式,返回时需要设置Pagination的总纪录数total,页面用jtemplates模板解析,避免拼html. jTemplates插件允许定义一个显示模板,在展现数据时根据选择的模板来动态生成. http://blog.csdn.net/gdjlc/article/detai

elementUI vue tree input 懒加载输入下拉树型示例点击其他区域关闭自定义div

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title>  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-cha

自定义div 拖动。键盘上下左右键移动，ctrl+Q控制是否可以移动，ctrl+回车，返回初始状态

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="智能社 - zhinengshe.com" /> <meta name="copyright" content="智能社 - zhinengshe.com" /> <t

layui 自定义字体图标扩展

layui的图标取自于阿里巴巴的矢量图标库 Iconfont,同样的,这篇教程也是基于Iconfont进行扩展. 第一步,通过浏览器打开 http://iconfont.cn/ ,访问阿里巴巴矢量图标库. 第二步,通过右上角的用户图标,授权登陆一个账号,在此我选择使用Github作为登陆账号. 第三步,登陆完成后,让我们稍微了解下基本的操作. Iconfont提供了非常多的图标库,有官方的图标资源,也有一些第三方的素材.选择方式多种多样,更能集成一些彩色图标到项目中,在此我们选择「多彩图标库」里

layui自定义模块

想把用了layui的页面的一些函数抽取公用,直接引入外部js不可行,只能用layui的模块功能.官网没有说明,但模块名必须和文件名一致新建yananmod.js文件,内容如下: layui.define([ 'jquery', 'form' ], function(exports) { // 'jquery', 'form'是依赖的模块 var $ = jQuery = layui.$,form=layui.form; var obj = { hello : function(str) { a

layui二次封装

最近一直用layui进行页面的重构,这个框架十分适合我们后台人员开发.简单易用,但是layui本身不支持双向绑定,所以很多情况下,我们在支持动态的控件加载时,需要反复刷新.这里我自己封装了一个common模块.话不多说,直接上代码. //Author :chenzihao//Date :2018/8/27//Discrption:自定义公共方法(持续扩充ing)layui.define(['layer', 'form', 'table', 'jquery'], function (exports

layui+croppers完成图片剪切上传

不多说直接上代码: 前台代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="../layui/layui/css/layui.css" rel="stylesheet" /> <link href="../layui/cropp

layui插件croppers的使用

这是我第一次在layui环境下面使用croppers插件.先粘贴下前端代码并附上我的目录结构吧. @{ ViewData["Title"] = "Croppers"; } <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <li

jQuery自定义右键菜单

首先看下效果,效果在最下面: 代码: body { font-size: 12px; margin: 0px; padding: 0px; } form,div,ul,li { margin: 0px; padding: 0px; list-style-type: none; overflow: hidden; } h1,h2,h3,h4,h5 { font-size: 12px; margin: 0px; padding: 0px; } a { text-decoration: none; }

layui topbar图标（即返回顶部）未显示的解决方法

在自己搭建纯html模板的时候,遇到了topbar无法显示的问题,搜了社区都没啥有用的解决方法,于是引用了util.js的源文件,发现用dom变量未获取到正确的scrollTop值,经过反复测试,把这两处dom替换成$('.layui-body')即可解决.位置如下图: 接着又出现了另一个问题,那就是返回顶部的功能失效了,看来还是没绑定到事件,于是将下图中的代码也替换掉即可: 顺便附上html中body代码: <body class="layui-layout-body">

在layui中使用ajax不起作用

又是一个坑,坑了我一个下午.在layui插件中使用jquery的ajax请求,一点反应都没有,不管是改成get还是post请求,后台毫无反应,前端谷歌调试也没有报半点错. js代码如下: layui.config({ base: '/res/mods/' //layui自定义layui组件目录 }).define(['jquery','layer','cropper'],function (exports) { var $ = layui.jquery ,layer = layui.layer;

【转】自定义(滑动条)input[type="range"]样式

1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome: Firefox: IE 9+: 常用(部分)属性如下: 属性描述 max 设置或返回滑块控件最大值 min 设置或返回滑块控件最小值 step 设置或返回每次拖动滑块控件时的递增量 value 设置或返回滑块控件的value值 defaultValue 设置或返回滑块控件的默认值 autof

layui时间控件联动：开始时间、结束时间，有效时间范围

实际开发中,经常遇到时间控件联动的情况,然后每次都网上搜代码Copy,不过每次都有点小Bug让你错不及防: 这次,在这里备份一下,以后Copy自己的得了(欢迎Copy代码,若遇到问题,请麻烦回复我一下,云测试Bug,hhh): @Styles.Render("~/Content/layuiadmin/layui/css/layui.css") @Styles.Render("~/Content/layuiadmin/style/admin.css?v=1") @Sc

vue2.0 自定义过滤器

2.0中已经废弃了过滤器,需要我们自定义 <div id="app"> {{message|uppercase}} </div> //过滤器 Vue.filter('uppercase', function(value) { if (!value) { return ''} value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) var vm = new

layui 自定义 div

热门专题