DIV CSS 佈局教程網

1）窗口控制工具腳本 standard.JS

/*
----------------------------------------------------------
 Window Controller
----------------------------------------------------------
*/
// Open a normal window
function openWindow(url,w,h,c,s){
    var win,t,l,cen,srb;
    if(c){
        t=parseInt((window.screen.availHeight-parseInt(h))/2)-20;
        l=parseInt((window.screen.availWidth-parseInt(w))/2);
        cen=",top="+t.toString()+",left="+l.toString();
    }
    else{
        cen="";
    }
    if(s)
        srb="scrollbars=yes";
    else
        srb="scrollbars=no";
    win=window.open(url,null,"height="+h.toString()+",width="+w.toString()+cen+",status=no,toolbar=no,menubar=no,location=no,"+srb);
    return win;
}

// Open a full screen size window
function openFullWindow(url,s){
    var w,h,srb;
    h=2*window.screen.availHeight-window.screen.height-15;
    w=2*window.screen.availWidth-window.screen.width-10;
    if(s)
        srb="scrollbars=yes";
    else
        srb="scrollbars=no";
    return window.open(url,null,"left=0,top=0,height="+h.toString()+",width="+w.toString()+",status=yes,toolbar=no,menubar=no,resizable=yes,fullscreen=no,channelmode=no,location=no,"+srb);
}

// Open a modeless dialog box
function openDialog(url,argument,w,h,c){
    var cen;
    if(window.showModelessDialog){
        if(c)cen="yes";else cen="no";
        return window.showModelessDialog(url,argument,"dialogHeight="+h.toString()+"px;dialogWidth="+w.toString()+"px;center="+cen+";help=no;status=no");
    }
    else{
        return openWindow(url,w,h,c,false);
    }
    return rtn;
}

// Show a modal dialog box(Dialog can not lost focus)
function showDialog(url,argument,w,h,c){
    var cen;
    if(window.showModalDialog){
        if(c)cen="yes";else cen="no";
        return window.showModalDialog(url,argument,"dialogHeight="+h.toString()+"px;dialogWidth="+w.toString()+"px;center="+cen+";help=no;status=no;");
    }
    else{
        return openWindow(url,w,h,c,false);
    }
}

// Get url arguments by name, return string object
function getUrlArgumentsByName(argName)
{
    var params="";
    var retval="";
    var url=window.location.href;
    var args=url.split("?");
    if(args[0]!=url)
    {
        params=args[1];
        args=params.split("&");
        var str,arg;
        for(var i=0; i<args.length; i++){
            str=args[i];
            arg=str.split("=");
            if(arg.length<=1)continue;
            if(arg[0]==argName){
                retval=decodeURI(arg[1]);
                break;
            }
        }
    }
    return retval;
}



2）XML 請求工具腳本 AJax.JS

// =======================================================
// AJax 
// =======================================================

