javascript+jquery+jqueryUI 模仿window表單

/** * @author Pan * @param #選取id * @param .選取class 返回array * @param 不加標識預設返回class第一個 */function $$(name){    if (name.indexOf('#') == 0) {        var str = name.replace('#', '');        return document.getElementById(str);    }    if (name.indexOf('.') == 0) {        return document.getElementsByClassName(name.replace('.', ''))[0];    }    return document.getElementsByClassName(name);}//必須要在這裡寫擷取對象，否則對象為nullwindow.onload = function(){    //給左側菜單註冊事件    var obj = $$('.menu-list');    var lis = obj.getElementsByTagName('li');    for (var i = 0; i < lis.length; i++) {        var elem = lis[i];        elem.onclick = function(){            menuClick(this);        };    }    //移除所有li的事件    try {        var menus = $$('lef-menus');        for (var i = 0; i < menus.length; i++) {            var ul = menus[i];            var lis = ul.getElementsByTagName('li');            for (var j = 0; j < lis.length; j++) {                var li = lis[j];                if (!(typeof li == "undefined")) {                    li.onclick = function(e){                        if (e && e.stopPropagation) {//非IE瀏覽器                            e.stopPropagation();                        }                        else {//IE瀏覽器                            window.event.cancelBubble = true;                        }                        liSelect(this);                    };                }            }        }    }     catch (e) {        alert(e + "li");    }    };function LightForm(){    var bol = false;    var parent = null;    var text = "新表單";    var src = "";    var frameId = "mainFrame";    var position = eval('(' + "{'top':'0','left':'0','width':'500','height':'350'}" + ')');    var objHTML = '<div class="iframe-item" style="height:${height};width:${width};left:${left};top:${top};z-index:1;">';    objHTML += '<div class="iframe-title"><b class="form-icon" id="${formIcon}"></b><span>${text}</span>';    objHTML += '<div class="ctrls-icon">';    objHTML += '<b id="min-btn" title="最小化"></b>';    objHTML += '<b id="max-btn" title="最大化"></b>';    objHTML += '<b id="close-btn" title="關閉"></b>';    objHTML += '</div>';    objHTML += '</div>';    objHTML += '<iframe src="${src}" scrolling="yes" id="${id}"></iframe>';    objHTML += '</div>';        var formIcon = "";    //表徵圖的id    this.setIcon = function(id){        formIcon = id;    };    //是否最大化    this.setMax = function(bl){        if (bl != null) {            bol = bl;        }    };    //架構載入的網頁目標    this.setSrc = function(url){        src = url;    };    //標題    this.setText = function(str){        text = str;    };    //設定id    this.setId = function(str){        frameId = str;    };    //大小    this.setSize = function(w, h){        position.width = w;        position.height = h;    };    //位置    this.setLocation = function(x, y){        position.left = x;        position.top = y;    };    //預設顯示在中間    this.showCenter = function(){        //計算top和left        var left = parent.offsetWidth / 2 - position.width / 2;        var top = parent.offsetHeight / 2 - position.height / 2;        position.top = top;        position.left = left;            };    //建立對象    this.create = function(contaier){        parent = $$(contaier)[0];    };    //顯示對象    this.show = function(){        //替換內容        zIndex();//重設其他對象的z-index為0 使其顯示在最上面        var html = objHTML.replace('${text}', text).replace('${src}', src).replace('${id}', frameId);        html = html.replace('${width}', position.width + "px").replace('${height}', position.height + "px").replace('${left}', position.left + "px").replace('${top}', position.top + "px").replace('${formIcon}', formIcon);        $(parent).append(html); //追加元素        $(".iframe-item").draggable({            containment: 'parent'        }); //註冊拖拽事件        $(".iframe-item").resizable({            containment: 'parent'        }); //註冊resize事件        this.read();//調用read 註冊事件    };        this.read = function(){        //給div表單註冊down事件        try {            var items = $$('iframe-item');            for (var i = 0; i < items.length; i++) {                var item = items[i].getElementsByClassName('iframe-title')[0]; //擷取執行個體                //註冊單擊事件                item.onmousedown = function(){                    dragClick(this);                };                //註冊雙擊事件                item.ondblclick = function(){                    formDobleClick(this);                };            }        }         catch (e) {            alert(e + "註冊出錯");        }                //給表單的最大化最小化關閉註冊事件                try {            var ctrls = $$('ctrls-icon');            for (var i = 0; i < ctrls.length; i++) {                //取得按鈕面板                var btnPanel = ctrls[i];                var btns = btnPanel.getElementsByTagName('b');                //迴圈的註冊事件                for (var j = 0; j < btns.length; j++) {                    var btn = btns[j];                    //設定一個自訂的屬性標記當前是否最大化                    btn.setAttribute('max', false);                    btn.onclick = function(){                        windowBtnAddEvent(this);                    };                }            }                    }         catch (e) {            alert(e);        }            };}//表單標題列的雙擊事件function formDobleClick(obj){    //最大化對象    try {        var elem = obj.getElementsByClassName('ctrls-icon')[0];        var maxBtn = elem.getElementsByTagName('b')[1];        var max = maxBtn.getAttribute("max");        var parent = obj.parentElement; if (max == 'false') {            var position = "{ 'top': '" + parent.offsetTop + "px', 'left': '" + parent.offsetLeft + "px','width': '" + parent.offsetWidth + "px','height':'" + parent.offsetHeight + "px'}";            maxBtn.setAttribute('pos', position);            parent.style.left = "0px";            parent.style.top = "0px";            parent.style.width = "100%";            parent.style.height = "100%";            maxBtn.setAttribute('max', true);                    }else {            var position = eval('(' + maxBtn.getAttribute("pos") + ')');            maxBtn.setAttribute('max', false);            parent.style.left = position.left;            parent.style.top = position.top;            parent.style.height = position.height;            parent.style.width = position.width;        }    }     catch (e) {        alert(e);    }    }function windowBtnAddEvent(obj){    switch (obj.id) {        case "min-btn":            btnMin(obj);            break;        case "max-btn":            btnMax(obj);            break;        case "close-btn":            btnClose(obj);            break;    }}function btnMax(obj){    //最大化對象    var max = obj.getAttribute("max");    try {        var parent = obj.parentElement.parentElement.parentElement;        if (max == 'false') {            var position = "{ 'top': '" + parent.offsetTop + "px', 'left': '" + parent.offsetLeft + "px','width': '" + parent.offsetWidth + "px','height':'" + parent.offsetHeight + "px'}";            obj.setAttribute('pos', position);            parent.style.left = "0px";            parent.style.top = "0px";            parent.style.width = "100%";            parent.style.height = "100%";            obj.setAttribute('max', true);                    }        else {            var position = eval('(' + obj.getAttribute("pos") + ')');            obj.setAttribute('max', false);            parent.style.left = position.left;            parent.style.top = position.top;            parent.style.height = position.height;            parent.style.width = position.width;        }    }     catch (e) {        alert(e);    }}function btnMin(obj){    try {        var parent = obj.parentElement.parentElement.parentElement;        parent.style.height = "35px";    }     catch (e) {        alert(e);    }}//關閉當前對象function btnClose(obj){    var form = obj.parentElement.parentElement.parentElement;//b的父容器的父容器的父容器    var parentform = form.parentElement; //表單的父容器    parentform.removeChild(form); //移除對象}function liSelect(obj){    //alert(obj.textContent);    //存在就建立，不存在就不建立    //獲得對象，然後迴圈判斷    var ar = findParentName(obj.textContent);    var str = ar + '-' + '<a href="#">' + obj.textContent + '</a>';    setNav(str);        var parent = $$('.work-content');    var nodes = parent.getElementsByClassName('iframe-item');    for (var i = 0; i < nodes.length; i++) {        var node = nodes[i];        node.style.zIndex = 0;    }    try {            for (var i = 0; i < nodes.length; i++) {            var node = nodes[i].getElementsByClassName('iframe-title')[0];            if (obj.textContent == node.textContent) {                node.parentElement.style.zIndex = 1;                return;            }        };            }     catch (e) {        alert(e);    };        //擷取icon 的id    var pelem = obj.parentElement.parentElement;    var b = pelem.getElementsByTagName('b')[0];        //建立對象    var form = new LightForm();    form.create('work-content');    form.setText(obj.textContent);    form.setSize(800, 500);    form.setIcon(b.id);    form.showCenter();    form.show();}//設定所有的表單z-index 為0function zIndex(){    var nodes = $$('iframe-item');    for (var i = 0; i < nodes.length; i++) {        var node = nodes[i];        node.style.zIndex = 0;    }    }//為所有拖拽對象註冊事件  滑鼠按下時，將當前對象顯示在其他表單的前面function dragClick(obj){    //alert(obj.textContent);    //將當前對象置頂    //取得父元素    try {        var parent = obj.parentElement.parentElement;        var nodes = parent.getElementsByClassName('iframe-item');        for (var i = 0; i < nodes.length; i++) {            var elem = nodes[i];            elem.style.zIndex = 0;        }        //設定當前對象在最前面        obj.parentElement.style.zIndex = 1;                var ar = findParentName(obj.textContent);        var str = ar + '-' + '<a href="#">' + obj.textContent + '</a>';        setNav(str);    }     catch (e) {        alert(e);    }}function setNav(str){    var title = $$('.title-label');    title.innerHTML = str;}//通過名字尋找父分類function findParentName(str){    var menus = $$('lef-menus');    for (var i = 0; i < menus.length; i++) {        var ul = menus[i];        var lis = ul.getElementsByTagName('li');        var text = ul.parentElement.getElementsByTagName('a')[0].textContent;        for (var j = 0; j < lis.length; j++) {            var content = lis[j].textContent;            if (content == str) {                return text;            }        }    }    return "";}function menuClick(obj){    //點擊的時候展開和收縮對象    //初始大小=35px    //迴圈取出當前對象裡面的所有子項目的高度    var nodes = obj.getElementsByTagName('ul')[0];    var height = nodes.offsetHeight + obj.offsetHeight;    if (obj.offsetHeight == 35) {        obj.style.height = height + "px";    }    else {        obj.style.height = "35px";    }        }

：

javascript code: