loading加载和layer.js
来源:互联网 发布:凤岗数控车床编程培训 编辑:程序博客网 时间:2024/05/20 16:35
layer.js中的loading加载
l本篇主要介绍layerjs中的loading加载在实际项目中的应用
1、使用的技术
前端:HTML5+CSS3+JS+layer.js
后端:.net
2、遇到的问题
在使用layer.js插件中提供的loading时,需要在layer.js中的layer.css找到对应的gif格式动态图,此gif图需要和插件中的loading加载gif图大小尺寸相同
3、layer.js中load()方法介绍
load不需要传太多的参数,根据自己喜欢的风格来设置。方法中提供三种风格,供其选择。且Load中的icon支持传入0-2,如果是0,无需传入。但是load默认是不会关闭的,需要在回调函数中关闭。
方法一:
var index = layer.load(); //不传入参数,默认传0
方法二:
var index = layer.load(1); //参数1,另外一种风格
方法三:
var index = layer.load(2,{time:10*1000}); //参数2,换一种风格;time设置最长等待时间
4、实际项目中的运用
在对应的需要加载loading的html页面的js中加入写入loading加载的代码,以首页登录页面为例:
1)设置登录界面的点击事件:
$('#submit').click(function() { $(this).css('background','green');//设置当前点击登录按钮后,改变其登录框的颜色 confirm(); //调用ajax函数})
2)loading加载:
$(function () { $.ajaxSetup({ layerIndex:-1, beforeSend: function () { //插件加载前 this.layerIndex = layer.load(0, { shade: [0.01, '#fff'] }); $('#submit').val("正在登录") }, complete: function () { //完成加载后执行 layer.close(this.layerIndex); //完成加载后关闭loading }, error: function () { //报错时执行 layer.alert('显示异常,请刷新后重试', { skin: 'layui-layer-molv' , closeBtn: 0 , shift: 4 //动画类型 }); } });});
5、效果图
阅读全文
0 0
- loading加载和layer.js
- layer加载遮罩层使用 Ajax Loading Demo
- 图片加载js loading
- Loading.js加载框架
- 利用layer.js和jQuery在form提交页面添加loading层
- 按钮特效 基于SVG和Segment.js的Loading加载
- js添加loading加载样式
- Ext JS 4:动态加载和新的类机制(Dynamic Loading and New Class System)
- 加载loading
- loading加载
- Layer.js——弹窗/提示/询问/加载/层
- layer.js
- layer.js
- layer.js
- Ext JS.4.0:动态加载和新的类系统(countDown of Extjs4.0: Dynamic Loading and New Class System)
- Lazyr.js – 延迟加载图片(Lazy Loading)
- js获取页面加载过程做一个简单的loading
- js仿iPhone手机端alert,loading,正在加载...
- SpringBoot-事务
- 前端二维码扫描库html5-qrcode使用
- SAP区块链创新计划新增27个成员
- 大空头作者:美国联邦政府混乱情形和比特币之间肯定有联系
- 欧洲主要监管机构称ICO可能属于衍生品交易项目
- loading加载和layer.js
- 广播接收者
- 数据库与JavaBean字段名不一致处理
- [C/C++] 算法提高 5-3日历
- 多线程中的线程间通信及等待/通知机制的两种实现方式
- Oracle起步---创建临时表空间/表空间/创建用户/授权
- Angular 中修改bootstrap的模态框(modal)大小
- 新加坡央行公布“Project Ubin”第二阶段工作细节
- C# 内部类