《JQuery——插件的开发和使用(二)之qTip2 插件的使用》

what is qtip?

introducing : qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework.

Built from the ground up to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips, and best of all… it’s completely free under the MIT license!

How to use it?

simple demo:

  • html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <TITLE> New Document </TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link rel="stylesheet" type="text/css" href="jquery.qtip.css"> 
    <script type="text/javascript" src="jquery.min.js"></script>  
    <script type="text/javascript" src = "jquery.qtip.js"></script>

</HEAD>

<BODY>

 <a href="#test" title="My tooltip text">Sample link</a>

 <script type = "text/javascript"> // Create the tooltips only when document ready $(document).ready(function () { // This will automatically grab the 'title' attribute and replace // the regular browser tooltips for all <a> elements with a title attribute! $('a[title]').qtip(); }); </script>
</BODY>
</HTML> 
  • core JavaScript code:
// Create the tooltips only when document ready $(document).ready(function () { // This will automatically grab the 'title' attribute and replace // the regular browser tooltips for all <a> elements with a title attribute! $('a[title]').qtip();

});

it gose like that:

《JQuery——插件的开发和使用(二)之qTip2 插件的使用》_第1张图片

小结:

到现在为止,知道怎么用别人的插件了吗?赶快来试试吧。

你可能感兴趣的:(jquery,插件,tooltip)