JQuery版本:1.7.1;
編寫一個JS類(ck.layer.js):
- /************************************* 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遮罩一些控件(這個是我老大寫的):
- /************************************* 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類,編寫三個方法,供頁面調用:
- /************************************* 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;頁面加入代碼以及自己調用大概如下:
- <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>