vinculación/desvinculación objeto jQuery a un elemento

estoy usando un flowplayer jQuery herramientas de complementos http://flowplayer.org/tools/tooltip.html vinculación/desvinculación objeto jQuery a un elemento

1) Quiero una información sobre herramientas que se crea cuando el usuario hace clic en un elemento.

2) cuando el usuario hace clic en otro elemento, la antigua información de herramientas deben ser disociados (suprimido)

3) Una nueva información de herramienta debe ser creado (o viejo trasladó a) para el elemento hecho clic

4) Entonces, debería < = 1 información sobre herramientas en la página

¿Puede ayudarme?

Aquí está el código, se ejecuta independiente

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html><head> 
    <title>jQuery tooltip</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script> 

    <script type="text/javascript"> 


/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/ 
    $(document).ready(function() { 
     $("#_2").tooltip({ 
      effect: "slide", 
      tip: '.tooltip' , 
      position: 'bottom center' 
     }); 

    }); 
/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/ 




/** The code below is not working as I expect, it doesn't MOVE tooltip **/ 

      var old_id; 

    //first time - create tooltip 
     function my_create(id){ 
      $("#"+id).tooltip({ 
       effect: "slide", 
       tip: '.tooltip', 
       position: 'bottom center' 
      });  
     } 

    //next times - move tooltip to other element 
     function my_unlink(id){ 
      $("#"+id).unbind("mouseover"); 
      //todo 
     } 

     function my_link(id){ 
      //todo 
     } 


     //THE MAIN FUNCTION 

     function do_tip(new_id){ 
      if(old_id){ 
       my_unlink(old_id); 
       my_link(new_id); 
       alert(new_id); 
      } 
      else 
       my_create(new_id); 

      old_id=new_id; 
     //new_id.focus(); 
    } 

    </script> 

    <style> 
    .tooltip { 
     display: none; 
     background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png); 
     font-size:14px; 
     height:70px; 
     width:160px; 
     padding:25px; 
     color:#fff; 
    } 
    h1 { 
     width: 400px; 
     text-align: center; 
     background-color: yellow; 
    } 

    </style> 
</head> 
<body> 

    <h1 onclick="do_tip(this.id)" id="_1">John</h1> 
    <h1 onclick="do_tip(this.id)" id="_2">Mary</h1> 
    <h1 onclick="do_tip(this.id)" id="_3">Dan</h1> 
    <h1 onclick="do_tip(this.id)" id="_4">Paul</h1> 
    <h1 onclick="do_tip(this.id)" id="_5">Kim</h1> 

    <div class="tooltip">There should be only one tooltip on a page!</div> 

</body></html>

Fuente

2010-01-23 Dan

¿La llamada a la información sobre herramientas() devuelve nada? ¿Hay algún objeto que represente tooptip que pueda tener un método de eliminación o eliminación? – ironfroggy

1) call to tooltip() devuelve el objeto jquery y también puede devolver la API específica de la biblioteca. 2) No, no hay delete() destructor en la biblioteca = ( – Dan

jQuery tools tooltip admite la definición de los eventos que activan la información sobre herramientas.

No necesita manejar el evento click por su cuenta.

Editar: Actualizado el guión. Haga clic en el enlace para mover la información sobre herramientas al segundo elemento siempre.

Aquí es el script

var tt = $("h1").tooltip({ 
    events:{def:'click, click'}, 
    effect: "slide", 
    tip: '.tooltip' , 
    position: "bottom center", 
    api: true, 
    delay: 30000 
}); 

$("#ht").click(function() { 
    tt.hide(); 
    $("#_2").tooltip().show(); 
});

El guión entero

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script> 

<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
</style> 
<style> 
    .tooltip { 
     display: none; 
     background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png); 
     font-size:14px; 
     height:70px; 
     width:160px; 
     padding:25px; 
     color:#fff; 
    } 
    h1 { 
     width: 400px; 
     text-align: center; 
     background-color: yellow; 
     cursor:pointer; 
    } 

</style> 

