問題Qtip通過iFrame - 使用JQUERY LIVE

我想找一個在我的頁面上使用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 
     } 
    } 
    }); 
});

感謝

來源

2010-04-15 AnApprentice

我知道這是近一年老了，但我只是在尋找做同樣的事情，我想我會發布我的發現。我並不完全確定你在做什麼，它可能與我所擁有的不同，但我假設你想像我那樣對動態加載的中的某些元素應用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.css和jquery.qtip.min.js。

編輯：確保頁面從Web服務器（不僅作爲本地文件加載）在瀏覽器中加載，以避免Same origin policy。

希望這對某人有用！ :-)

來源

2011-04-12 13:17:51 andyb

問題Qtip通過iFrame - 使用JQUERY LIVE

回答

相關問題