Question Qtip through iFrame - With JQUERY LIVE
I'd like to find a fay to use Qtip in an iFrame on my page. I found a way to use QTIP on an iframe, but not with JQUERY LIVE....
qTip through an iFrame: http://craigsworks.com/projects/forums/thread-question-qtip-through-iframe
Any ideas on how to apply JQUERY Live to that?
My current code:
$('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(开发者_如何学Go).find('.tipoff') // Element within the iframe
}
}
});
});
Thanks
I know this is nearly a year old but I was just looking to do something similar and thought I'd post my findings. I'm not completely sure what you were after and it might be different to what I have, but I am assuming you wanted to apply a qTip to some elements in a dynamically loaded <iframe> as I did.
It doesn't address the live() problem, even though according to Adding a row to a table in an iFrame with jQuery (live?) it should work, but here is what I ended up with:
<!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>
where test.html contains:
<p><a class="tip" href="#">Duis massa metus</a>, convallis vitae, mollis vel, feugiat vitae, nunc.</p>
and you can get jquery.qtip.min.css and jquery.qtip.min.js from qTip2.
Edit: Make sure the page is loaded in your browser from a web server (not just loaded as a local file) to avoid the Same origin policy.
Hope this is useful to someone! :-)
加载中,请稍侯......
精彩评论