时间：2015-08-03 18:53:29 阅读：955 评论：0 收藏：0 [点我收藏+]

标签：

JQuery版本：1.7.1；

编写一个JS类(ck.layer.js)：

[javascript] view plain copy

/************************************* Achievo.Javascript Library **************************
* Using jQuery 1.7.1
* Using cks.js 1.0.1
* Name : ck.layer.js
* Create by Angle.Yang on 2012/03/07 [V1.0.0]
*******************************************************************************************/
(function ($) {
$.fn.masklayer = function (settings) {
/// <summary>
/// 模态窗口，继承 easy-ui.window
/// </summary>
/// <param name="settings" type="object">扩展了{title:[div中的内容], action:[执行的动作，目前支持"close"], result:[返回结果]}</param>
/// <returns type="void" />
settings = $.extend(true, { title: ‘加载中...‘, action: "open" }, settings);
/// <summary>
/// 初始化所有 cks 样式的按钮（页面运行时进行初始化）
/// </summary>
/// <returns type="void" />
_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 plain copy

/************************************* Achievo.Javascript Library **************************
* Using jQuery 1.7.1
* Using cks.js 1.0.2
* Name : ck.fixer.js
* Create by Toky on 2012/02/14 [V1.0.0]
*******************************************************************************************/
(function ($) {
$.fn.fix_ie6Select = function () {
/// <summary>
/// 兼容弹出层在 IE6 下不能掩盖 Select
/// </summary>
/// <returns type="void" />
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 plain copy

/************************************* layer.class Javascript Library ***************************
* Using jQuery 1.7.1
* Version : 1.0.0
* Name : layer.class.js
* Create by Angle.Yang on 2012/03/07
*******************************************************************************************/
$.extend({
layer: {
name: "layer.class.js",
globalVar: {}, // 内部变量，外部不得使用(document.body 未初始化时使用；内部变量)
setMaskTitle: function (title) {
/// <summary>
/// 修改遮罩层的内容 Angle.Yang 2012.03.07 16:35 Add
/// </summary>
/// <param name="title" type="string">遮罩层中的提示信息</param>
/// <returns type="void" />
$.fn.masklayer({ title: title, action: "setTitle" });
},
openMask: function (title) {
/// <summary>
/// 显示遮罩层DIV Angle.Yang 2012.03.07 16:35 Add
/// </summary>
/// <param name="title" type="string">遮罩层中的提示信息</param>
/// <returns type="void" />
$.fn.masklayer({ title: title, action: "open" });
},
closeMask: function () {
/// <summary>
/// 关闭遮罩层DIV Angle.Yang 2012.03.07 16:35 Add
/// </summary>
/// <returns type="void" />
$.fn.masklayer({ action: "close" });
}
}
});
cks.using("kits/ck.layer.js");
编写我们的页面，引用JQuery(1.7.1)版本，引用layer.class.js；页面加入代码以及自己调用大概如下：
[javascript] view plain copy
1. <script src="../js/jquery.js" type="text/javascript"></script>
2. <script src="../js/layer.class.js" type="text/javascript"></script>
3. <script type="text/javascript" language="javascript">
4. function GetDataSource() {
5. layer.openMask("数据提交中，请稍等..."); //开始给出提示
6. $.ajax({
7. url: s.url + "&FormControlID=" + obj.id,
8. async: true,
9. cache: false,
10. contentType: "text/xml; charset=\"utf-8\"",
11. data: {},
12. dataType: "xml",
13. type: "Post",
14. success: function (xml, textStatus, jqXHR) {
15. layer.setMaskTitle("数据返回加载中..."); //中间修改提示文本
16. //执行相关代码
17. },
18. complete: function (jqXHR, textStatus) {
19. layer.closeMask(); //执行完关闭
20. }
21. });
22. }
23. </script>

标签：

原文地址：http://www.cnblogs.com/lengzhijun/p/4699827.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”