弹出层小插件之(二) layer&layui
其实layer或者layui相对于上次所说的 sweetalert来说不仅仅有弹出层,它有很多的功能,这也大大的提高了我们的开发效率,根据我们项目的实际需要的效果进行选择。下面介绍下Layer的用法吧,我想这也是小伙伴们最想要的:
1.当然是要下载layer了 下载地址:http://layer.layui.com
2.下载好的文件不要修改里面内容 直接放到你的项目中即可(注意)
3.layer引入方式
4.layui的方法与用法与layer相似
- 特别说明:事件需自己绑定,以下只展现调用代码。
//初体验
- layer.alert('内容')
//第三方扩展皮肤
- layer.alert('内容', {
- icon: 1,
- skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅
- })
//询问框
- layer.confirm('您是如何看待前端开发?', {
- btn: ['重要','奇葩'] //按钮
- }, function(){
- layer.msg('的确很重要', {icon: 1});
- }, function(){
- layer.msg('也可以这样', {
- time: 20000, //20s后自动关闭
- btn: ['明白了', '知道了']
- });
- });
//提示层
- layer.msg('玩命提示中');
//墨绿深蓝风
- layer.alert('墨绿风格,点击确认看深蓝', {
- skin: 'layui-layer-molv' //样式类名
- ,closeBtn: 0
- }, function(){
- layer.alert('偶吧深蓝style', {
- skin: 'layui-layer-lan'
- ,closeBtn: 0
- ,anim: 4 //动画类型
- });
- });
//捕获页
- layer.open({
- type: 1,
- shade: false,
- title: false, //不显示标题
- content: $('.layer_notice'), //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
- cancel: function(){
- layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {time: 5000, icon:6});
- }
- });
//页面层
- layer.open({
- type: 1,
- skin: 'layui-layer-rim', //加上边框
- area: ['420px', '240px'], //宽高
- content: 'html内容'
- });
//自定页
- layer.open({
- type: 1,
- skin: 'layui-layer-demo', //样式类名
- closeBtn: 0, //不显示关闭按钮
- anim: 2,
- shadeClose: true, //开启遮罩关闭
- content: '内容'
- });
//tips层
- layer.tips('Hi,我是tips', '吸附元素选择器,如#id');
//iframe层
- layer.open({
- type: 2,
- title: 'layer mobile页',
- shadeClose: true,
- shade: 0.8,
- area: ['380px', '90%'],
- content: 'http://layer.layui.com/mobile/' //iframe的url
- });
//iframe窗
- layer.open({
- type: 2,
- title: false,
- closeBtn: 0, //不显示关闭按钮
- shade: [0],
- area: ['340px', '215px'],
- offset: 'rb', //右下角弹出
- time: 2000, //2秒后自动关闭
- anim: 2,
- content: ['test/guodu.html', 'no'], //iframe的url,no代表不显示滚动条
- end: function(){ //此处用于演示
- layer.open({
- type: 2,
- title: '很多时候,我们想最大化看,比如像这个页面。',
- shadeClose: true,
- shade: false,
- maxmin: true, //开启最大化最小化按钮
- area: ['893px', '600px'],
- content: 'http://fly.layui.com/'
- });
- }
- });
//加载层
- var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
//loading层
- var index = layer.load(1, {
- shade: [0.1,'#fff'] //0.1透明度的白色背景
- });
//小tips
- layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
- tips: [1, '#3595CC'],
- time: 4000
- });
//prompt层
- layer.prompt({title: '输入任何口令,并确认', formType: 1}, function(pass, index){
- layer.close(index);
- layer.prompt({title: '随便写点啥,并确认', formType: 2}, function(text, index){
- layer.close(index);
- layer.msg('演示完毕!您的口令:'+ pass +'
您最后写下了:'+text); - });
- });
//tab层
- layer.tab({
- area: ['600px', '300px'],
- tab: [{
- title: 'TAB1',
- content: '内容1'
- }, {
- title: 'TAB2',
- content: '内容2'
- }, {
- title: 'TAB3',
- content: '内容3'
- }]
- });
//相册层
- $.getJSON('test/photos.json?v='+new Date, function(json){
- layer.photos({
- photos: json //格式见API文档手册页
- ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机
- });
- });
- 使用的过程中遇到了一个问题 就是loading的时候那个加载图案会跑到左边 经过尝试 把css单独拿出来 就会解决这个问题!!!希望这次补充对有这个问题的小伙伴能有帮助2017.3.20
弹出层小插件之(二) layer&layui的更多相关文章
- 弹出层小插件之(一)sweetalert
//弹出层小插件之(一)sweetalert 1.引入sweetalert.css 2.引入sweetalert.min.js 下载地址:http://t4t5.github.io/sweetaler ...
- layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案
layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...
- jQuery Dialog弹出层对话框插件
Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...
- 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件
今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...
- 改善用户体验之wordpress添加图片弹出层效果 (插件 FancyBox)
下面说说在改善用户体验之wordpress添加图片弹出层效果.效果图如下: 像这篇文章如何在百度搜索结果中显示网站站点logo? 文章内有添加图片,没加插件之前用户点击图片时,是直接_black打 ...
- 【转】10 个很有用的 jQuery 弹出层提示插件
模态对话框为网站用户提供了快速显示信息的方法,也可以用来提示错误.警告和确认等信息,这里介绍了 10 个弹出模态对话框插件. How to Create a jQuery Confirm Dialog ...
- JQuery弹出窗口小插件ColorBox
本文来自: Small_陌 http://www.cnblogs.com/wggmqj/archive/2011/11/04/2236263.html 今天在博客园看到一篇<ASP.NET MV ...
- magnific-popup 一款优秀, 多种功能于一身的弹出层jQuery插件.
功能很强大:灯箱, 画廊, 放大图片, 弹出Youtube GoogleMap, ajax读取popup等等文档:http://dimsemenov.com/plugins/magnific-popu ...
- js弹出层的插件
1.jquery.fancybox.pack.js 2.artdialog 3.
随机推荐
- Thinking in React 观后感
原文地址:Thinking in React 今天在翻阅 React 文档,看到一篇名为「Thinking in React」的文章觉得写的很好.文章介绍了如何使用 React 构建一个应用,并不是手 ...
- React 回忆录(三)使用 React 渲染界面
Hi 各位,欢迎来到 React 回忆录!
- Python3基础 while 斐波那契数列
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- MBR主引导扇区解析2
unsigned AnsiChar data[] = { 0x33, 0xC0, 0x8E, 0xD0, 0xBC, 0x00, 0x7C, 0x8E, 0xC0, 0x8E, 0xD8, 0xBE, ...
- HttpClient 的使用
HttpClient使用: maven: <!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpclient ...
- 【Git安装】centos安装git
1 yum install git 安装后的默认存放地点/usr/bin/git
- Unity3D学习笔记(八):四元素和书籍推荐
书籍推荐: 3D数学基础:图形与游戏开发——游戏软件开发专家系列(美)邓恩 Unity Shader入门精要 冯乐乐(92年) 数据结构(Python语言描述) 数据结构.算法与应用(C++语言描述) ...
- Java 面向对象之接口、多态
01接口的概念 A:接口的概念 接口是功能的集合,同样可看做是一种数据类型,是比抽象类更为抽象的”类”. 接口只描述所应该具备的方法,并没有具体实现,具体的实现由接口的实现类(相当于接口的子类)来完成 ...
- WCF 客户端调用服务操作的两种方法
本节的主要内容:1.通过代理类的方式调用服务操作.2.通过通道的方式调用服务操作.3.代码下载 一.通过代理类的方式调用服务操作(两种方式添加代理类) 1.手动编写代理类,如下: 客户端契约: usi ...
- 周立功USBCAN-II 上位机开发(MFC)
使用的USB转CAN的设备是周立功的USBCAN-II,在购买的时候,会有上位机二次开发的库文件.例程和API文档等材料,可以参考. 1.库函数的调用 首先,把库函数文件都放在工作目录下.库函数文件总 ...