簡單??的onClick qTip一些聯繫，但不是所有

我想qtip一些聯繫，但不是全部，簡單??的onClick 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替換：url: 'http://qtip2.com/demos/data/snowyowl', ，並將其置於此處，如果onclick未被觸發，則Qtip不會觸發。

我在http://jsfiddle.net/craga89/L6yq3/找到一個例子，但它只使用相同的URL加載一個鏈接，它看起來好像它會q提示頁面上的所有'A'href'我不希望它這樣做，它也是在鼠標懸停時觸發我只想點擊onclick，因爲我不想在用戶點擊鏈接之前加載頁面。

來源

2013-08-05 compcobalt

努力理解你的問題。所以你希望Qtip在鏈接被點擊時出現？ –

@JeandrePentz我想要兩個，在這個例子中：我想要第一個鏈接：'Snowy Owl 0'頂部打開使用在一個新的頁面，在另外兩個我想使用qtip。 – compcobalt

你可以給你想要有qtip一類像一個標籤：

<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-06 18:05:55

簡單??的onClick qTip一些聯繫，但不是所有

回答

相關問題