/*
    requestUrl: urlhandle
    url: 
    handle:  a(http, datas) 
    datas: 
    * urlHtml
*/
function requestUrl(url, handle, datas) {
    var http = false;
    //  http 
    if(window.XMLHttpRequest) {
        // Mozilla 
        try {
            http = new XMLHttpRequest();
            if (http.overrideMimeType) {
                // MiME
                http.overrideMimeType('text/XML');
            }
        } catch (e) {}
    }
    else if (window.ActiveXObject) {
        // IE
        try {
            http = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                http = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
    else if (window.createRequest) {
        // 
        try {
            http = window.createRequest();
        } catch (e) {}
    }
    // 
    if (http) {
        try {
            // 
            http.onreadyStatechange = function() {
                if (http){
                    //if (http.readyState == 4) {
                    //    // 
                    //    if (http.status == 200){
                            handle(http, datas);
                    //    }
                    //    else{
                    //        window.alert("");
                    //    }
                    //}
                }
            }
            // URL
            http.open("GET", url, true);
            // 
            http.setRequestHeader("Content-Type", "text/XML");
            http.setRequestHeader("Cache-Control", "no-cache, must-revalidate");
            http.setRequestHeader("Expires", "0");
            http.setRequestHeader("Pragma", "no-cache");
            http.setRequestHeader("SOAPAction", '""');
            // 
            http.send(null);
            return true;
        } catch (e) {
            http = false
            return false;
        }
    }
    else {
        return false;
    }
}

/*
    requestXml:  XML urlhandel
    url: 
    handle:  a(XMLdoc, datas) 
    datas: 
    * urlXML
*/
function requestXML(url, handle, datas){
    var XMLdoc = false;
    if(document.implementation && document.implementation.createDocument) {
        try{
            XMLdoc = document.implementation.createDocument("", "", null);
            XMLdoc.onload = handle(XMLdoc, datas);
            XMLdoc.load(url);
            return true;
        } catch (e) {
            return false;
        }
    }
    else if(window.ActiveXObject) {
        try {
            var XMLdoc = new ActiveXObject("Microsoft.XMLDOM");
            XMLdoc.onreadystatechange = function() {
                if (XMLdoc){
                    //if(XMLdoc.readyState == 4) {
                    //    if (XMLdoc.parseError.errorCode == 0)
                            handle(XMLdoc, datas);
                    //    else
                    //        window.alert("");
                    //}
                }
            }
            XMLdoc.load(url);
            return true;
        } catch (e) {
            return false;
        }
    }
}



3）從 XML 文件讀取


// 
// id: 
// elementId: 
// className: 
function requestHittingList(id, elementId, className) {
    var url;
    if (id == 11)
        url = "xml/hitting/11.XML";
    
    else {
        //window.alert("");
        return false;
    }
    // 
    var datas = new Array(id, elementId, className);
    return requestXML(url, processHittingList, datas);
}


function processHittingList(XMLdoc, datas){
    var element = document.getElementById(datas[1]);
    if (!element) return;
    if(XMLdoc.readyState != 4){
        element.innerText=" ";
        return;
    }
    // 
    if (XMLdoc.parseError.errorCode != 0){
        element.innerText=" ";
        return;
    }
    element.innerText="";
    // 
    var divMain = document.createElement("DIV")
    divMain.className = datas[2];
    var block = XMLdoc.getElementsByTagName("hitting");
    for (var i1 = 0; i1 < block.length; i1++) {
        // 
        var tb, tr, td, a;
        tb = document.createElement("TABLE");
        tb.width = "100%";
        tb.cellPadding = 0;
        tb.cellSpacing = 1;
        tb.border = 0;
        // 
        var rows = block[i1].getElementsByTagName("r");
        for (var i2 = 0; i2 < rows.length; i2++) {
            var r = rows[i2].childNodes;
            var uid = r.item(3).firstChild.data;
            // 
            tr = tb.insertRow();
            // 
            if (i2 == 0){
                // 
                for (var i3 = 0; i3 < 4; i3++) {
                    td = tr.insertCell();
                    td.className = "title";
                    td.appendChild(document.createTextNode(r.item(i3).firstChild.data));
                }
            }
            // 
            else {
                // 
                td = tr.insertCell();        // 
                td.className = "ids";
                td.valign="middle";
                td.appendChild(document.createTextNode(r.item(0).firstChild.data));
                td = tr.insertCell();        // 
                td.className = "rows";
                td.valign="middle";
                a = document.createElement("A");
                a.href = "Javascript: vIEwUserHitting(" + datas[0] + "," + uid + ");"
                a.appendChild(document.createTextNode(r.item(1).firstChild.data));
                td.appendChild(a);
                td = tr.insertCell();        // 
                td.className = "rows";
                td.valign="middle";
                td.appendChild(document.createTextNode(r.item(2).firstChild.data));
                td = tr.insertCell();        // 
                td.className = "rows";
                td.valign="middle";
                a = document.createElement("A");
                a.className = "link"
                a.href = "Javascript: vIEwUserHitting(" + datas[0] + ","  + uid + ");"
                a.appendChild(document.createTextNode(""));
                td.appendChild(a);
            }
        }
        divMain.appendChild(tb);
    }
    // 
    XMLdoc = false;
    // 
    var list = element.children(0);
    if (list) {
        element.replaceChild(divMain, list);
    }
    else {
        element.appendChild(divMain);
    }
}


// 
// typeId: 
// userId: 
function vIEwUserHitting(typeId, userId){
    window.open("show.htm?typeId=" + typeId + "&userId=" + userId);
}




xmlhttp.readyState是指xmlhttp請求的狀態，0為未初始化，1為正在裝載，2為裝載完畢，3為交互中，4為完成。當狀態發生變化的時候，浏覽器會回調xmlhttp.onreadystatechange函數，即XMLhttpChange。（請使用回調函數這種形式，不要使用while的無窮循環來判斷是否完成，這種方式會大量消耗處理器資源，並且不能顯示頁面）
XMLhttp.status是指返回的狀態，Web正常返回為200 ，本地調試正常返回為0。