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);
}

//必须要在这里写获取对象，否则对象为null
window.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 为0
function 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: