1

我想qtip一些链接，但不是全部，

每个链接都不一样

这是非工作代码的示例，

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
        <head>
          <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
          <title>qTip2 - My test case - jsFiddle demo</title>

          <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>

          <link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
          <link rel="stylesheet" type="text/css" href="/css/result-light.css"/>


    <script type='text/javascript' src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
    <link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css"/>


    <style type='text/css'>
            body{
            padding: 50px;
        }    
        .qtip-wiki{
            max-width: 385px;
        }    
        .qtip-wiki p{
            margin: 0 0 6px;
        }    
        .qtip-wiki h1{
            font-size: 20px;
            line-height: 1.1;
            margin: 0 0 5px;
        }
        .qtip-wiki img{
            float: left;
            margin: 10px 10px 10px 0;
        }
        .qtip-wiki .info{
            overflow: hidden;
        }
        .qtip-wiki p.note{
            font-weight: 700;
        }
    </style>


        <script type='text/javascript'>//<![CDATA[ 
        $(window).load(function(){
        // Create the tooltips only when document ready
         $(document).ready(function()
         {
             // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
             $('a').each(function() {
                 $(this).qtip({
                    content: {
                        text: 'Loading...',
                        ajax: {
                            url: 'http://qtip2.com/demos/data/snowyowl', 
                            loading: false
                        }
                    },
                    position: {
                        viewport: $(window)
                    },
                    style: 'qtip-wiki'
                 });
             });
         });
        });//]]>  

        </script>


        </head>
        <body>
          <a href='non_QTip_Link.php' target='_blank'>Snowy Owl 0</a>
        <br><br>
        <a href='qtip_link_Yes1.php' onclick=$qTIPThisLink>Snowy Owl 1</a>
        <a href='non_QTip_Link.php'>Snowy Owl 00</a>
        <br><br>
        <a href='qtip_link_Yes2.php' onclick=$qTIPThisLink>Snowy Owl 2</a>           
        </body>
        </html>

我想替换： url: 'http://qtip2.com/demos/data/snowyowl', 用被点击的 URL 并将它放在这里，如果 onclick 没有被触发，那么 Qtip 也不会触发。

我在http://jsfiddle.net/craga89/L6yq3/找到了一个示例，但它仅使用相同的 URL 加载一个链接，并且看起来它会 qTip 我不想要的页面上的所有“A”href它可以做到这一点，它也会在鼠标悬停时触发我想要它只是因为我不想在用户单击链接之前加载页面。

4

1 回答 1

2

你可以给你想要 qtip 一个类的 a 标签，比如：

<a href='....' class='qtip-link'> LINK </a>

然后您可以添加以下javascript：

<script type='text/javascript'>

   $(document).ready(function() {
    $('.qtip-link').each(function() {
             $(this).click(function() {
               return false; //disables the the link from redirecting
             });

             var linkUrl = $(this).attr("href"); //gets the url from the link
             $(this).qtip({
                content: {
                    text: 'Loading...',
                    ajax: {
                        url: linkUrl, 
                        loading: false
                    }
                },
                position: {
                    viewport: $(window)
                },
                style: 'qtip-wiki',
                show: 'click' //this will let the qtip only show when the link is clicked
             });
         });
    });


   });
</script>

希望这是你想要的:)

于 2013-08-06T18:05:55.630 回答