生活随笔
收集整理的這篇文章主要介紹了
利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JQuery版本：1.7.1；
編寫一個JS類(ck.layer.js)：
[javascript] view plaincopy
(function?($)?{????????$.fn.masklayer?=?function?(settings)?{????????????????????????????????????????????????????settings?=?$.extend(true,?{?title:?'加載中...',?action:?"open"?},?settings);????????????????????????????????????????????????_init?=?function?()?{??????????????if?(settings.action?==?"open")?{??????????????????if?($("#div_load").length?==?0)?{??????????????????????var?boardDiv?=?"<div?id='div_load'><\/div>";??????????????????????$(document.body).append(boardDiv);??????????????????}??????????????????if?($("#div_load").length?>?0)?{??????????????????????$("#div_load").fix_ie6Select();??????????????????????$("#div_load").css("display",?"block");??????????????????????$("#div_load").css("height",?document.body.offsetHeight);??????????????????????$("#div_load").html(settings.title);??????????????????}??????????????}??????????????else?if?(settings.action?==?"close")?{??????????????????if?($("#div_load").length?>?0)?$("#div_load").css("display",?"none");??????????????}??????????????else?if?(settings.action?=?"setTitle")?{??????????????????if?($("#div_load").length?>?0)?$("#div_load").html(settings.title);??????????????????else?{??????????????????????var?boardDiv?=?"<div?id='div_load'>"?+?settings.title?+?"<\/div>";??????????????????????$(document.body).append(boardDiv);??????????????????????$("#div_load").fix_ie6Select();??????????????????????$("#div_load").css("display",?"block");??????????????????????$("#div_load").css("height",?document.body.offsetHeight);??????????????????}??????????????}??????????};??????????????return?(function?()?{?_init()?})();????????};??})(jQuery);??
?
$("#div_load").fix_ie6Select(); 這句調用另一個JS，主要作用是兼容IE6遮罩一些控件(這個是我老大寫的)：
[javascript] view plaincopy
??(function?($)?{??????$.fn.fix_ie6Select?=?function?()?{??????????????????????????????????????????return?this.each(function?(index)?{??????????????var?frm?=?$(this).find('iframe[tag*="ie6Selector"]');??????????????if?(cks.browser.IE6)?{??????????????????var?w?=?$(this).width();??????????????????var?h?=?$(this).height();??????????????????if?(frm.length?==?0)?{??????????????????????$(this).prepend('<iframe?tag="ie6Selector"?src=""?frameborder="no"?marginwidth="0"?marginheight="0"?style="border:none;position:absolute;visibility:inherit;top:0px;left:0px;width:'?+?w?+?'px;height:'?+?h?+?'px;z-index:-1;"></iframe>');??????????????????}??????????????????else?{??????????????????????frm.css("width",?w);??????????????????????frm.css("height",?h);??????????????????}??????????????}??????????});??????};??})(jQuery);??
在編寫一個JS類，編寫三個方法，供頁面調用：
[javascript] view plaincopy
??$.extend({??????layer:?{??????????name:?"layer.class.js",??????????globalVar:?{},???????????????????setMaskTitle:?function?(title)?{??????????????????????????????????????????????????????????????????????????$.fn.masklayer({?title:?title,?action:?"setTitle"?});??????????},????????????openMask:?function?(title)?{??????????????????????????????????????????????????????????????????????????$.fn.masklayer({?title:?title,?action:?"open"?});??????????},????????????closeMask:?function?()?{??????????????????????????????????????????????????????????????$.fn.masklayer({?action:?"close"?});??????????}????????}??});????cks.using("kits/ck.layer.js");??
編寫我們的頁面，引用JQuery(1.7.1)版本，引用layer.class.js；頁面加入代碼以及自己調用大概如下：
[javascript] view plaincopy ????<script?src="../js/jquery.js"?type="text/javascript"></script>??????<script?src="../js/layer.class.js"?type="text/javascript"></script>??????<script?type="text/javascript"?language="javascript">??????????function?GetDataSource()?{?????????????layer.openMask("數據提交中，請稍等...");????????????$.ajax({?????????????????url:?s.url?+?"&FormControlID="?+?obj.id,?????????????????async:?true,?????????????????cache:?false,?????????????????contentType:?"text/xml;?charset=\"utf-8\"",?????????????????data:?{},?????????????????dataType:?"xml",?????????????????type:?"Post",?????????????????success:?function?(xml,?textStatus,?jqXHR)?{?????????????????????layer.setMaskTitle("數據返回加載中...");???????????????????????????????????},?????????????????complete:?function?(jqXHR,?textStatus)?{?????????????????????layer.closeMask();????????????????}?????????????});?????????}????????</script>?
轉載于:https://www.cnblogs.com/lengzhijun/p/4699827.html
總結
以上是生活随笔為你收集整理的利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
