在同一個頁面父視窗開啟子視窗，動態無重新整理提交(1/2)

在同一個頁面父視窗開啟子視窗，動態無重新整理提交，超炫基於jquery ajax提交，相容ie7+，Firefox..

基於父視窗開啟子視窗，效果超炫，用jquery ajax 動態無重新整理提交...

下面先來分析代碼：父表單頁面代碼

   

    <div>
    
        <a href="網頁特效:void(0);" url='openerweb.asp教程x' id="aparent">編輯</a>
    
        <div id="blockoptip" style="display:none;" class="tipbox"><img src="http://images.cnblogs.com/busy.gif" alt="wait" /> <span id="blockoptipaction">正在儲存,請稍等...</span></div>
    
    <div id="wrap">
    
    <div><img src="/styles/1/busy.gif" id="wrapimg"/><span id="wraptitle"></span></div>
    
    <div id="wrapbtn" ><input class="ok" type="button"/><input class="cancel" type="button"/></div>
    
    <iframe id="blockframe" style="display:none" name="blockframe" width="100%"  height="100%" frameborder="0" scrolling="auto" ></iframe>
    
</div>
    
    </div>
    

   

 

子表單代碼：

   

    <div class="managerform">
    
    <form id="form1" runat="server">
    
    子視窗.........dddd    </form>
    
    <div id="blockoptip" style="display:none;" class="tipbox"><img src="/images/busy.gif" alt="wait" /> <span id="blockoptipaction">正在儲存,請稍等...</span></div>
    
    <div id="wrap">
    
    <div><img src="/styles/1/busy.gif" id="wrapimg"/><span id="wraptitle"></span></div>
    
    <div id="wrapbtn" ><input class="ok" type="button"/><input class="cancel" type="button"/></div>
    
    <iframe id="blockframe" style="display:none" name="blockframe" width="100%"  height="100%" frameborder="0" scrolling="auto" ></iframe>
    
</div>
    
</div>
   

 

父視窗的js代碼：

<script type="text/javascript">
        function savedetail() {
            alert("ok");
            $.ajaxcommon("正在儲存，請耐心等待....", "openerweb.aspx?act=save", null, function (p) {
                if (p.succ) {  parent.unblock(); }
            });

            return false;
        }
    </script>

子頁面和父頁面都要引用jextending.js，這個檔案有兩個主要的方面，分別如下：

function showedit(src, title, width, height, savecallback,bottom,showintop) {
    submitfunc=null;
    loadfunc = null;
    var b=bottom==undefined?true:bottom;//是否需要底部的儲存關閉按鈕
    if (parent.p == true && showintop!=false&&showintop==undefined) {
        //如果存在父視窗，則開始父視窗的彈出框       
        parent.showedit(src, title, width, height, savecallback, b,true);
        return;
    }
    submitfunc = (savecallback == undefined || savecallback == null) ? (function () { }) : savecallback;   
    var isobject=(typeof(src)=="object");
    var obj=src;
    if (!isobject) {
        var href = src;
        if (href.indexof('?') > 0) {
            href += "&mm=" + math.random();
        }
        else {
            href += "?mm=" + math.random();
        }
        obj=$("#blockframe").attr("src",href);
    }
    $.load("正在載入....");
    loadfunc=function(){
        ub(true);       
        $.blockui({ message:obj , theme: true, title: title,fadeout:false,needbottom:b,
            themedcss教程: {  width: width, height: height },
            onblock: function () {
                if (typeof (submitfunc) == "function") {                   
                    $("#blockdiv").find(".bottom input[name='save']").bind("click",function () { submitfunc(); }); //執行儲存按鈕
                }
            }
        });
      };
      settimeout(loadfunc,2000);
}。這是一個開啟子頁面的函數，它包括延時載入效果設定，及開啟視窗的相關設定. 第二函數是ajaxcommon提交處理函數。

$.ajaxcommon = function (title, url, data, callback, isonlycallback) {
        $.load(title); //設定載入狀態
        $.ajax({
            url: url + (url.indexof("?") == -1 ? "?" : "&") + "s=" + math.random(),
            type: 'post',
            datatype: 'json',
            data: data,
            error: function (a) {
                $.error(a);
            },
            success: function (json) {
                if (json.succ == 1 || json.succ) {
                    settimeout("$.correct('" + json.message + "')", 500);
                    timeoutfunc = settimeout("ub()", 1500);
                    if (typeof (callback) == "function") {                       
                        window.settimeout(callback,1700,json);
                    }
                }
                else {
                    var info = json.info || json.message;
                    if (isonlycallback!=undefined&&isonlycallback==true) { callback(json); return; }
                    $.error(info);
                    callback(json);
                }
                return;
            }
        });
    };這是一個ajax提交處理的函數，包括載入狀態，處理結果的返回及子視窗關閉等相關的.

首頁 1 2 末頁