Простой ?? 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>

I хотел бы заменить: url: 'http://qtip2.com/demos/data/snowyowl', с URL-адресом, который был нажат, и поместить его здесь, и если onclick не был запущен, Qtip также не будет запускаться.

Я нашел пример в http://jsfiddle.net/craga89/L6yq3/, но он загружает только одну ссылку, используя тот же URL-адрес, и выглядит так, как будто он будет qTip для всех «A» href на странице. Я не хочу, чтобы это было сделано, и это также срабатывает при наведении мыши. Я хочу, чтобы он был включен, потому что я не хочу загружать страницу, пока пользователь не нажмет на ссылку.

источник

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 некоторые ссылки, но не все

ответ

Смежные вопросы