2010-04-15 105 views
3

我想找一个在我的页面上使用Qtip的iFrame。我发现了一种使用QTIP的iframe,但不使用jQuery LIVE ....问题Qtip通过iFrame - 使用JQUERY LIVE

qTip通过iframe:http://craigsworks.com/projects/forums/thread-question-qtip-through-iframe

关于如何申请JQUERY居住于任何想法?

我当前的代码:

$('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 
     } 
    } 
    }); 
}); 

感谢

回答

1

我知道这是近一年老了,但我只是在寻找做同样的事情,我想我会发布我的发现。我并不完全确定你在做什么,它可能与我所拥有的不同,但我假设你想像我那样对动态加载的中的某些元素应用qTip

它并不解决问题live(),即使根据Adding a row to a table in an iFrame with jQuery (live?)它应该工作,但这里是我结束了:

<!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> 

这里的test.html包含:

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

,你可以从qTip2得到jquery.qtip.min.cssjquery.qtip.min.js

编辑:确保页面从Web服务器(不仅作为本地文件加载)在浏览器中加载,以避免Same origin policy

希望这对某人有用! :-)