jQuery EasyUI 頁面加載等待及頁面等待層
下面一個(gè)代碼片段是 easyUI 頁面加載等待,代碼如下所示:
function ajaxLoading() {
var id = "#textboxDiv";
var left = ($(window).outerWidth(true) - 190) / 2;
var top = ($(window).height() - 35) / 2;
var height = $(window).height() * 2;
$("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: height }).appendTo(id);
$("<div class=\"datagrid-mask-msg\"></div>").html("正在加載,請(qǐng)稍候...").appendTo(id).css({ display: "block", left: left, top: top });
}
function ajaxLoadEnd() {
$(".datagrid-mask").remove();
$(".datagrid-mask-msg").remove();
}
下面看個(gè)工具類 基于easyui的頁面等待提示層,即mask
<pre name="code" class="java">/**
* 使用方法:
* 開啟:MaskUtil.mask();
* 關(guān)閉:MaskUtil.unmask();
*
* MaskUtil.mask('其它提示文字...');
*/
var MaskUtil = (function(){
var $mask,$maskMsg;
var defMsg = '正在處理,請(qǐng)稍待。。。';
function init(){
if(!$mask){
$mask = $("<div class=\"datagrid-mask mymask\"></div>").appendTo("body");
}
if(!$maskMsg){
$maskMsg = $("<div class=\"datagrid-mask-msg mymask\">"+defMsg+"</div>")
.appendTo("body").css({'font-size':'12px'});
}
$mask.css({width:"100%",height:$(document).height()});
var scrollTop = $(document.body).scrollTop();
$maskMsg.css({
left:( $(document.body).outerWidth(true) - 190 ) / 2
,top:( ($(window).height() - 45) / 2 ) + scrollTop
});
}
return {
mask:function(msg){
init();
$mask.show();
$maskMsg.html(msg||defMsg).show();
}
,unmask:function(){
$mask.hide();
$maskMsg.hide();
}
}
}());
效果圖:

以上所述是小編給大家介紹的jQuery EasyUI 頁面加載等待及頁面等待層,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- easyui datagrid 大數(shù)據(jù)加載效率慢,優(yōu)化解決方法(推薦)
- jQuery Easyui使用(二)之可折疊面板動(dòng)態(tài)加載無效果的解決方法
- EasyUI加載完Html內(nèi)容樣式渲染完成后顯示
- EasyUi combotree 實(shí)現(xiàn)動(dòng)態(tài)加載樹節(jié)點(diǎn)
- JQuery EasyUI 加載兩次url的原因分析及解決方案
- Jquery EasyUI中彈出確認(rèn)對(duì)話框以及加載效果示例代碼
- EASYUI TREEGRID異步加載數(shù)據(jù)實(shí)現(xiàn)方法
- EasyUI的treegrid組件動(dòng)態(tài)加載數(shù)據(jù)問題的解決辦法
- jQuery EasyUI API 中文文檔 - EasyLoader 加載器
相關(guān)文章
jQuery 選擇器項(xiàng)目實(shí)例分析及實(shí)現(xiàn)代碼
首先廢話一句,jQuery選擇器真心很強(qiáng)大!接下來詳細(xì)介紹jQuery 選擇器項(xiàng)目實(shí)例實(shí)現(xiàn)方式2012-12-12
JQuery和HTML5 Canvas實(shí)現(xiàn)彈幕效果
這篇文章主要介紹了JQuery和HTML5 Canvas兩種方法實(shí)現(xiàn)彈幕效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
jquery實(shí)現(xiàn)當(dāng)滑動(dòng)到一定位置時(shí)固定效果
這篇文章主要介紹了jquery實(shí)現(xiàn)當(dāng)滑動(dòng)到一定位置時(shí)固定效果,需要的朋友可以參考下2014-06-06
基于jQuery的公告無限循環(huán)滾動(dòng)實(shí)現(xiàn)代碼
今天看到一個(gè)網(wǎng)站的公告欄一個(gè)小效果,如果有2條公告或以上就有個(gè)滾動(dòng)效果,特整理下分享給大家2012-05-05
jquery實(shí)現(xiàn)可點(diǎn)擊伸縮與展開的菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)可點(diǎn)擊伸縮與展開的菜單效果代碼,涉及jquery鼠標(biāo)click事件控制頁面元素樣式變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
Jquery+Ajax+PHP+MySQL實(shí)現(xiàn)分類列表管理(上)
本文將采用Jquery+Ajax+PHP+MySQL來實(shí)現(xiàn)一個(gè)客戶分類列表的管理,如何利用Ajax和Json技術(shù)讓用戶操作起來覺得更輕松,感興趣的小伙伴們可以參考一下2015-10-10
jQuery基于$.ajax設(shè)置移動(dòng)端click超時(shí)處理方法
這篇文章主要介紹了jQuery基于$.ajax設(shè)置移動(dòng)端click超時(shí)處理方法,分析了click事件與touchstart事件的原理與處理技巧,需要的朋友可以參考下2016-05-05
制作高質(zhì)量的JQuery Plugin 插件的方法
最近jquery非常流行,想個(gè)性化定制一些功能,就可以將代碼寫成插件的形式,方便使用與修改。2010-04-04

