gpt4 book ai didi

jquery - 通过 iFrame 提问 Qtip - 使用 JQUERY LIVE

转载 作者:行者123 更新时间:2023-12-01 01:39:34 27 4
gpt4 key购买 nike

我想找到一种在我的页面的 iFrame 中使用 Qtip 的方法。我找到了一种在 iframe 上使用 QTIP 的方法,但不能在 JQUERY LIVE 上使用......

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

关于如何应用 JQUERY Live 的任何想法?

我当前的代码:

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

谢谢

最佳答案

我知道这已经快一年了,但我只是想做一些类似的事情,并认为我应该发布我的发现。我不完全确定你想要什么,它可能与我所拥有的不同,但我假设你想申请 qTip动态加载 <iframe> 中的某些元素正如我所做的那样。

它没有解决 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>

你可以得到jquery.qtip.min.cssjquery.qtip.min.js来自qTip2 .

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

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

关于jquery - 通过 iFrame 提问 Qtip - 使用 JQUERY LIVE,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2649273/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com