前端ui框架layui——layer弹出层-弹出框方法
——————————弹出框方法—————————————————
1.layer.open(options) - 原始核心方法
layer.open ({type : 1,title : '测试',id: 'myp',btn: ['确认','删除'],area: ['420px', '240px'], //宽高content : '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"><input type="te" />你知道吗?亲!<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块,由于其用户基数较大,所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块,但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>',success : function (layero,index) { var btn = layero.find('.layui-layer-btn0');console.log(btn)},yes: function(index, layero){console.log(index)layer.close(index); //如果设定了yes回调,需进行手工关闭},cancel: function(){layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {time: 5000, icon:6});}
})
2.layer.alert(content, options, yes) - 普通信息框
//eg1
layer.alert('只想简单的提示');
//eg2
layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调,可以放在第三个参数中。
//eg3
layer.alert('有了回调', function(index){//do somethinglayer.close(index);
});
3.layer.confirm(content, options, yes, cancel) - 询问框
类似系统confirm,但却远胜confirm,另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的,它的参数也是自动补齐的。
//eg1
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){//do somethinglayer.close(index);
});
//eg2
layer.confirm('is not?', function(index){//do somethinglayer.close(index);
});
4.layer.msg(content, options, end) - 提示框
我们在源码中用了相对较大的篇幅来定制了这个msg,目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。因为它简单,而且足够得自觉,它不仅占据很少的面积,而且默认还会3秒后自动消失所有这一切都决定了我对msg的爱。因此我赋予了它许多可能在外形方面,它坚持简陋的变化,在作用方面,它坚持零用户操作。而且它的参数也是自动补齐的。
//eg1
layer.msg('只想弱弱提示');
//eg2
layer.msg('有表情地提示', {icon: 6});
//eg3
layer.msg('关闭后想做些什么', function(){//do something
});
//eg
layer.msg('同上', {icon: 1,time: 2000 //2秒关闭(如果不配置,默认是3秒)
}, function(){//do something
});
5.layer.load(icon, options) - 加载层
type:3的深度定制。load并不需要你传太多的参数,但如果你不喜欢默认的加载风格,你还有选择空间。icon支持传入0-2如果是0,无需传。另外特别注意一点:load默认是不会自动关闭的,因为你一般会在ajax回调体中关闭它。
//eg1
var index = layer.load();
//eg2
var index = layer.load(1); //换了种风格
//eg3
var index = layer.load(2, {time: 10*1000}); //又换了种风格,并且设定最长等待10秒
//关闭
layer.close(index);
6.layer.tips(content, follow, options) - tips层
//eg1
layer.tips('只想提示地精准些', '#id');
//eg 2
$('#id').on('click', function(){var that = this;layer.tips('只想提示地精准些', that); //在元素的事件回调体中,follow直接赋予this即可
});
//eg 3
layer.tips('在上面', '#id', {tips: 1
});
7.layer.prompt(options, yes) - 输入层
prompt的参数也是向前补齐的。options不仅可支持传入基础参数,还可以传入prompt专用的属性。当然,也可以不传。yes携带value 表单值index 索引elem 表单元素
//prompt层新定制的成员如下
{formType: 1, //输入框类型,支持0(文本)默认1(密码)2(多行文本)value: '', //初始时的值,默认空字符maxlength: 140, //可输入文本的最大长度,默认500
}//例子1
layer.prompt(function(value, index, elem){alert(value); //得到valuelayer.close(index);
});//例子2
layer.prompt({formType: 2,value: '初始值',title: '请输入值',area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){alert(value); //得到valuelayer.close(index);
});
8.layer.tab(options) - tab层
tab层只单独定制了一个成员,即tab: [],这个好像没有什么可介绍的,简单粗暴看例子.
layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1', content: '内容1'}, {title: 'TAB2', content: '内容2'}, {title: 'TAB3', content: '内容3'}]
});
9.layer.photos(options) - 相册层
相册层,也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。如果是json传入,如下:
$.getJSON('/jquery/layer/test/photos.json', function(json){layer.photos({photos: json,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)});
});
返回数据格式如下:
{"title": "", //相册标题"id": 123, //相册id"start": 0, //初始显示的图片序号,默认0"data": [ //相册包含的图片,数组格式{"alt": "图片名","pid": 666, //图片id"src": "", //原图地址"thumb": "" //缩略图地址}]
}
前端ui框架layui——layer弹出层-弹出框方法相关推荐
- 前端ui框架layui——layer弹出层-内置方法
提示:本页内容所展示的内置方法是除了所有弹出方法(eg:layer.open)以外的,想看弹出方法请到这里 --------内置方法---------- 1.layer.config(options) ...
- 前端ui框架layUI
layUI layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. https://www.layui.co ...
- oracle 前端ui框架,Layui(前端UI框架) 2.6.4 官方最新版
Layui最好用的前端ui框架是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过.一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以 ...
- 修改layui框架html,模块化前端 UI 框架Layui
Layui 是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过.一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以及她本身的精心雕琢 ...
- element ui点击按钮弹出款_前端猿应该知道的十大最流行的前端UI框架
在前端项目开发过程中,现在很少有人会使用原生的CSS来搭建页面,总归都会引入一些前端UI框架以减少代码的书写.一般为了方便自己的使用,很多大公司都有自己的一套UI框架,同时也会把其开源出来.下面就是最 ...
- layui模仿element ui_比较受欢迎的前端 UI 框架【vue】
PC端 UI 框架 一.ElementUI 官网地址:https://element.eleme.cn/#/zh-CN Github:https://github.com/ElementUI/elem ...
- php layer弹出层更改背景,浅谈layer弹出层按钮颜色修改方法
layer弹出层有多种格式的弹出,使用方法也不细述. 在弹出确认框可使用confirm或open方式 在open中 layer.open({ content: '确认提交?', btn: [" ...
- VUE常用UI组件插件及框架-vue前端UI框架收集
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
- html易上手的UI库,LayUI-极易上手拿来即用的前端 UI 框架-工具-站长头条
前端框架和思想一直在不停变化,当前主流的前端框架基本是基于 MVVM 底层的,难免会令一些开发者感到不适应,尤其是对于前端开发较为陌生的后端人员.Layui,重新回到"经典模块化" ...
最新文章
- 洛谷P1456 Monkey King
- directive多指令之间的异步调用
- SAP后台作业记录操作
- Hibernate框架--学习笔记(中):一对多配置、多对多配置
- 二叉排序树删除子节点以及遍历
- [gkk传智]static与多态及向下向上转型,及多态调用总结
- c#服务器上的文件怎么打印机,如何通过使用C#窗口服务通过打印机打印数据打印文本文件...
- Jersey MongoDB的使用
- C语言符号常量的使用,C语言常量与符号常量
- 【转载】嵌入式自学经历和体会
- Docker 入门教程
- android系统存储空间不足怎么办,手机内存不足怎么办?手机内存不足如何清理?...
- 不仅仅是游戏,王者荣耀如何突破次元壁?
- 免费的机器人聊天接口
- Handing Incomplete Heterogeneous Data using VAEs
- 计算机考试用户没有注册类,电脑中出现没有注册类别的错误提示怎么解决
- C语言中删除重复字母,删除C ++中的重复字母
- 求和 矩阵迹的性质_怎么证明矩阵特征值的和等于矩阵的迹_
- 递归方法——猴子吃桃
- 惠普暗影精灵笔记本电脑 ubuntu系统如何截图
热门文章
- FMS与Vcam实现flv网络电视直播 FMS直播
- 洛谷P1873 砍树(二分)
- 用lua实现竖列转盘游戏
- Adroid游戏开发实例讲解(五)-哄娃神器之随机五彩泡(附源码)
- 王者显示重连服务器失败,最强王者三国手游服务器连接失败 最强王者三国手游曹操学什么技能...
- 一文读懂数据仓库、数据湖、湖仓一体
- 用el-select处理后台数据进行页面渲染,返回数据如果为空或者无法渲染文字时的处理
- 给定一个由N个非负整数构成的序列,我们来定义一下序列的中位数,如果N是奇数,在对序列排序后,中位数就是最中间的那个数,即排序后,中位数的位置为(N+1)/2,这里序列的位置从1开始。如果N是偶数,则中
- MongoDb副本集详解及搭建
- 17-1-数据处理思想和程序架构: 单片机stm32的flash保存数据优化方案(让擦写次数达到上百万至上千万次)