Question Qtip à travers iFrame - Avec JQUERY LIVE

Je voudrais trouver un moyen d'utiliser Qtip dans un iFrame sur ma page. J'ai trouvé un moyen d'utiliser QTIP sur un iframe, mais pas avec JQUERY, LIVE ....Question Qtip à travers iFrame - Avec JQUERY LIVE

Qtip par un iFrame: http://craigsworks.com/projects/forums/thread-question-qtip-through-iframe

Toutes les idées sur la façon d'appliquer JQUERY direct à cela?

Mon code actuel:

$('iframe').load(function(){ 
    $(this).qtip(
    { 
    content: 'My first Qtip! Look mom!', 
    show: { 
     when : { 
     target: $(this).contents().find('.tipoff') // Element within the iframe 
     } 
    }, 
    hide: { 
     when : { 
     target: $(this).contents().find('.tipoff') // Element within the iframe 
     } 
    } 
    }); 
});

Merci

Source

2010-04-15 AnApprentice

Je sais que c'est près d'un an, mais je cherchait juste à faire quelque chose de semblable et je pensais que je poste mes conclusions. Je ne suis pas complètement sûr de ce que vous recherchiez et cela pourrait être différent de ce que j'ai, mais je suppose que vous vouliez appliquer un qTip à certains éléments dans un chargé dynamiquement comme je l'ai fait.

Il ne traite pas le problème live(), même si, selon Adding a row to a table in an iFrame with jQuery (live?) il devrait fonctionner, mais voici ce que j'ai fini avec:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Title</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
     iframe { 
      border:1px dashed red; 
     } 
    </style> 
    <link rel="stylesheet" type="text/css" href="jquery.qtip.min.css"/> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script src="jquery.qtip.min.js"></script> 
    <script type="text/javascript"> 

     $(function() { 
      $('p a.tip').qtip({ 
       content: 'foo' 
      }); 

      $('iframe').load(function() { 
       var position = $(this).position(); 
       var top = position.top; 
       var left = position.left; 
       $(this.contentDocument).find('p a.tip').qtip({ 
        content: 'bar', 
        position: { adjust: { x:left, y:top } } 
       }); 
      }); 

      $('#click').click(function(){ 
       $('iframe').attr('src', 'test.html'); 
       return false; 
      }); 
     }); 

    </script> 
</head> 
<body> 
    <p><a class="tip" href="#">Lorem ipsum dolor</a> sit amet, consectetur adipiscing elit.</a></p> 
    <iframe></iframe> 
    <p><a href="#" id="click">Load iFrame</a></p> 
</body> 
</html>

où test.html contient:

<p><a class="tip" href="#">Duis massa metus</a>, convallis vitae, mollis vel, feugiat vitae, nunc.</p>

et vous pouvez obtenir jquery.qtip.min.css et jquery.qtip.min.js de qTip2.

Modifier: Assurez-vous que la page est chargée dans votre navigateur à partir d'un serveur Web (pas simplement chargé en tant que fichier local) pour éviter le Same origin policy.

Espérons que cela soit utile à quelqu'un! :-)

Source

2011-04-12 13:17:51 andyb

Question Qtip à travers iFrame - Avec JQUERY LIVE

Répondre

Questions connexes