Foros del Web » Programando para Internet » ASP Clásico »

ayuda urgente!!!

Estas en el tema de ayuda urgente!!! en el foro de ASP Clásico en Foros del Web. ayuda urgente!!! Alguien sabe donde puedo encontrar, la funcionalidad para generar un arbol, con 2 o 3 subcategorias, que lo pueda manipular desde un archivo ...
  #1 (permalink)  
Antiguo 29/06/2004, 12:20
 
Fecha de Ingreso: febrero-2004
Ubicación: D.F.
Mensajes: 201
Antigüedad: 20 años, 3 meses
Puntos: 0
ayuda urgente!!!

ayuda urgente!!!


Alguien sabe donde puedo encontrar, la funcionalidad para generar un arbol, con 2 o 3 subcategorias, que lo pueda manipular desde un archivo html, es decir, que el arbol deba estar generado con puros scripts dentro de una pagina html.. tengo uno.. pero esta hecho com puro javascript y su estension es .js, que la manera de como lo manipulo es como un archivo de inclusion. pero no puedo darle la funcionalidad que requiero..

lo que requiero es anexarle un checkbox, a cada uina de las partes del arbol que me despliega.. que al momento de seleccionar una opcion del check box me dispare un evento, ya lo intente dentro del ejemplo que tengo (dentro del codigo del archivo arbol.js)

alguien sabe como puedo solucionarlo..

gracias
  #2 (permalink)  
Antiguo 29/06/2004, 12:32
Avatar de Atonovich  
Fecha de Ingreso: diciembre-2002
Ubicación: ...
Mensajes: 117
Antigüedad: 21 años, 6 meses
Puntos: 0
Esto te servira.
<!-- página inicial -->
<html>
<head>
<title>Pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="cooltree.css" rel="stylesheet" type="text/css">

<script language="JavaScript" src="cooltree.js"></script>
<script language="JavaScript" src="tree1_format.js"></script>

</head>
<script language="JavaScript">
var TREE1_NODES = [
['ITEM1', null, null,
['</a>'
+ '<table width=350 cellpadding="0" cellspacing="0">'
+'<tr><td ><a href="link.asp" style="font-family:tahoma; font-size:10px; color:#FF9001;">Link1 </a><br>'
+ '</td></tr></table><a>', null, null]
],

Código HTML:
['ITEM2', null, null,
			['</a>'
				+ '<table width=350 cellpadding="0" cellspacing="0">'
				+'<tr><td ><a href="link2.asp" style="font-family:tahoma; font-size:10px; color:#FF9001;">Link2</a><br>'
				+'</td></tr>'
				+ '</table><a>', null, null]
			],
];


</script>

<script language="JavaScript">
var tree = new COOLjsTree ("tree1", TREE1_NODES, TREE1_FORMAT);
/*tree.expandNode(0);
/tree.expandNode(1);
tree.expandNode(2);
tree.expandNode(3);*/
</script>
</body>
</html>


Los archivos que necesitaras son:

cooltree.css
cooltree.js
tree1_format.js

COOLTREE.CSS__________
body { font-family: tahoma;
font-size: 12px;
padding: 10px 10px 10px 480px;
}

p {text-align: justify;
}

h1 {
font-size: 130%;
font-family: arial;
}
pre {font-size: 10pt;
padding: 10px;
background-color: #F8F8F8;
border: 1px solid #F0F0F0;
}

.clsNode, .clsNodeUnhilightable {
font-family: tahoma; font-size: 11pt; text-decoration: none; cursor: hand; color: black}

