Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Unindo DIVs 36

    Enviado por

    Bernardo Meyer
    15 visualizações17 páginas

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    15 visualizações17 páginas

    Unindo DIVs 36

    Enviado por

    Bernardo Meyer

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 17

    Unindo_DIVs_36.

    htm -- Printed on 4/12/2012, 18:05:03 -- Page 1

    <html id="htm1"> <head> <link rel="stylesheet" href="print.css" type="text/css" media="print"> <META http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <!-No Mozilla Firefox necessrio carregar o complemento MENU EDITOR --> <STYLE type="text/css" media="screen">

    #frm1 {position:absolute;top:850;left:0;} A.botao { border-style: solid;border-width: 1;border-color: gray; text-decoration: none;padding-left: 3px;padding-right: 3px;} A.botaoW { border: solid 1 gray; text-decoration: none;padding-left: 3px;padding-right: 3px;background-color:white; font-size: 11px;} A.botaoVm { background-color: red;color:white;text-decoration:none;} BODY { border: solid 1 lightgrey } DIV {font-family: Trebuchet MS; margin: 0px;} DIV.Conecta { position:absolute; font-size: 1px; line-height: 0%; border-style: solid;border-width: 1;} DIV.Conecta.triplo { border-color: green; } DIV.Conecta.duplo { border-color: blue; } DIV.Conecta.cima { border-color: midnightblue; } DIV.Conecta.horiz { border-color: darkgray; } DIV.debug {position:absolute;left:730;top:500;font-size: 10px;background-color: palegoldenrod;border: solid 1 gold;width:300px;} DIV.Gerada { position:absolute; border: solid 1 midnightblue;text-align: center; vertical-align: middle;} DIV.main {border-style: solid;border-width: 1;border-color: lightgrey} DIV.menu {background-color: lightyellow;border-style: solid;border-width: 1;border-color: gold; font-family: Arial; font-size: 11px;} DIV.suspenso {float:left; padding-left:80px;padding-right:80px;padding-bottom: 10px; width: 89%; height: 80px; background-color: gray; font-size: 36px; COLOR: WHITE;} DIV TABLE { border: solid 1 gold } DIV TABLE TD {font-family: Arial; font-size: 11px; } HR {color:gold;} INPUT.botao {width:60px;} LABEL.Tit {font-size: 16px; color: mediumblue;font-weight:bold;} P.zero {padding:0px;margin:0px;} SPAN.suspenso {color: antiquewhite;} SPAN.suspenso.menor {font-size: 14px; } SPAN.titulo {font-size: 12px; font-weight: bold; } TABLE.Tools TD {border-style: solid;border-width: 1;border-color: lightgrey;}
    </STYLE> <script type="text/javascript" src="jquery-1.6.4.js"> </script> <script type="text/javascript">
    var stCONTRIPLO = "Conecta triplo"; var stCONDUPLO = "Conecta duplo"; var stCONCIMA = "Conecta cima"; var stCONHORIZ = "Conecta horiz"; var LEFTCLICK = 1; var RIGHTCLICK = 2; var ie = (document.all)? true:false; var BOXCOUNT = 0; var CONEXCOUNT = 0; var DELETADA = "Del"; var arrBox = new Array(); var arrConex = new Array(); function spcToUnder(texto){ return texto.replace(/\s/g,"_"); } function abreContextMenu(){ fechaTodasJanelas(); $("#menu").show(); } /* Mostra o menu de contexto em uma posio igual ao local do click Neste exemplo s pega RIGHTCLICK. As coordenadas do click so: var topo = event.srcElement.style.top; var esq = event.srcElement.style.left; */ function contextMenu(e){ e = window.event || e;
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 2


    //var obj = event.target ? event.target : event.srcElement; var obj = e.target ? e.target : e.srcElement; // var obj = event.srcElement; var topo = e.clientY; var esq = e.clientX; var objnome = obj.id; $("#ptX").text("X,Y:"+esq); $("#ptY").text(","+topo); debuga(e.button+"-"+objnome+"-"+obj); if( e.button == RIGHTCLICK ){ //alert(e.button+"-"+objnome+"-"+obj); var corDeFundoProp; var corDeBordaProp ; if( objnome == "bmain" || objnome == "htm1" ){ fechaTodasJanelas(); $("#menu").show(); $('#menu').css({ 'opacity' : 0.7 }); $("#menu").css('position','absolute'); $("#menu").css('top',topo-5); $("#menu").css('left',esq+5); $("#box_x").val(esq); $("#box_y").val(topo); } if( objnome.substr(0,2) == "bx" ){ if( objnome.substr(0,3) == "bxp" ) { $("#boxname").text(""+objnome); $("#boxtype").text("Pargrafo"); corDeFundoProp = "greenyellow"; } else { $("#boxname").text(""+objnome); $("#boxtype").text("BOX"); corDeFundoProp = "lightyellow"; debuga("Cor Fundo: "+$('#propbox').css('backgroundColor' )); $("#prop_corLetra").val($('#propbox').css('color')); } fechaTodasJanelas(); $("#propbox").show(); $('#propbox').css({ 'opacity' : 0.7 }); $("#propbox").css('position','absolute'); $("#propbox").css('top',topo-5); $("#propbox").css('left',esq+5); $("#propbox").css('width','260px'); $("#propbox").css('backgroundColor' ,corDeFundoProp); $("#prop_left").val($("#"+objnome).css('left')); $("#prop_top").val($("#"+objnome).css('top')); $("#prop_height").val($("#"+objnome).css('height')); $("#prop_width").val($("#"+objnome).css('width')); } if( objnome.substr(0,2) == "cx" ){ $("#conectname").text(objnome); fechaTodasJanelas(); $("#propconect").show(); $('#propconect').css({ 'opacity' : 0.7 }); $("#propconect").css('position','absolute'); $("#propconect").css('top',topo-5); $("#propconect").css('left',esq+5); corDeFundoProp = "lightgrey"; $("#propconect").css('backgroundColor' ,corDeFundoProp); } $("#propbox").css('backgroundColor' ,corDeFundoProp); return false; } else { if( e.button == LEFTCLICK ){ // ESTE ALERT S PARA DEBUG, POIS CONFUNDE OS EVENTOS // Objetos com nome iniciado com "bx" so caixas if( objnome.substr(0,2) == "bx" ){
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 3


    alert("Box: "+objnome); } else { // Objetos com nome iniciado com "cx" so conectores if( objnome.substr(0,2) == "cx" ){ alert("Conector: "+objnome); } } } else { return true; } } } function fechaTodasJanelas(){ fechaMenu(); fechaProp(); fechaConect(); } /* Inicializao (evento OnLoad da pgina) */ function init(){ document.onmousedown=contextMenu; $('#banner').css({ 'opacity' : 0.7 }); fechaTodasJanelas(); } /* Fecha folha de propriedades de box */ function fechaProp(){ $("#propbox").hide(); } /* Fecha folha de propriedades de conector */ function fechaConect(){ $("#propconect").hide(); } /* Fecha Console */ function fechaConsole(){ $("#console").hide(); } /* Fecha o menu de contexto */ function fechaMenu(){ $("#menu").hide(); } /* Cria um OBJETO abstrato BOX */ function box(x,y,largura,altura){ this.x = x; this.y = y; this.largura = largura; this.altura = altura; this.corLetra = "" ; this.corFundo = ""; this.corBorda = ""; this.textoCaixa = ""; BOXCOUNT++; this.nome = BOXCOUNT+""; this.numero = BOXCOUNT+""; this.status = ""; } /* Cria um OBJETO abstrato CONEX (Conexao) */ // caixa1,caixa2,tipoTraco,classe,largura,altura,topo,esquerda function conex(tipoLigacao,caixa1,caixa2,noConex){ this.tipoLigacao = tipoLigacao; this.caixa1 = caixa1; this.caixa2 = caixa2; this.noConex = noConex; this.status = ""; } /* Cria um objeto visual
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 4


    */ function criaOneBox(){ x = parseInt($("#box_x").val()); y = parseInt($("#box_y").val()); largura = parseInt($("#box_larg").val()); altura = parseInt($("#box_alt").val()); var noBox = BOXCOUNT+1; if( $("#box_nome").val() != "" ) { var nomeBox = $("#box_nome").val(); } else { var nomeBox = "Box "+parseInt(BOXCOUNT+1); } arrBox[noBox] = new box(x, y, largura, altura); debuga("<b>Box:</b> bx"+noBox+"("+x+","+y+","+largura+","+altura+") criada."); arrBox[noBox].corLetra = $("#box_corLetra").val(); arrBox[noBox].corFundo = $("#box_corFundo").val(); arrBox[noBox].corBorda = $("#box_corBorda" ).val(); arrBox[noBox].nome = spcToUnder(nomeBox); arrBox[noBox].numero = noBox; arrBox[noBox].status = ""; var o = criaDiv(arrBox[noBox],nomeBox,$("#box_corLetra").val(),$("#box_corFundo").val(),$("#box_corBorda" ).val() ); return o; } /* Cria uma DIV a partir do objeto BOX com algumas propriedades visuais Acrescida propriedade .numero */ function criaDiv(caixa, texto, cor, corFundo, corBorda ){ var largura = caixa.largura; var altura = caixa.altura; var x = caixa.x; var y = caixa.y; var nome = caixa.nome; var numero = caixa.numero; var fonte = $("#main").html(); var nomeDiv = "#bx"+numero; fonte += "<DIV"; fonte += " name=\"bx" + numero + "\""; fonte += " id=\"bx" + numero + "\""; fonte += " class=\"Gerada\" style=\"width:"+largura+";height:"+altura+";top:"+y+";left:"+x+";"; if( corFundo ){ fonte += "background-color:" +corFundo+";"; } if( corBorda ){ fonte += "border-color:" +corBorda +"; border-width: 1px; border-style: solid;"; } fonte += ";\">"; if( texto ){ fonte += "<P id=\"bxp"+numero+"\" name=\"bxp"+numero+"\" style=\""; if( cor ){ fonte += "color:"+cor+";"; } else { fonte += "color:"+$("#box_corLetra").val()+";"; } fonte += "\">"+texto+"</P>"; } fonte += "</DIV>"; $("#main").html(fonte); $("#boxCount").text("N de Caixas:"+BOXCOUNT); return $(nomeDiv).get(); } /* Cria um segmento de reta horizontal ou vertical, de acordo com determinados parametros Acrescida propriedade .numero */ function criaTraco(caixa1,caixa2,tipoTraco,classe,largura,altura,topo,esquerda){ return "<DIV id=\"cx" + caixa1.numero + "_" + caixa2.numero + tipoTraco +"\" name=\"cx" + caixa1.numero + "_" + caixa2.numero + tipoTraco +"\" class=\""+classe+"\" style=\"width:"+largura+";height:"+altura+";top:"+topo+";left:"+esquerda+";\"></DIV>"; } /* Cria um conector entre duas caixas
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 5


    */ function criaConector( caixa1, caixa2){ if( caixa2.x < caixa1.x ){ alert('AS CONEXES DEVEM SER FEITAS DA ESQUERDA PARA A DIREITA.'); var temp = caixa1; caixa1 = caixa2; caixa2 = temp; } // Primeira caixa largura1 = caixa1.largura; altura1 = caixa1.altura; x1 = caixa1.x; y1 = caixa1.y; // Segunda caixa largura2 = caixa2.largura; altura2 = caixa2.altura; x2 = caixa2.x; y2 = caixa2.y; // 0 - Pega o fonte dentro de DIV#main var fonte = $("#main").html(); // 1 - Diferenas simples var difX = x2 - x1 ; var difXlarg = x2 - x1 - largura1; var difY = y2 - y1 ; var distanciaX = x2 - (x1+largura1); var distanciaY = y2 - (y1+altura1); var difLarg = largura2 - largura1; var difAlt = altura2 - altura1; var ctGrav1 = x1 + largura1/2; var ctGrav2 = x2 + largura2/2; // 2 - Diferenas levando em conta a extenso var difYe = y2 + altura2/2 - ( y1 + altura1/2); var difYeI = y1 + altura1/2 - (y2 + altura2/2); var difXe = x2 + largura2/2 - ( x1 + largura1/2); // 3 - Testando a posio relativa // 3.1 - DIVs na mesma linha horizontal if( difY == 0 ){ // Sem diferena de altura if( difAlt == 0 ){ debuga('cnx 101'); fonte += criaTraco(caixa1,caixa2,"h",stCONHORIZ,distanciaX,"1px",parseInt(y1+altura1/2),parseInt(x1+largura1)); // Com diferena de altura } else { debuga('cnx 102'); fonte += criaTraco(caixa1,caixa2,"h",stCONHORIZ,distanciaX/2,"1px",parseInt(y1+altura1/2),parseInt(x1+largura1)); fonte += criaTraco(caixa1,caixa2,"h",stCONHORIZ,distanciaX/2,"1px",parseInt(y2+altura2/2),parseInt(x1+largura1+( difX-largura1)/2)); // Vertical if( y1+altura1/2 > y2+altura2/2 ) { fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",parseInt(y1+altura1/2-(y2+altura2/2)),parseInt(y2+ altura2/2),parseInt(x1+largura1+(difX-largura1)/2)); } else { fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",parseInt(y2+altura2/2-(y1+altura1/2)),parseInt(y2+ altura2/2),parseInt(x1+largura1+(difX-largura1)/2)); } } // 3.2 - DIVs no esto na mesma linha horizontal } else { // 3.3 - DIVs esto adjacentes ( existe distncia horizontal) if( distanciaX > 0 ){ if( distanciaY >= 0 ){ debuga('cnx 200'); // Linhas Horizontais fonte += criaTraco(caixa1,caixa2,"a",stCONTRIPLO,distanciaX/2,"1px",parseInt(y1+altura1/2),parseInt(x1+ largura1)); fonte += criaTraco(caixa1,caixa2,"b",stCONTRIPLO,distanciaX/2,"1px",parseInt(y2+altura2/2),parseInt(x1+ largura1+distanciaX/2)); // Linha Vertical fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",difYe,parseInt(y1+altura1/2),parseInt(x1+largura1+ distanciaX/2)); } else {
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 6


    if( difAlt > 0 ){ debuga('cnx 211'); // Linhas Horizontais fonte += criaTraco(caixa1,caixa2,"a",stCONTRIPLO,distanciaX/2,"1px",parseInt(y1+altura1/2),parseInt(x1+ largura1)); fonte += criaTraco(caixa1,caixa2,"b",stCONTRIPLO,distanciaX/2,"1px",parseInt(y2+altura2/2),parseInt(x1+ largura1+distanciaX/2)); // Linha Vertical if( difYe > 0 ){ debuga('cnx 2111'); fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",difYe,parseInt(y1+altura1/2),parseInt(x1+ largura1+distanciaX/2)); } else { debuga('cnx 2112'); fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",difYeI,parseInt(y2+altura2/2),parseInt(x1+ largura1+distanciaX/2)); } } else { debuga('cnx 212'); // Linhas Horizontais fonte += criaTraco(caixa1,caixa2,"a",stCONTRIPLO,distanciaX/2,"1px",parseInt(y1+altura1/2),parseInt(x1+ largura1)); fonte += criaTraco(caixa1,caixa2,"b",stCONTRIPLO,distanciaX/2,"1px",parseInt(y2+altura2/2),parseInt(x1+ largura1+distanciaX/2)); // Linha Vertical - GARANTE DUAS DIREES DE TRAO if( difYe > 0 ){ fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",difYe,parseInt(y1+altura1/2),parseInt(x1+ largura1+distanciaX/2)); } else { fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",difYeI,parseInt(y2+altura2/2),parseInt(x1+ largura1+distanciaX/2)); } } } } else { if( difXlarg < 0 && difY < 0 ){ debuga('cnx 400'); // Linha Horizontal fonte += criaTraco(caixa1,caixa2,"h",stCONCIMA,parseInt(largura2/2-(x1+largura1-x2)),"1px",parseInt(y1+ altura1/2),parseInt(x1+largura1)); // Linha Vertical fonte += criaTraco( caixa1,caixa2,"v",stCONTRIPLO,"1px",parseInt(y1-y2+altura2),parseInt(y2+altura2),parseInt (x1+largura1+largura2/2-(x1+largura1-x2)) ); } else { // 3.3 - DIVs no esto adjacentes ( no existe distncia horizontal) debuga('cnx 300'); if( x2 > x1 && x2 < ( x1+largura1/2 ) ){ debuga('cnx 310'); // Linhas Verticais (Uma caixa praticamente sobre a outra) fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",parseInt((difY-altura1)/2),y1+altura1,parseInt(x1+ largura1/2)); fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",parseInt((difY-altura1)/2),parseInt(y1+altura1+( difY-altura1)/2),parseInt(x2+largura2/2)); // Horizontal if( ctGrav2 - ctGrav1 > 0 ){ fonte += criaTraco(caixa1,caixa2,"h",stCONCIMA,parseInt((x2+largura2/2)-(x1+largura1/2)),"1px", parseInt(y1+altura1+(difY-altura1)/2),parseInt(x1+largura1/2)); } else { fonte += criaTraco(caixa1,caixa2,"h",stCONCIMA,parseInt((x1+largura1/2)-(x2+largura2/2)),"1px", parseInt(y1+altura1+(difY-altura1)/2),parseInt(x2+largura2/2)); } } else { debuga('cnx 320'); // Linha Vertical fonte += criaTraco( caixa1,caixa2,"v",stCONDUPLO,"1px",parseInt(difYe-altura2/2),parseInt(y1+altura1), parseInt(x1+largura1/2) ); // Linha Horizontal fonte += criaTraco( caixa1,caixa2,"h",stCONDUPLO,parseInt(difX-largura1/2),"1px",parseInt(y1+altura1+ difYe-altura2/2),parseInt(x1+largura1/2) ); }
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 7


    } } } $("#main").html(fonte); return true; } /* Cria instncia de um objeto CONEX */ function criaConex(tipo, input1, input2){ CONEXCOUNT++; var descri = input1+"_"+input2; debuga("criaConex:"+descri); arrConex[CONEXCOUNT] = new conex(tipo, input1, input2, CONEXCOUNT); arrConex[descri] = new conex(tipo, input1, input2, CONEXCOUNT); return arrConex[CONEXCOUNT]; } /* Conecta duas caixas de acordo com os parmetros fornecidos */ function ligaBoxesFromData(tipo, input1, input2){ $("#nbx1").val(input1); $("#nbx2").val(input2); ligaBoxes(tipo); //criaConex(tipo, input1, input2); } /* Conecta duas caixas de acordo com os parmetros do formulrio */ function ligaBoxes(tipo){ debuga(tipo); var input1 = $("#nbx1").val(); var input2 = $("#nbx2").val(); var oCon; if( arrBox[input1] ){ if( arrBox[input2] ){ if( arrBox[input1].status == DELETADA || arrBox[input2].status == DELETADA ) { alert("Caixa(s) no mais existe(m)") return; } } else { alert("Box 2 NO EXISTE"); } } else { alert("Box 1 NO EXISTE"); } if( tipo ){ if( tipo == 1 ){ ligaBoxesTipo1(arrBox[input1], arrBox[input2]); oCon = criaConex(1, input1, input2); } if( tipo == 2 ){ ligaBoxesTipo2(arrBox[input1], arrBox[input2]); oCon = criaConex(2, input1, input2); } if( tipo == 3 ){ ligaBoxesTipo3(arrBox[input1], arrBox[input2]); oCon = criaConex(3, input1, input2); } if( tipo == 4 ){ ligaBoxesTipo4(arrBox[input1], arrBox[input2]); oCon = criaConex(4, input1, input2); } } else { // SEM TIPO if( input1 == "" || input2 == "" ){ alert('Indique ambas as caixas para ligar.'); return; } debuga(input1+"-"+input2);
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 8


    eval("vbox1 = arrBox["+input1+"]"); eval("vbox2 = arrBox["+input2+"]"); criaConector(arrBox[input1], arrBox[input2]); debuga(vbox1.x+"-"+vbox2.x); } } function ligaBoxesTipo1(caixa1, caixa2){ // 1 - Extrai Propriedades // Primeira caixa largura1 = soNum(caixa1.largura); altura1 = soNum(caixa1.altura); x1 = soNum(caixa1.x); y1 = soNum(caixa1.y); // Segunda caixa largura2 = soNum(caixa2.largura); altura2 = soNum(caixa2.altura); x2 = soNum(caixa2.x); y2 = soNum(caixa2.y); debuga("ligaBoxesTipo1[a](y1:"+y1+",altura1:"+altura1+",y2:"+y2); // 2 - Clculo de LargFIXA var LargFIXA; if( x2 > x1 ){ LargFIXA = 40; } else { LargFIXA = Math.abs(x2-x1)+40; } // 3 - Primeira linha horizontal // Pega o fonte dentro de DIV#main var fonte = $("#main").html(); // Emite o trao var _altura = y1+altura1/2; debuga("ligaBoxesTipo1("+LargFIXA+"): Larg:"+LargFIXA+",Y:"+_altura+",X:"+parseInt(x1-LargFIXA)); fonte += criaTraco(caixa1,caixa2,"h",stCONTRIPLO,LargFIXA,"1px",parseInt(y1+altura1/2),parseInt(x1-LargFIXA)); // 4 - Segunda linha horizontal var horizontal; if( x2 > x1 ){ horizontal = LargFIXA + x2 - x1; } else { horizontal = LargFIXA - (x1 - x2); } fonte += criaTraco(caixa1,caixa2,"h",stCONTRIPLO,horizontal,"1px",parseInt(y2+altura2/2),parseInt(x1-LargFIXA)); // 5 - Linha Vertical var refHorizontal, refAltura, refVertical; if( y2 > y1 ){ if( x1 < x2 ){ debuga("y2 > y1: - (1)"); refHorizontal = parseInt(x1 - LargFIXA); } else { refHorizontal = parseInt(x1-LargFIXA); debuga("y2 > y1: - (2)"); } refAltura = parseInt(y2+altura2/2-(y1+altura1/2)); refVertical = parseInt(y1+altura1/2); } else { if( x1 < x2 ){ debuga("y1 > y2: - (3)"); refHorizontal = parseInt(x1 - LargFIXA); } else { debuga("y1 > y2: - (4)"); refHorizontal = parseInt(x1-LargFIXA); } refAltura = parseInt(y1+altura1/2-(y2+altura2/2)); refVertical = parseInt(y2+altura2/2); } fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",refAltura,refVertical,refHorizontal); debuga("ligaBoxesTipo1V: Altura: "+ parseInt(y2+altura2/2-(y1+altura1/2)) +",Topo:"+parseInt(y1+altura1/2)+",Esq:"+parseInt(x1LargFIXA)); $("#main").html(fonte); return true; } function ligaBoxesTipo2(caixa1, caixa2){
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 9


    // 1 - Extrai Propriedades // Primeira caixa largura1 = soNum(caixa1.largura); altura1 = soNum(caixa1.altura); x1 = soNum(caixa1.x); y1 = soNum(caixa1.y); // Segunda caixa largura2 = soNum(caixa2.largura); altura2 = soNum(caixa2.altura); x2 = soNum(caixa2.x); y2 = soNum(caixa2.y); debuga("ligaBoxesTipo2[a](y1:"+y1+",altura1:"+altura1+",y2:"+y2); // 2 - Pega o fonte dentro de DIV#main var fonte = $("#main").html(); // Clculo da meia altura entre os dois boxes if( y2 > y1 ){ var _altura = (y2 - y1 - altura1)/2; // 3 - Primeiro trao vertical fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",_altura,parseInt(y1+altura1),parseInt(x1+largura1/2)); // 4 - Segundo trao vertical fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",_altura,parseInt(y1+altura1+_altura),parseInt(x2+largura2/2)); } else { var _altura = (y1 - y2 - altura2)/2; // 3 - Primeiro trao vertical fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",_altura,parseInt(y2+altura2),parseInt(x2+largura2/2)); // 4 - Segundo trao vertical fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",_altura,parseInt(y2+altura2+_altura),parseInt(x1+largura1/2)); } // Linha horizontal var horizontal; var xReferencia; if( x2 > x1 ){ horizontal = x2 - x1; xReferencia = x1+largura1/2; } else { horizontal = x1 - x2; xReferencia = x2+largura2/2; } if( y2 > y1 ){ fonte += criaTraco(caixa1,caixa2,"h",stCONTRIPLO,horizontal,"1px",parseInt(y1+altura1+_altura),parseInt(xReferencia)); } else { fonte += criaTraco(caixa1,caixa2,"h",stCONTRIPLO,horizontal,"1px",parseInt(y2+altura2+_altura),parseInt(xReferencia)); } $("#main").html(fonte); return true; } function ligaBoxesTipo3(caixa1, caixa2){ // 1 - Extrai Propriedades // Primeira caixa largura1 = soNum(caixa1.largura); altura1 = soNum(caixa1.altura); x1 = soNum(caixa1.x); y1 = soNum(caixa1.y); // Segunda caixa largura2 = soNum(caixa2.largura); altura2 = soNum(caixa2.altura); x2 = soNum(caixa2.x); y2 = soNum(caixa2.y); debuga("ligaBoxesTipo3[a](y1:"+y1+",altura1:"+altura1+",y2:"+y2); // 2 - Clculo de LargFIXA var LargFIXA; if( x2 > x1 ){ LargFIXA = 40; } else { LargFIXA = Math.abs(x2-x1)+40; } // 3 -Preparao alturas // Pega o fonte dentro de DIV#main
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 10


    var fonte = $("#main").html(); // Emite o trao var _altura1 = altura1/2 + ( y2 - y1 - altura1 )/2; var _altura2 = ( y2 - y1 - altura1 )/2; //debuga("ligaBoxesTipo3("+LargFIXA+"): Larg:"+LargFIXA+",Y:"+_altura1+",X:"+parseInt(x1-LargFIXA)); // 4 - Primeira Linha horizontal fonte += criaTraco(caixa1,caixa2,"h",stCONTRIPLO,LargFIXA,"1px",parseInt(y1+altura1/2),parseInt(x1-LargFIXA)); var horizontal; var xReferencia; xReferencia = x1 - LargFIXA; if( x2 > x1 ){ horizontal = x2 - x1 + largura1/2 + LargFIXA; // xReferencia = x1 - LargFIXA; debuga("ligaBoxesTipo3[b](x2 > x1)"); if( y2 > y1 ){ // 5 - 1a. linha Vertical fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",parseInt(altura1/2+(y2-y1-altura1)/2),parseInt(y1+altura1/2), parseInt(x1-LargFIXA)); // 6 - Segunda Linha horizontal fonte += criaTraco(caixa1,caixa2,"h",stCONTRIPLO,horizontal,"1px",parseInt(y1+altura1+(y2-y1-altura1)/2),parseInt( xReferencia)); // 7 - 2a. linha Vertical fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",+_altura2,parseInt(y1+altura1+_altura2),parseInt(xReferencia +horizontal)); debuga("ligaBoxesTipo3[b1](x2 > x1 e y2 > y1)"); } else { // Y1 > y2 // 5 - 1a. linha Vertical fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",parseInt((y1-y2-altura2)/2),parseInt(y2+altura2),parseInt(x2+ largura2/2)); // 6 - Segunda Linha horizontal fonte += criaTraco(caixa1,caixa2,"h",stCONTRIPLO,horizontal,"1px",parseInt(y1+altura1+(y2-y1-altura1)/2),parseInt( xReferencia)); // 7 - 2a. linha Vertical //fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",+_altura2,parseInt(y1+altura1+_altura2),parseInt(xReferencia+horizontal)); fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",parseInt((y1-y2-altura2)/2+altura1/2),parseInt(y2+altura2+( y1-y2-altura2)/2),parseInt(x2+largura2/2 - (horizontal) )); debuga("ligaBoxesTipo3[b2](x2 > x1 e y1 > y2)"); } } else { debuga("ligaBoxesTipo3[b](x1 > x2)"); // X1 > X2 e instrues POSTERIORES horizontal = x2 - (x1-LargFIXA) + largura2/2; // xReferencia = x1 - LargFIXA; // 5 - 1a. linha Vertical fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",parseInt(altura1/2+(y2-y1-altura1)/2),parseInt(y1+altura1/2), parseInt(x1-LargFIXA)); // 6 - Segunda Linha horizontal fonte += criaTraco(caixa1,caixa2,"h",stCONTRIPLO,horizontal,"1px",parseInt(y1+altura1+(y2-y1-altura1)/2),parseInt( xReferencia)); // 7 - 2a. linha Vertical fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",+_altura2,parseInt(y1+altura1+_altura2),parseInt(xReferencia+ horizontal)); }

    $("#main").html(fonte); return true; } function ligaBoxesTipo4(caixa1, caixa2){ // 1 - Extrai Propriedades // Primeira caixa largura1 = soNum(caixa1.largura); altura1 = soNum(caixa1.altura); x1 = soNum(caixa1.x); y1 = soNum(caixa1.y); // Segunda caixa largura2 = soNum(caixa2.largura); altura2 = soNum(caixa2.altura);
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 11


    x2 = soNum(caixa2.x); y2 = soNum(caixa2.y); debuga("ligaBoxesTipo4[a](y1:"+y1+",altura1:"+altura1+",y2:"+y2); // 1 - Diferenas simples var difX = x2 - x1 ; var difXlarg = x2 - x1 - largura1; var difY = y2 - y1 ; var distanciaX = x2 - (x1+largura1); var distanciaY = y2 - (y1+altura1); var difLarg = largura2 - largura1; var difAlt = altura2 - altura1; // 2 - Diferenas levando em conta a extenso var difYe = y2 + altura2/2 - ( y1 + altura1/2); var difYeI = y1 + altura1/2 - (y2 + altura2/2); var difXe = x2 + largura2/2 - ( x1 + largura1/2); // 3 - Pega o fonte dentro de DIV#main var fonte = $("#main").html(); if( y1> y2 ){ // Linhas Horizontais fonte += criaTraco(caixa1,caixa2,"a",stCONTRIPLO,distanciaX/2,"1px",parseInt(y1+altura1/2),parseInt(x1+largura1)); fonte += criaTraco(caixa1,caixa2,"b",stCONTRIPLO,distanciaX/2,"1px",parseInt(y2+altura2/2),parseInt(x1+largura1+ distanciaX/2)); // Linha Vertical - GARANTE DUAS DIREES DE TRAO fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",difYeI,parseInt(y2+altura2/2),parseInt(x2-(x2-x1-largura1)/2) ); } else { // Linhas Horizontais fonte += criaTraco(caixa1,caixa2,"a",stCONTRIPLO,distanciaX/2,"1px",parseInt(y1+altura1/2),parseInt(x1+largura1)); fonte += criaTraco(caixa1,caixa2,"b",stCONTRIPLO,distanciaX/2,"1px",parseInt(y2+altura2/2),parseInt(x1+largura1+ distanciaX/2)); // Linha Vertical - GARANTE DUAS DIREES DE TRAO fonte += criaTraco(caixa1,caixa2,"v",stCONTRIPLO,"1px",difYe,parseInt(y1+altura1/2),parseInt(x1+largura1+distanciaX/2) ); }

    $("#main").html(fonte); return true; } /* Gerencia o evento onClick das DIVs cujo nome inicia em "bx" */ function divClick(){ alert(this.name); } function debuga(texto){ $("#erros").html($("#erros").html()+texto+"<BR>"); } function updTextBox(){ var nomeDaCaixa = $("SPAN[id=boxname]").text(); if( nomeDaCaixa.substr(0,3) == "bxp" ) { nomeDaCaixa = nomeDaCaixa.substr(0,2) + nomeDaCaixa.substr(3,99); } var nomeParag = "bxp"+nomeDaCaixa.substr(2,99); debuga("updTextBox:"+nomeDaCaixa); debuga($("#prop_text").val()); $("#"+nomeParag).html(spcToUnder($("#prop_text").val())); debuga("updTextBox (P):"+nomeParag); } function addTextBox(){ var nomeDaCaixa = $("SPAN[id=boxname]").text(); var nomeParag = "bxp"+nomeDaCaixa.substr(2,99); debuga("addTextBox:"+nomeDaCaixa); debuga($("#prop_text").val()); $("#"+nomeParag).html($("#"+nomeParag).html()+"<br>"+spcToUnder($("#prop_text").val())); debuga("addTextBox (P):"+nomeParag); } function apagaBox(){ var nomeDaCaixa = $("SPAN[id=boxname]").text();

    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 12


    if( nomeDaCaixa.substr(0,3) == "bxp" ){ var nomeParag = "bxp"+nomeDaCaixa.substr(3,99); debuga("apagaBox[a]:"+nomeDaCaixa+"."); $("#"+nomeParag).hide(); $("#"+nomeParag).removeAttr("class"); } else { if( nomeDaCaixa.substr(0,2) == "bx" ){ $("#"+nomeDaCaixa).hide(); $("#"+nomeDaCaixa).removeAttr("class"); debuga("apagaBox[b]:"+nomeParag); // Marca o status da caixa var nNomeDaCaixa = nomeDaCaixa.substr(2,99)*1; arrBox[nNomeDaCaixa].status = "Del"; } } } function soNum(texto){ texto=texto+""; var txt = texto.replace(/px/,''); // alert(txt); return parseInt(txt); } function updPropBox(param){ var nomeDaCaixa = $("SPAN[id=boxname]").text(); var numeroDaCaixa = parseInt(nomeDaCaixa.substr(2,99)); debuga("updProBox:"+nomeDaCaixa+"=>"+numeroDaCaixa); if( param == 'xyla' ) { $("#"+nomeDaCaixa).css('left',$("#prop_left").val()); $("#"+nomeDaCaixa).css('top',$("#prop_top").val()); $("#"+nomeDaCaixa).css('width',$("#prop_width").val()); $("#"+nomeDaCaixa).css('height',$("#prop_height").val()); // Armazenar somente parte numrica arrBox[numeroDaCaixa].x = soNum($("#prop_left").val()); arrBox[numeroDaCaixa].y = soNum($("#prop_top").val()); arrBox[numeroDaCaixa].largura = soNum($("#prop_width").val()); arrBox[numeroDaCaixa].altura = soNum($("#prop_height").val()); debuga("():"+arrBox[numeroDaCaixa].x+","+arrBox[numeroDaCaixa].y+","+arrBox[numeroDaCaixa].largura+","+arrBox[ numeroDaCaixa].altura); } if( param == 'cor' ) { $("#"+nomeDaCaixa).css('backgroundColor' ,$("#prop_corFundo").val()); $("#"+nomeDaCaixa).css('borderColor' ,$("#prop_corBorda" ).val()); $("#"+nomeDaCaixa).css('color',$("#prop_corLetra").val()); } } function apagaConect(){ var nomeDaCaixa = $("SPAN[id=conectname]").text(); var prefDaCaixa = nomeDaCaixa.substr(0,nomeDaCaixa.length-1); var seletor = "[id^=\""+prefDaCaixa+"\"]"; debuga("Conexo:"+nomeDaCaixa+"-"+prefDaCaixa); var indice = prefDaCaixa.substr(2,99); debuga("Indice:"+indice); arrConex[indice].status = DELETADA; indice = arrConex[indice].noConex; arrConex[indice].status = DELETADA; $(seletor).each(function(){ debuga("cnx=>"+$(this).attr("id")); $(this).hide(); $(this).removeAttr("class"); }); } function viewDebug(){ $("#console").show(); } /* Salva o Modelo */ function saveView(){
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 13


    try { var fso; fso = new ActiveXObject("Scripting.FileSystemObject"); var txtFile = fso.OpenTextFile($("#arq").val(), 2, true, 0); for(i=1;i<=BOXCOUNT;i++){ txtFile.WriteLine(arrBox[i].numero+","+arrBox[i].x+","+arrBox[i].y+","+arrBox[i].largura+","+arrBox[i].altura+","+arrBox[i ].nome+","+arrBox[i].corLetra+","+arrBox[i].corFundo+","+arrBox[i].corBorda +","+arrBox[i].status); } txtFile.WriteLine("Conexoes"); for(i=1;i<=CONEXCOUNT;i++){ txtFile.WriteLine(arrConex[i].tipoLigacao+","+arrConex[i].caixa1+","+arrConex[i].caixa2+","+arrConex[i].status); } txtFile.Close(); } catch(err) { alert("No tenho ActiveX"); $("#ta").val(""); for(i=1;i<=BOXCOUNT;i++){ $("#ta").val($("#ta").val()+arrBox[i].numero+","+arrBox[i].x+","+arrBox[i].y+","+arrBox[i].largura+","+arrBox[i].altura+ ","+arrBox[i].nome+","+arrBox[i].corLetra+","+arrBox[i].corFundo+","+arrBox[i].status+"\n"); } $("#ta").val($("#ta").val()+"Conexoes"+"\n"); for(i=1;i<=CONEXCOUNT;i++){ $("#ta").val($("#ta").val()+arrConex[i].tipoLigacao+","+arrConex[i].caixa1+","+arrConex[i].caixa2+","+arrConex[i].status+ "\n"); } } } /* Cria um objeto visual */ function criaOneBoxFromData(v_x,v_y,v_largura,v_altura,v_nome,v_corLetra,v_corFundo, v_corBorda){ x = v_x; y = v_y; largura = v_largura; altura = v_altura; var noBox = BOXCOUNT+1; if( v_nome != "" ) { var nomeBox = v_nome; } else { var nomeBox = "Box "+noBox; } arrBox[noBox] = new box(x, y, largura, altura); debuga("<b>Box:</b> bx"+noBox+"("+x+","+y+","+largura+","+altura+") criada."); arrBox[noBox].corLetra = v_corLetra; arrBox[noBox].corFundo = v_corFundo; arrBox[noBox].corBorda = v_corBorda; arrBox[noBox].nome = spcToUnder(v_nome); arrBox[noBox].numero = noBox; var o = criaDiv(arrBox[noBox],nomeBox,v_corLetra,v_corFundo,corBorda ); return o; } /* Carrega o Modelo */ function loadView(){ try { var fso; var obj; var ar; fso = new ActiveXObject("Scripting.FileSystemObject"); debuga($("#arq").val()); var txtFile = fso.OpenTextFile($("#arq").val(), 1, true); var re = new RegExp(/\w+?(?=\,|$)/gi); var linhaDados; // Parte 1 - Carregamento das Caixas while(!txtFile.AtEndOfStream){ linhaDados = txtFile.ReadLine(); debuga(linhaDados); var ar = linhaDados.match(re); debuga("Load Box: "+ar); if( ar[0] == "Conexoes" ) {
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 14


    break; } v_no = ar[0]; v_x = ar[1]; v_y = ar[2]; v_largura = ar[3]; v_altura = ar[4]; v_nome = ar[5]; v_corLetra = ar[6]; v_corFundo = ar[7]; v_corBorda = ar[8]; v_status = ar[9]; if( v_status != "Del" ) { obj = criaOneBoxFromData(v_x,v_y,v_largura,v_altura,v_nome,v_corLetra,v_corFundo,corBorda ); } } // Parte 2 - Carregamento das Conexes while(!txtFile.AtEndOfStream){ linhaDados = txtFile.ReadLine(); debuga(linhaDados); var ar = linhaDados.match(re); debuga("Load Conex: "+ar); v_tp = ar[0]; v_cx1 = ar[1]; v_cx2 = ar[2]; v_status = ar[3]; if( v_status != "Del" ) { ligaBoxesFromData(v_tp, v_cx1, v_cx2); } } txtFile.Close(); } catch(err) { alert("No tenho ActiveX"); } } // Ativa Applet function transfereParam(){ return true; } /* Ponto de PARTIDA do jQuery */ $(document).ready(function(){ // 1 - Inicializao de controles e regies init(); });

    </script> </head> <body id="bmain" name="bmain" oncontextmenu="return false;"> <div class="suspenso" name="banner" id="banner">DIAGRAMAO E CONEXO<br> <span class="suspenso menor">D o clique direito para ativar o menu de contexto</span>&nbsp;&nbsp;&nbsp;&nbsp; <span class="suspenso menor"><a class="botaoW" href="javascript: abreContextMenu();">Menu de Contexto</a></span> <span class="suspenso menor"><a class="botaoW" href="javascript: viewDebug();">Mostrar Debug</a></span> <span class="suspenso menor"><a class="botaoW" href="javascript: saveView();">Salvar Modelo</a></span> <span class="suspenso menor">Arquivo: <input id="arq" name="arq" size="30" value="C:\\Windows\\Temp\\Arq1.txt" ></span> <span class="suspenso menor"><a class="botaoW" href="javascript: loadView();">Carregar Modelo</a></span> </div> <div name="main" id="main"> </div> <div class="menu" id="menu"> <span id="ptX"></span>&nbsp;<span id="ptY"></span> <table class="menu" border=0 cellspacing=0> <header> <label class="Tit">OPES</label><a href="javascript:fechaMenu();">[x]</a> </header> <tbody> <tr> <td><table> <tr>
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 15

    <td> <form name="frm1"> <P class="zero">Box 1:<input class="botao" id="nbx1" name="nbx1"><br> Box 2:<input class="botao" id="nbx2" name="nbx2"><br> </form> <a class="botao" href="javascript:ligaBoxes();">Liga as caixas</a></P> </td> <td> <table class="Tools" border=0 cellspacing=0> <tr> <td><a class="botao" href="javascript:ligaBoxes(1);"><img border=0 src= "Unindo_DIVs_btn_Tipo01.jpg"></a></td> <td><a class="botao" href="javascript:ligaBoxes(2);"><img border=0 src= "Unindo_DIVs_btn_Tipo02.jpg"></a></td> </tr><tr> <td><a class="botao" href="javascript:ligaBoxes(3);"><img border=0 src= "Unindo_DIVs_btn_Tipo03.jpg"></a></td> <td><a class="botao" href="javascript:ligaBoxes(4);"><img border=0 src= "Unindo_DIVs_btn_Tipo04.jpg"></a></td> </tr> </table> </td></tr> </table> <P class="zero" id="boxCount"></P> </td> </tr> <tr> <td><form name="frm2"> <P class="zero">Nome Box: <input class="botao" id="box_nome" name="box_nome"><br> X:<input class="botao" id="box_x" name="box_x"><br> Y:<input class="botao" id="box_y" name="box_y"><br> Largura:<input class="botao" id="box_larg" name="box_larg" value="180"><br> Altura:<input class="botao" id="box_alt" name="box_alt" value="70"><br><br> Cor Letra:<select id="box_corLetra" name="box_corLetra"> <option style="background-color:yellow;" value="yellow">Amarelo <option style="background-color:lightyellow;" value="lightyellow">Amarelo Claro <option style="background-color:lightblue;" value="lightblue">Azul Claro <option selected style="background-color:blue;color:white;" value="blue">Azul <option style="background-color:gray;color:white;" value="gray">Cinza <option style="background-color:lightgrey;" value="lightgrey">Cinza Claro <option style="background-color:darkgray;color:white;" value="darkgray">Cinza

    Escuro
    <option style="background-color:orange;" value="orange">Laranja <option style="background-color:gold;" value="gold">Laranja Ouro <option style="background-color:black;color:white;" value="black">Preto <option style="background-color:green;" value="green">Verde <option style="background-color:lightgreen;" value="lightgreen">Verde Claro <option style="background-color:red;" value="red">Vermelho <option style="background-color:#FF8800;" value="#FF8800">Vermelho Claro </select><br> Cor Fundo:<select id="box_corFundo" name="box_corFundo"> <option style="background-color:yellow;" value="#FFFF00">Amarelo <option style="background-color:lightyellow;" value="lightyellow">Amarelo Claro <option style="background-color:lightblue;" value="lightblue">Azul Claro <option style="background-color:blue;color:white;" value="blue">Azul <option style="background-color:gray;color:white;" value="gray">Cinza <option style="background-color:lightgrey;" value="lightgrey">Cinza Claro <option style="background-color:darkgray;color:white;" value="darkgray">Cinza

    Escuro
    <option style="background-color:orange;" value="orange">Laranja <option style="background-color:gold;" value="gold">Laranja Ouro <option style="background-color:black;color:white;" value="black">Preto <option style="background-color:green;" value="green">Verde <option style="background-color:lightgreen;" value="lightgreen">Verde Claro <option style="background-color:red;" value="red">Vermelho <option style="background-color:#FF8800;" value="#FF8800">Vermelho Claro </select><br> Cor Borda:<select id="box_corBorda" name="box_corBorda"> <option style="background-color:yellow;" value="#FFFF00">Amarelo <option style="background-color:lightyellow;" value="lightyellow">Amarelo Claro <option style="background-color:lightblue;" value="lightblue">Azul Claro
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 16

    <option <option <option <option

    style="background-color:blue;color:white;" value="blue">Azul style="background-color:gray;color:white;" value="gray">Cinza style="background-color:lightgrey;" value="lightgrey">Cinza Claro style="background-color:darkgray;color:white;" value="darkgray">Cinza

    Escuro
    <option style="background-color:orange;" value="orange">Laranja <option selected style="background-color:gold;" value="gold">Laranja Ouro <option style="background-color:black;color:white;" value="black">Preto <option style="background-color:green;" value="green">Verde <option style="background-color:lightgreen;" value="lightgreen">Verde Claro <option style="background-color:red;" value="red">Vermelho <option style="background-color:#FF8800;" value="#FF8800">Vermelho Claro </select><br> <a class="botao" href="javascript:var o = criaOneBox();">Cria uma Caixa</a></P> </form> </td> </tr> </tbody> </table> </div> <div class="menu" id="propconect"> PROPRIEDADES<a href="javascript:fechaConect();">[x]</a><br> <a class="botao" href="javascript:apagaConect();">APAGA</a><br> NOME:<SPAN id="conectname"></SPAN><br> </div> <div class="menu" id="propbox"> <span class="titulo">PROPRIEDADES</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href= "javascript:fechaProp();">[x]</a><br> <a class="botao" href="javascript:apagaBox();">APAGA</a><br> <b>NOME:<SPAN id="boxtype"></SPAN>-<SPAN id="boxname"></SPAN></b><br> Esquerda:<input class="botao" id="prop_left" value=""><br> Topo:<input class="botao" id="prop_top" value=""><br> Largura:<input class="botao" id="prop_width" value=""><br> Altura:<input class="botao" id="prop_height" value=""><br> Cor Letra:<select id="prop_corLetra" name="prop_corLetra"> <option value="black">Escolha Cor <option style="background-color:yellow;" value="yellow">Amarelo <option style="background-color:lightyellow;" value="lightyellow">Amarelo Claro <option style="background-color:lightblue;" value="lightblue">Azul Claro <option style="background-color:blue;color:white;" value="blue">Azul <option style="background-color:gray;color:white;" value="gray">Cinza <option style="background-color:lightgrey;" value="lightgrey">Cinza Claro <option style="background-color:darkgray;color:white;" value="darkgray">Cinza Escuro <option style="background-color:orange;" value="orange">Laranja <option style="background-color:gold;" value="gold">Laranja Ouro <option style="background-color:black;color:white;" value="black">Preto <option style="background-color:green;" value="green">Verde <option style="background-color:lightgreen;" value="lightgreen">Verde Claro <option style="background-color:red;" value="red">Vermelho <option style="background-color:#FF8800;" value="#FF8800">Vermelho Claro </select><br> Cor Fundo:<select id="prop_corFundo" name="prop_corFundo"> <option value="black">Escolha Cor <option style="background-color:yellow;" value="#FFFF00">Amarelo <option style="background-color:lightyellow;" value="lightyellow">Amarelo Claro <option style="background-color:lightblue;" value="lightblue">Azul Claro <option style="background-color:blue;color:white;" value="blue">Azul <option style="background-color:gray;color:white;" value="gray">Cinza <option style="background-color:lightgrey;" value="lightgrey">Cinza Claro <option style="background-color:darkgray;color:white;" value="darkgray">Cinza Escuro <option style="background-color:orange;" value="orange">Laranja <option style="background-color:gold;" value="gold">Laranja Ouro <option style="background-color:black;color:white;" value="black">Preto <option style="background-color:green;" value="green">Verde <option style="background-color:lightgreen;" value="lightgreen">Verde Claro <option style="background-color:red;" value="red">Vermelho <option style="background-color:#FF8800;" value="#FF8800">Vermelho Claro </select><br> Cor Borda:<select id="prop_corBorda" name="prop_corBorda"> <option style="background-color:yellow;" value="#FFFF00">Amarelo <option style="background-color:lightyellow;" value="lightyellow">Amarelo Claro
    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Unindo_DIVs_36.htm -- Printed on 4/12/2012, 18:05:03 -- Page 17

    <option style="background-color:lightblue;" value="lightblue">Azul Claro <option style="background-color:blue;color:white;" value="blue">Azul <option style="background-color:gray;color:white;" value="gray">Cinza <option style="background-color:lightgrey;" value="lightgrey">Cinza Claro <option style="background-color:darkgray;color:white;" value="darkgray">Cinza Escuro <option style="background-color:orange;" value="orange">Laranja <option style="background-color:gold;" value="gold">Laranja Ouro <option style="background-color:black;color:white;" value="black">Preto <option style="background-color:green;" value="green">Verde <option style="background-color:lightgreen;" value="lightgreen">Verde Claro <option style="background-color:red;" value="red">Vermelho <option style="background-color:#FF8800;" value="#FF8800">Vermelho Claro </select><br> <hr> <a class="botao" href="javascript:updPropBox('xyla');">Atualiza Coordenadas</a>&nbsp; <a class="botao" href="javascript:updPropBox('cor');">Atualiza Cores</a><br> Texto:<textarea id="prop_text" cols=20 rows=5></textarea><br> <a class="botao" href="javascript:updTextBox();">Atualiza Texto</a>&nbsp; <a class="botao" href="javascript:addTextBox();">Acrescenta Texto</a><br> </div> <div class="debug" id="console">

    DEBUG&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="botaoVm" href="javascript:fechaConsole();">[x]</a><br>


    <div id="erros"></div> </div> <form id="frm1" method="post" action="grava.asp" OnSubmit="return transfereParam();"> <textarea id="ta" name="ta" cols=60 rows=5></textarea> <input type="submit" value="Envia"> </form> </body> </html>

    I:\Inetpub\wwwroot\PortalSpca\Unindo_DIVs_36.htm -- File date: 4/12/2012 -- File time: 17:11:24

    Você também pode gostar