</head> 
<body> 

    <h1 id="_1">John</h1> 
    <h1 id="_2">Mary</h1> 
    <h1 id="_3">Dan</h1> 
    <h1 id="_4">Paul</h1> 
    <h1 id="_5">Kim</h1> 

    <a id="ht" href="javascript:void()">Click here</a> 
    <div class="tooltip">There should be only one tooltip on a page!</div> 

</body> 
</html> 

<script> 

var tt = $("h1").tooltip({ 
    events:{def:'click, click'}, 
    effect: "toggle", 
    tip: '.tooltip' , 
    position: "bottom center", 
    api: true, 
    delay: 30000 
}); 

$("#ht").click(function() { 
    tt.hide(); 
    setTimeout(function(){$("#_2").tooltip().show();}, 500); 
}); 

</script>

Fuente

2010-01-28 22:51:00

¡Gracias, trabajando! En su exaple - es posible eliminar un evento de clic y en su lugar desencadenar la información sobre herramientas proramáticamente para una identificación específica como esta: función hover_tooltip (id) {/ * todo * /} // PD: Me falta <= 1 información sobre herramientas la página – Dan

¿Desea que un elemento con Id. específico muestre la información sobre herramientas cuando se coloca sobre ella o la activa bajo alguna otra condición programáticamente? ¿Cuándo se llamará a hover_tooltip (id)? –

Me refiero a pasar el ratón sobre alguna acción del programa. Por ejemplo, estos tooltips pueden funcionar muy bien en la validación de formularios. – Dan

El FlowPlayer Información sobre la herramienta tiene una API que se devuelve en cada llamada a tooltip.

A continuación, puede llamar al hide en el objeto API.

Esto es lo que el código debe ser similar:

var old_id, API; 

//first time - create tooltip 
    function my_create(id){ 
     API = $("#"+id).tooltip({ 
      effect: "slide", 
      tip: '.tooltip', 
      position: 'bottom center' 
     });  
    } 

//next times - move tooltip to other element 
    function my_unlink(id){ 
     API.unbind("mouseover"); 
     //todo 
    } 

    function my_link(id){ 
     my_create(id); 
    } 


    //THE MAIN FUNCTION 

    function do_tip(new_id){ 
     if(old_id){ 
      my_unlink(old_id); 
      my_link(new_id); 
      alert(new_id); 
     } 
     else 
      my_create(new_id); 

     old_id=new_id; 
    //new_id.focus(); 
}

Fuente

2010-01-23 19:36:01

!!! Gracias !!! :) –

OOps! Intente hacer clic en Juan, María y Juan de nuevo – Dan

usted todavía aquí? – Dan

¿Qué tal esta solución alternativa?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html><head> 
    <title>jQuery tooltip</title> 
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> --> 
    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function() { 
     $("h1").tooltip({ 
      effect: "slide", 
      tip: '.tooltip' , 
      position: 'bottom center', 
      onBeforeShow: function(event){ 
       //don't show tooltip if trigger (h1 object) does not have specified class 
       if(!this.getTrigger().hasClass("hasToolTip")) 
        return false;      
      } 
     }); 

     $("h1").click(function() { 
      $("h1").removeClass("hasToolTip"); 
      $(this).addClass("hasToolTip"); 
     }); 
    }); 

    </script> 

    <style> 
    .tooltip { 
     display: none; 
     background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png); 
     font-size:14px; 
     height:70px; 
     width:160px; 
     padding:25px; 
     color:#fff; 
    } 
    h1 { 
     width: 400px; 
     text-align: center; 
     background-color: yellow; 
    } 

    </style> 
</head> 
<body> 

    <h1 id="_1">John</h1> 
    <h1 id="_2">Mary</h1> 
    <h1 id="_3">Dan</h1> 
    <h1 id="_4">Paul</h1> 
    <h1 id="_5">Kim</h1> 

    <div class="tooltip">There should be only one tooltip on a page!</div> 

</body></html>

Fuente

2010-01-28 15:43:41

vinculación/desvinculación objeto jQuery a un elemento

Respuesta

Cuestiones relacionadas