.clsNode:hover { text-decoration: none; color: #eeeeee; background-color: #003366 }

.clsNodeGroup { font-family: tahoma; text-decoration: none; font-size: 8pt; color: navy; font-weight: bold; }
.clsNodeGroup:hover { text-decoration: none; color: white; background-color: navy }

.form { border: 1px solid silver; }
.form td { font-family: tahoma; font-size: 8pt; }
.form td input, .form td textarea { border: 1px solid silver; background-color: #F0F0F0; font-family: tahoma; font-size: 8pt; }
.form td select { background-color: #F0F0F0; font-family: tahoma; font-size: 8pt; }

.form td input.chk { border: none; background-color: transparent; }

.array td { border: 1px solid black; }
.text td { padding: 15px; border: 1px solid black; background-color: #D6D6C0 }
.text td, .text td p, .text td h2 {
font-size : 12px;
font-family : Comic Sans MS, Tahoma, Verdana, Arial, Helvetica;
text-align: justify;
}


CONTINUA....
__________________
" El hombre es una invención de Dios o Dios es una invención del hombre..."
  #3 (permalink)  
Antiguo 29/06/2004, 12:33
Avatar de Atonovich  
Fecha de Ingreso: diciembre-2002
Ubicación: ...
Mensajes: 117
Antigüedad: 21 años, 6 meses
Puntos: 0
cooltree.js_________________________


window.NTrees=[];
function bw_check(){var is_major=parseInt(navigator.appVersion);this.nver= is_major;this.ver=navigator.appVersion;this.agent= navigator.userAgent;this.dom=document.getElementBy Id?1:0;this.opera=window.opera?1:0;this.ie5=(this. ver.indexOf("MSIE 5")>-1&&this.dom&&!this.opera)?1:0;this.ie6=(this.ver.i ndexOf("MSIE 6")>-1&&this.dom&&!this.opera)?1:0;this.ie4=(document.a ll&&!this.dom&&!this.opera)?1:0;this.ie=this.ie4|| this.ie5||this.ie6;this.mac=this.agent.indexOf("Ma c")>-1;this.ns6=(this.dom&&parseInt(this.ver)>=5)?1:0;t his.ie3=(this.ver.indexOf("MSIE")&&(is_major<4));t his.hotjava=(this.agent.toLowerCase().indexOf('hot java')!=-1)?1:0;this.ns4=(document.layers&&!this.dom&&!this .hotjava)?1:0;this.bw=(this.ie6||this.ie5||this.ie 4||this.ns4||this.ns6||this.opera);this.ver3=(this .hotjava||this.ie3);this.opera7=((this.agent.toLow erCase().indexOf('opera 7')>-1) || (this.agent.toLowerCase().indexOf('opera/7')>-1));this.operaOld=this.opera&&!this.opera7;return this;};
function pldImg(arg){for(var i in arg){var im=new Image();im.src=arg[i];}}
function CTreeFormat(fmt, tree){
this.init=function(fmt, tree){this.left=fmt[0];this.top=fmt[1];this.showB=fmt[2];this.clB=fmt[3][0];this.exB=fmt[3][1];this.iE=fmt[3][2];this.Bw=fmt[4][0];this.Bh=fmt[4][1];this.Ew=fmt[4][2];this.showF=fmt[5];this.clF=fmt[6][0];this.exF=fmt[6][1];this.iF=fmt[6][2];this.Fw=fmt[7][0];this.Fh=fmt[7][1];this.ident=fmt[8];this.back=new CTreeBack(this.left, this.top, fmt[9], 'cls'+tree.name+'_back');this.nst=fmt[10];this.nstl=fmt[11];this.so=fmt[12];this.pg=fmt[13][0];this.sp=fmt[13][1];
if (this.showB)pldImg([this.clB,this.exB,this.iE]);
if (this.showF)pldImg([this.exF,this.clF,this.iF]);
}
this.nstyle=function(lvl){return(und(this.nstl[lvl])) ? this.nst : this.nstl[lvl];}
this.idn=function(lvl){var r=(und(this.ident[lvl])) ? this.ident[0]*lvl : this.ident[lvl];return r;}
this.init(fmt, tree);
}
function COOLjsTree(name, nodes, format){
this.REGISTERED=true;this.bw=new bw_check();this.ns4=this.bw.ns4;
this.name=name;this.fmt=new CTreeFormat(format, this);if (und(window.NTrees)) window.NTrees=[];window.NTrees[this.name]=this;this.Nodes=[];
this.rootNode=new CTreeNode(null, "", "", "", null);
this.rootNode.treeView=this;this.selectedNode=null ;this.maxWidth=0;this.maxHeight=0;this.ondraw=null ;
this.nbn=function(nm){for (var i=0;i<this.Nodes.length;i++) if (this.Nodes[i].text == nm) return this.Nodes[i];return null;};this.nodeByName=this.nbn;
this.nodeByID=function(id){for (var i=0;i<this.Nodes.length;i++) if (this.Nodes[i].nodeID==id) return this.Nodes[i];return null;}
this.nodeByURL=function(u){for(var i=0;i<this.Nodes.length;i++) if (this.Nodes[i].url==u) return this.Nodes[i];return null;};
this.moveTo=function(x,y){this.fmt.back.top=y;this .fmt.back.left=y;this.fmt.back.moveTo(x,y);this.fm t.top=y;this.fmt.left=x;}
this.addNode=function(node){
var parentNode=node.parentNode;
this.Nodes[this.Nodes.length]=node;
node.index=this.Nodes.length-1;
if (parentNode == null)
this.rootNode.children[this.rootNode.children.length]=node;
else
parentNode.children[parentNode.children.length]=node;
return node;
}
this.rebuildTree=function(){
for (var i=0;i < this.Nodes.length;i++) document.write(this.Nodes[i].init());
for (var i=0;i < this.Nodes.length;i++){
var node=this.Nodes[i];
node.el=this.ns4?document.layers[node.id()+"d"]:this.bw.dom?document.getElementById(node.id()+"d" ):document.all[node.id()+"d"];
}
}
this.getImgEl=function(node){
if (this.ns4) {
if (this.fmt.showF&&!node.nf)node.nf=node.el.document .images[node.id()+"nf"];
if (this.fmt.showB&&!node.nb)node.nb=node.el.document .images[node.id()+"nb"];
} else {
if (this.fmt.showB&&!node.nb)node.nb=this.bw.dom? document.getElementById(node.id()+"nb"):document.a ll[node.id()+"nb"];
if (this.fmt.showF&&!node.nf)node.nf=this.bw.dom? document.getElementById(node.id()+"nf"):document.a ll[node.id()+"nf"];
}
}
this.draw=function(){
this.currTop=this.fmt.top;
this.maxHeight =0;this.maxWidth=0;
for (var i=0;i < this.rootNode.children.length;i++) this.rootNode.children[i].draw(true);
this.fmt.back.resize(this.maxWidth-this.fmt.left, this.maxHeight-this.fmt.top);
if (this.ondraw!=null) this.ondraw();
}
this.updateImages=function(node, ff){
this.getImgEl(node);
var b = this.fmt[node.expanded? "exB" : "clB"];
var f = this.fmt[node.hasChildren()?(node.expanded?"exF":"clF"):"iF "];
if (node.treeView.fmt.showB && node.nb && node.nb.src!=b) node.nb.src=b;
if (node.treeView.fmt.showF && node.nf && node.nf.src!=f) node.nf.src=f;
}
this.expandNode=function(index){
var node=this.Nodes[index];
var pNode=node.parentNode ? node.parentNode : null;
if (!und(node) && node.hasChildren()){
node.expanded=!node.expanded;
this.updateImages(node);
if (!node.expanded)
node.hideChildren();
else
if (this.fmt.so)
for (var i=0;i < this.Nodes.length;i++){
this.Nodes[i].show(false);
if(this.Nodes[i] != node && this.Nodes[i].parentNode == pNode) {
this.Nodes[i].expanded=false;
this.updateImages(this.Nodes[i]);
}
}
this.draw();
}
}
this.selectNode=function(index){
var node=this.Nodes[index];
if(!und(node)) this.selectedNode=node;
node.draw();
}
this.readNodes=function(nodes){
var ind=0;var par=null;
function readOne(arr , tree){
if (und(arr)) return;
var i=0;var nodeID=0;
if (arr[0]&&arr[0].id) {nodeID=arr[0].id;i++};
var node=tree.addNode(new CTreeNode(tree, par, arr[i], url=arr[i+1] == null? "": arr[i+1], arr[i+2] == null? "": arr[i+2]));
node.nodeID=nodeID;
while (!und(arr[i+3])){
par=node;
readOne(arr[i+3], tree);
i++;
}
}
if (und(nodes) || und(nodes[0]) || und(nodes[0][0])) return;
for (var i=0;i<nodes.length;i++){
par=null;readOne(nodes[i], this);
}
}
this.collapseAll=function(rd){
for (var i=0;i < this.Nodes.length;i++){
if (this.Nodes[i].parentNode != this.rootNode) this.Nodes[i].show(false);
this.Nodes[i].expanded=false;
this.updateImages(this.Nodes[i]);
}
if (rd) this.draw();
}
this.expandAll=function(rd){
for (var i=0;i < this.Nodes.length;i++){
this.Nodes[i].expanded=true;
this.updateImages(this.Nodes[i]);
}
if (rd) this.draw();
}
this.init=function(){
this.readNodes(nodes);
this.rebuildTree();
this.draw();
}
this.init();
return this;
}

function CTreeNode(treeView, parentNode , text, url, target){
this.index=-1;this.treeView=treeView;this.parentNode=parentNod e;
this.text=text;this.url=url;this.target=target;thi s.expanded=false;
this.children=[];
this.level=function(){
var node=this;var i=0;
while (node.parentNode != null){i++;node=node.parentNode;}
return i;
}
this.hasChildren=function(){return this.children.length > 0;}
this.init=function(){
var bw = this.treeView.bw;
return this.treeView.ns4?
'<layer id="'+this.id()+'d" z-index="'+this.index+10+'" visibility="hidden">'+this.getContent()+'</layer>'
:'<div id="'+this.id()+'d" style="position:absolute;visibility:hidden;'+(bw.o pera&&(bw.nver!=6)||bw.ie4?'width:1px':'')+';z-index:'+this.index+10+';">'+this.getContent()+'</div>';
}
this.getH=function(){
var bw = this.treeView.bw;
this.css=bw.dom||bw.ie4?this.el.style:this.el;this .doc=bw.dom||bw.ie4?document:this.css.document;
this.h=this.el.offsetHeight||this.css.clip.height| |this.doc.height||this.css.pixelHeight;
return this.h;
}

this.getH1=function(){if(!this.h)this.h=this.treeV iew.ns4 ? this.el.clip.height:this.treeView.bw.dom&&!this.tr eeView.bw.operaOld? this.el.firstChild.offsetHeight:this.el.offsetHeig ht;return this.h}
this.getW=function(){if(!this.w)this.w=this.treeVi ew.ns4 ? this.el.clip.width:this.treeView.bw.dom&&!this.tre eView.bw.operaOld? this.el.firstChild.offsetWidth:this.el.offsetWidth ;return this.w}
this.id=function(){return 'nt'+this.treeView.name+this.index;}
this.getContent=function(){
function itemSquare(node){
var img=node.treeView.fmt[node.hasChildren()?(node.expanded?"exF":"clF"):"iF "];
var w=node.treeView.fmt.Fw;var h=node.treeView.fmt.Fh;
var img = "<img id=\""+node.id()+"nf\" name=\""+node.id()+"nf\" src=\"" + img + "\" width="+w+" height="+h+" border=0>"
img = node.hasChildren()?'<a href="javascript:CTExpand(\''+node.treeView.name+' \','+node.index+')">'+img+'</a>':img;
return "<td valign=\"middle\" width=\""+w+"\">"+img+"</td>\n";
}


CONTINUA....
__________________
" El hombre es una invención de Dios o Dios es una invención del hombre..."
  #4 (permalink)  
Antiguo 29/06/2004, 12:34
Avatar de Atonovich  
Fecha de Ingreso: diciembre-2002
Ubicación: ...
Mensajes: 117
Antigüedad: 21 años, 6 meses
Puntos: 0
CONTINUA COOLTREE.JS______

function buttonSquare(node){
var img=node.treeView.fmt[node.expanded? "exB" : "clB"];
var w=node.treeView.fmt.Bw;var h=node.treeView.fmt.Bh;
return '<td valign=\"middle\" width="'+w+'"><a href="javascript:CTExpand(\''+node.treeView.name+' \','+node.index+')"><img name=\''+node.id()+'nb\' id=\''+node.id()+'nb\' src="' + img + '" width="'+w+'" height="'+h+'" border=0></a></td>\n';
}
function blankSquare(node, ww){
var img=node.treeView.fmt.iE;
return "<td width=\""+ww+"\"><img src=\"" + img + "\" width="+ww+" height=1 border=0></td>\n"
}
var s='';
var ll=this.level();
s += '<table cellpadding='+this.treeView.fmt.pg+' cellspacing='+this.treeView.fmt.sp+' border=0 class="cls'+this.treeView.name+'_back'+ll+'"><tr>' ;
var idn=this.treeView.fmt.idn(ll);
if (idn > 0) s += blankSquare(this, idn);
if(this.treeView.fmt.showB) s += this.hasChildren() ? buttonSquare(this) : blankSquare(this, this.treeView.fmt.Ew);
if(this.treeView.fmt.showF) s += itemSquare(this);
var n = this.treeView.name;
if(this.url == "")
s += this.hasChildren()? '<td nowrap=\"1\"><a class="'+this.treeView.fmt.nstyle(ll)+'" href="javascript:CTExpand(\''+n+'\','+this.index+' )">'+this.text+'</a></td></tr></table>' : '<td nowrap=\"1\"><a class="'+this.treeView.fmt.nstyle(ll)+'" href="javascript:void(0)">'+this.text+'</a></td></tr></table>';
else
s += '<td nowrap=\"1\"><a class="'+this.treeView.fmt.nstyle(ll)+'" href="'+this.url+'" target="'+this.target+'" onclick="CTExpand(\''+n+'\','+this.index+')">'+thi s.text+'</a></td></tr></table>';
return s;
}
this.moveTo=function(x, y){if (this.treeView.ns4)this.el.moveTo(x,y);else{this.e l.style.left=x;this.el.style.top=y;}}
this.show=function(sh){if (this.visible == sh)return;this.visible=sh;var vis=this.treeView.ns4 ? (sh ? 'show': 'hide') : (sh ? 'visible': 'hidden');if (this.treeView.ns4)this.el.visibility=vis;else this.el.style.visibility=vis;}
this.hideChildren=function(){this.show(false);for (var i=0;i < this.children.length;i++)this.children[i].hideChildren();}
this.draw=function(){var ll=this.treeView.fmt.left;this.moveTo(this.treeVie w.fmt.left, this.treeView.currTop);this.show(true);var w = this.getW();if (ll+ w> this.treeView.maxWidth)this.treeView.maxWidth=ll+w ;this.treeView.currTop += this.getH();if (this.treeView.currTop > this.treeView.maxHeight)this.treeView.maxHeight=th is.treeView.currTop;if (this.expanded && this.hasChildren())for (var i=0;i < this.children.length;i++)this.children[i].draw();}
}
function CTreeBack(aleft, atop, color, name){
this.bw=new bw_check();this.ns4=this.bw.ns4;this.left=aleft;th is.top=atop;this.name=name;this.color=color;this.t =unescape('');
this.moveTo=function(x, y){if (this.ns4)this.el.moveTo(x,y);else{this.el.style.l eft=x;this.el.style.top=y;this.el2.style.left=x;}} ;
this.resize=function(w,h){if (this.ns4){this.el.resizeTo(w,h);}else{this.el.sty le.width=w;this.el.style.height=h;if (this.r) this.el2.style.top=h+this.top-5;}};
this.init=function(){if (this.r)if (!this.ns4) {var bgc=this.color == ""? "" : " background-color:"+this.color+";";document.write('<div id="'+this.name+'c" style="'+bgc+'position:absolute;z-index:0;top:'+this.top+'px;left:'+this.left+'px;"> '+'&nbsp;<span style="font-size:7px;color:#d0d0d0;">'+this.t+'</span>'+'</div>');this.el2=document.all? document.all[this.name+'c'] : document.getElementById(this.name+'c');}if(this.ns 4){var bgc=this.color == ""? "" : ' bgcolor="'+this.color+'" ';document.write('<layer '+bgc+' top="'+this.top+'" left="'+this.left+'" id="'+this.name+'" z-index="0">'+ '</layer>');this.el=document.layers[this.name];} else {var bgc=this.color == ""? "" : " background-color:"+this.color+";";document.write('<div id="'+this.name+'" style="'+bgc+'position:absolute;z-index:0;top:'+this.top+'px;left:'+this.left+'px">' + '</div>');this.el=document.all? document.all[this.name] : document.getElementById(this.name);}};this.r=1;
this.init();
}
function und(val){return typeof(val) == 'undefined';}
window.oldCTOnLoad=window.onload;
function CTOnLoad(){
var bw=new bw_check();
if (bw.operaOld)window.operaResizeTimer=setTimeout('r esizeHandler()',1000);
if (typeof(window.oldCTOnLoad)=='function') window.oldCTOnLoad();
if (bw.ns4) window.onresize=resizeHandler;
}
window.onload=new CTOnLoad();
function resizeHandler() {
if (window.reloading) return;
if (!window.origWidth){
window.origWidth=window.innerWidth;
window.origHeight=window.innerHeight;
}
var reload=window.innerWidth != window.origWidth || window.innerHeight != window.origHeight;
window.origWidth=window.innerWidth;window.origHeig ht=window.innerHeight;
if (window.operaResizeTimer)clearTimeout(window.opera ResizeTimer);
if (reload) {window.reloading=1;document.location.reload();ret urn};
if (new bw_check().operaOld){window.operaResizeTimer=setTi meout('resizeHandler()',500)};
}
function CTExpand(name, index){window.NTrees[name].expandNode(index)}

TERMINA COOLTREE.JS _____________
__________________
" El hombre es una invención de Dios o Dios es una invención del hombre..."
  #5 (permalink)  
Antiguo 29/06/2004, 12:35
Avatar de Atonovich  
Fecha de Ingreso: diciembre-2002
Ubicación: ...
Mensajes: 117
Antigüedad: 21 años, 6 meses
Puntos: 0
tree1_format.js__________________

var TREE1_FORMAT =
[
//0. left position
210,
//1. top position
215,
//2. show +/- buttons
true,
//3. couple of button images (collapsed/expanded/blank)
["img/c.gif", "img/e.gif", "img/b.gif"],
//4. size of images (width, height,ident for nodes w/o children)
[16,16,0],
//5. show folder image
false,
//6. folder images (closed/opened/document)
[],
//7. size of images (width, height)
[16,16],
//8. identation for each level [0/*first level*/, 16/*second*/, 32/*third*/,...]
[0,16,32,48,64,80,96,112,128,144,160,176,192,208,22 4,240,256,272],
//9. tree background color ("" - transparent)
"",
//10. default style for all nodes
"clsNode",
//11. styles for each level of menu (default style will be used for undefined levels)
[],
//12. true if only one branch can be opened at same time
false,
//13. item pagging and spacing
[2,4],
];


SALUDOS!!!
__________________
" El hombre es una invención de Dios o Dios es una invención del hombre..."
  #6 (permalink)  
Antiguo 29/06/2004, 14:22
 
Fecha de Ingreso: febrero-2004
Ubicación: D.F.
Mensajes: 201
Antigüedad: 20 años, 3 meses
Puntos: 0
Algo anda mal.. porque no funciona

te agradezco tu ayuda.. deja seguir checandola ok
  #7 (permalink)  
Antiguo 29/06/2004, 23:00
Avatar de Atonovich  
Fecha de Ingreso: diciembre-2002
Ubicación: ...
Mensajes: 117
Antigüedad: 21 años, 6 meses
Puntos: 0
Dame tu correo, mejor te mando el fuente por email
__________________
" El hombre es una invención de Dios o Dios es una invención del hombre..."
  #8 (permalink)  
Antiguo 30/06/2004, 19:28
 
Fecha de Ingreso: febrero-2004
Ubicación: D.F.
Mensajes: 201
Antigüedad: 20 años, 3 meses
Puntos: 0
[email protected]


saludos
  #9 (permalink)  
Antiguo 18/08/2006, 20:59
 
Fecha de Ingreso: junio-2004
Mensajes: 20
Antigüedad: 20 años
Puntos: 0
Hola

He visto en una página ese mismo codigo modificado, al que le añaden un script, que permite que cuando entras a la pagina, el arbol aparezca abierto en la rama del arbol correspondiente a esa pagina.

Me explico:

Si mediante un buscador entras en la pagina www.midominio.com/articulos/articulo1.html

El arbol aparece automaticamnte abierto de la siguiente manera

Articulos
Articulo1

El problema que me surge a mi es que ese script esta hecho para la version demo, yo he conseguido la version pro y no se como adaptarlo.

Alguien me podria echar una mano?

Paso por privado los archivos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:58.