layer.js中的loading加載

l本篇主要介紹layerjs中的loading加載在實(shí)際項(xiàng)目中的應(yīng)用

1、使用的技術(shù)

前端：HTML5+CSS3+JS+layer.js?
后端：.net

2、遇到的問題

在使用layer.js插件中提供的loading時(shí)，需要在layer.js中的layer.css找到對(duì)應(yīng)的gif格式動(dòng)態(tài)圖，此gif圖需要和插件中的loading加載gif圖大小尺寸相同?

3、layer.js中l(wèi)oad()方法介紹

load不需要傳太多的參數(shù)，根據(jù)自己喜歡的風(fēng)格來(lái)設(shè)置。方法中提供三種風(fēng)格，供其選擇。且Load中的icon支持傳入0-2，如果是0，無(wú)需傳入。但是load默認(rèn)是不會(huì)關(guān)閉的，需要在回調(diào)函數(shù)中關(guān)閉。?
方法一：?
var index = layer.load(); //不傳入?yún)?shù)，默認(rèn)傳0?
方法二：?
var index = layer.load(1); //參數(shù)1，另外一種風(fēng)格?
方法三：?
var index = layer.load(2,{time:10*1000}); //參數(shù)2，換一種風(fēng)格；time設(shè)置最長(zhǎng)等待時(shí)間

4、實(shí)際項(xiàng)目中的運(yùn)用

在對(duì)應(yīng)的需要加載loading的html頁(yè)面的js中加入寫入loading加載的代碼，以首頁(yè)登錄頁(yè)面為例：?
1)設(shè)置登錄界面的點(diǎn)擊事件：

$('#submit').click(function() {$(this).css('background','green');//設(shè)置當(dāng)前點(diǎn)擊登錄按鈕后，改變其登錄框的顏色 confirm(); //調(diào)用ajax函數(shù) })

2)loading加載：

$(function () {$.ajaxSetup({layerIndex:-1,beforeSend: function () { //插件加載前 this.layerIndex = layer.load(0, { shade: [0.01, '#fff'] }); $('#submit').val("正在登錄") }, complete: function () { //完成加載后執(zhí)行 layer.close(this.layerIndex); //完成加載后關(guān)閉loading }, error: function () { //報(bào)錯(cuò)時(shí)執(zhí)行 layer.alert('顯示異常，請(qǐng)刷新后重試', { skin: 'layui-layer-molv' , closeBtn: 0 , shift: 4 //動(dòng)畫類型 }); } }); });

5、效果圖

總結(jié)

以上是生活随笔為你收集整理的loading加载和layer.js的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。