Question Qtip through iFrame - With JQUERY LIVE_问答_开发者

Question Qtip through iFrame - With JQUERY LIVE

开发者 https://www.devze.com 2022-12-26 19:58 出处：网络

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

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

Question Qtip through iFrame - With JQUERY LIVE

精彩评论

关注公众号

热门标签

图文推荐

Question Qtip through iFrame - With JQUERY LIVE

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：