简单？？ onClick qTip一些链接，但不是全部

Question

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

每个链接都不同

这是NON Working代码的示例，

        <!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它可以做到这一点，并且在鼠标悬停时也会触发，我只希望onclick，因为我不想在用户单击链接之前才加载页面。

Answer 1

您可以给想要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>

希望这就是你想要的:)

简单？？ onClick qTip一些链接，但不是全部

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-08-06 18:05:55

简单？？ onClick qTip一些链接，但不是全部

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-08-06 18:05:55

解决方案1
2 已采纳 2013-08-06 18:05:55