jQuery EasyUI 頁(yè)面加載等待及頁(yè)面等待層
下面一個(gè)代碼片段是 easyUI 頁(yè)面加載等待,代碼如下所示:
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的頁(yè)面等待提示層,即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 頁(yè)面加載等待及頁(yè)面等待層,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- easyui datagrid 大數(shù)據(jù)加載效率慢,優(yōu)化解決方法(推薦)
- jQuery Easyui使用(二)之可折疊面板動(dòng)態(tài)加載無(wú)效果的解決方法
- 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ù)問(wèn)題的解決辦法
- jQuery EasyUI API 中文文檔 - EasyLoader 加載器
相關(guān)文章
jQuery輕松實(shí)現(xiàn)無(wú)縫輪播效果
這篇文章主要為大家詳細(xì)介紹了jQuery輕松實(shí)現(xiàn)無(wú)縫輪播效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03jQuery 選擇器項(xiàng)目實(shí)例分析及實(shí)現(xiàn)代碼
首先廢話一句,jQuery選擇器真心很強(qiáng)大!接下來(lái)詳細(xì)介紹jQuery 選擇器項(xiàng)目實(shí)例實(shí)現(xiàn)方式2012-12-12JQuery和HTML5 Canvas實(shí)現(xiàn)彈幕效果
這篇文章主要介紹了JQuery和HTML5 Canvas兩種方法實(shí)現(xiàn)彈幕效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01jquery實(shí)現(xiàn)當(dāng)滑動(dòng)到一定位置時(shí)固定效果
這篇文章主要介紹了jquery實(shí)現(xiàn)當(dāng)滑動(dòng)到一定位置時(shí)固定效果,需要的朋友可以參考下2014-06-06基于jQuery的公告無(wú)限循環(huán)滾動(dòng)實(shí)現(xiàn)代碼
今天看到一個(gè)網(wǎng)站的公告欄一個(gè)小效果,如果有2條公告或以上就有個(gè)滾動(dòng)效果,特整理下分享給大家2012-05-05jquery實(shí)現(xiàn)可點(diǎn)擊伸縮與展開的菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)可點(diǎn)擊伸縮與展開的菜單效果代碼,涉及jquery鼠標(biāo)click事件控制頁(yè)面元素樣式變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08Jquery+Ajax+PHP+MySQL實(shí)現(xiàn)分類列表管理(上)
本文將采用Jquery+Ajax+PHP+MySQL來(lái)實(shí)現(xiàn)一個(gè)客戶分類列表的管理,如何利用Ajax和Json技術(shù)讓用戶操作起來(lái)覺得更輕松,感興趣的小伙伴們可以參考一下2015-10-10jQuery基于$.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