Comunidad de diseño web y desarrollo en internet online

ToolTip en componente Tree!!!

Citar            
MensajeEscrito el 13 Ene 2006 11:58 pm
Un saludo!!

Necesito Ponerle Tooltips a un componente Tree; ya que alguno de los textos listados son muy largos, alguien me podria decir como puedo hacerlo...

Gracias!!

Por wasserfrauen

28 de clabLevel



 

Venezuela

firefox
Citar            
MensajeEscrito el 15 Ene 2006 05:48 pm
Puedes poner el código con el que le agregas elementos a tu Tree?

Por Naujfract

124 de clabLevel



 

Bogotá Colombia

firefox
Citar            
MensajeEscrito el 15 Ene 2006 08:04 pm
xmlTree = new XML();
xmlTree.ignoreWhite = true;
xmlTree.onLoad = function(success) {
if (success) {
llenarTree();
} else {
trace("No se pudo cargar el XML");
}
};
xmlTree.load("glosarioCont.xml");


este es el codigo que utilice!!!

Por wasserfrauen

28 de clabLevel



 

Venezuela

firefox
Citar            
MensajeEscrito el 16 Ene 2006 05:23 am
Puedes colocar también la funcion que usas llenarTree por favor?

Por Naujfract

124 de clabLevel



 

Bogotá Colombia

firefox
Citar            
MensajeEscrito el 16 Ene 2006 02:01 pm

Por wasserfrauen

28 de clabLevel



 

Venezuela

firefox
Citar            
MensajeEscrito el 17 Ene 2006 05:28 am
oye, mira si esto
te puede servir para lo que necesitas :)

Por Naujfract

124 de clabLevel



 

Bogotá Colombia

firefox
Citar            
MensajeEscrito el 18 Abr 2007 04:04 am
Tengo el mismo problema que vos y los resolvi de la siguiente manera

1) Al arbol le agrege dos EventListener
* itemRollOver que se activa cuando el mouse pasa por encima de un item del TREE
* itemRollOut que se activa cuando el mouse sale un item del TREE

En itemRollOver hago que aparesca el tooltip, si le asigno el texto

Código :

/* evento on mouse over de los nodos*/
var nodeListener:Object = new Object();

/* evento de cambio en el arbol*/
nodeListener.itemRollOver = function(evt:Object) 
{
   var indiceOver = evt.index;    
   var textoNodo:String = verArbol(treeDP_xml, indiceOver);

   if (textoNodo != undefined) {
        myTip.html = true;
       myTip.text = textoNodo;
            
   // show tip, interval, should follow mouse
   myTip.show(500, true);
   }
}
my_tree.addEventListener("itemRollOver", nodeListener);

Aclaremos un poco como funciona. Cuando se detecte en evento, en la variable evt.index voy a tener la posicion del elemento sobre el que estoy parado en el TREE, pero no el nodo :shock: :shock: :shock:

Lo que ocurre que si tu arbol tiene ramas(carpetas), te da la posicion como si fuera una LIST
ej:

Código :

0  root
1    |---CD
2    |---DVD
3    |      |---------Regrablable
4    |      |---------Dual Layer
5    |      |---------MOVIES
6    |---MP3
7    |---Impresoras
8    |--Notebook


si me paro sobre Dual Layer la variable evt.index tiene 4
y si trato de recuperar el texto usando

Código :

treeDP_xml.getTreeNodeAt( evt.index ) 

lo que obtengo es como texto es Impresoras en ves de Dual Layer

Para solucionar este inconveniente esta la funcion verArbol(treeDP_xml, indiceOver);
que va a buscar en todo el arbol hasta encontrar el nodo buscado

Código :

/*******************************************************/
/* 
* @miArbol: Arbol XML que contiene los datos de los productos
* @indiceOver : indice del Tree que indica sobre que elemento estor parado(over)
* @return : regrese en texto del sobre sobre el que esta el mouse actualmente
*
*/
function verArbol(miArbol:XML, indiceOver)
{
    var textoNodo1,textoNodo2:String;
    
    //nodos de categorias o carpetas
    var aNode:XMLNode;    
    
    //nodos de productos o hojas
    var aNodeHijo:XMLNode;

    //flag que indica que es elemento buscado es una  categoria
    var encontradoEnCategoria:Boolean = false;

    //flag que indica que es elemento buscado es un producto
    var encontradoEnProductos:Boolean = false;
   
   //recorremos el XML
   if (miArbol.firstChild.hasChildNodes() )  //obtengo el primer elemento
   {
      // use to iterate through the child nodes of rootNode
      var actual:Number = 0;
      //recorroria las categorias
      for (aNode:XMLNode = miArbol.firstChild.firstChild; aNode != null; aNode=aNode.nextSibling)
      {
         //si encuentro el  nodo 
         if (indiceOver == actual)
         {
            //recupero el texto
            textoNodo1 = aNode.attributes.label;
            //marco donde lo encontre
            encontradoEnCategoria = true;
            //y salgo de la busqueda
            break;
         }
         //incremento actual
         actual += 1;               
         
         //si en una carpeta
         if (my_tree.getIsBranch( aNode ))
         {
            //si esta abierta cuento todos los hijos e incremento el actual
            if(my_tree.getIsOpen( aNode ))
            {
               for (aNodeHijo:XMLNode = aNode.firstChild; aNodeHijo != null; aNodeHijo=aNodeHijo.nextSibling)
               {
               //si encuentro el  nodo 
                  if (indiceOver == actual)
                  {
                     //recupero el texto
                     textoNodo2 = aNodeHijo.attributes.label;
                     //marco donde lo encontre
                     encontradoEnProductos = true;
                     //y corto el ciclo
                     break;
                  }//end if
                  //incremento actual
                  actual += 1;               
               }//end for
            }//end if
         }//end if            
      }//end for
   }//end if 

   if(encontradoEnProductos)
      textoNodo = textoNodo2;
   else
      textoNodo = textoNodo1;
   
return textoNodo;
}//end function 


Cuando encuentra el nodo en la variable textoNodo tengo en texto, la funcion lo regresa y listo
:wink: ^^ ^^ ^^

Esta funcion solo busca en dos nivel, si la quisieras hacer para mas niveles , hay que hacerla RECURSIVA


Por último esta itemRollOut que es la encargado de que desaparesca el tooltip
itemRollOut hago que desaparesca

Código :

/* evento on mouse out de los nodos*/
var nodeListener:Object = new Object();

/* evento de cambio en el arbol*/
nodeListener.itemRollOut = function(evt:Object) {
   myTip.hide(50);
}
my_tree.addEventListener("itemRollOut", nodeListener);


2) para terminar myTip puede ser cualquier movieClip, yo en particular use el it.sephiroth.tooltip que lo consegis gratuitamente de http://www.sephiroth.it/download.php
espero que sirva[/url] :wink:

Por dugalman

7 de clabLevel



Genero:Masculino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.