主页:http://craigsworks.com/projects/qtip/ 下载:http://craigsworks.com/projects/qtip/download 示例:http://craigsworks.com/projects/qtip/qTip是一个基于JQuery的Tooltip插件。它几乎支持所有的主流浏览器例如： Internet Explorer 6.0+ Firefox 2.0+ Opera 9.0+ Safari 3.0+ Google Chrome 1.0+ Konqueror 3.5+ 使用qTip可以很轻松的定义tip的位置以及样式，同时qTip还有一个强大的API...... 使用qTip前，只需引入两个JS文件即可： 复制代码 代码如下: <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script> 下面举几个比较简单的例子。 1、Basic text html如下所示： 复制代码 代码如下: <div id="content"> <a href=" ">Basic text</a> </div> JS代码： 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { $('#content a[href]').qtip( { content: 'Some basic content for the tooltip' }); }); </script> 2、Title attribute html如下所示： 复制代码 代码如下: <div id="content"> <a href=" " title="That sounds familiar...">Title attribute</a> </div> JS代码： 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { $('#content a[href][title]').qtip({ content: { text: false }, style: 'cream' }); }); </script> 3、Image html如下所示： 复制代码 代码如下: <div id="content"> <a href=" ">Image</a> </div> JS代码： 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { $('#content a[href]').qtip({ content: '<img src="small.png" alt="Image" />' }); }); </script> 4、Corner values html如下所示： 复制代码 代码如下: <div id="content" style="margin-top:200px;margin-left:200px;"> <a href=" ">Corner values</a> </div> JS代码： 复制代码 代码如下: <script type="text/javascript"> var corners = 'bottomLeft'; var opposites = 'topRight'; $(document).ready(function() { $('#content a') .hover(function() { $(this).html(opposites) .qtip({ content: corners, position: { corner: { tooltip: corners, target: opposites } }, show: { when: false, ready: true }, hide: false, style: { border: { width: 5, radius: 10 }, padding: 10, textAlign: 'center', tip: true, name: 'cream' } }); }); }); </script> 5、Fixed tooltips html如下所示： 复制代码 代码如下: <div id="content"> <img src="sample.jpg" alt="" height="200" /> </div> JS代码： 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { $('#content img').each(function() { $(this).qtip( { content: '<a href=" ">Edit</a> | <a href=" ">Delete</a>', position: 'topRight', hide: { fixed: true }, style: { padding: '5px 15px', name: 'cream' } }); }); }); </script> css代码： 复制代码 代码如下: <style type="text/css"> #content img{ float: left; margin-right: 35px; border: 2px solid #454545; padding: 1px; } </style> 6、Loading html html如下所示： Html代码 复制代码 代码如下: <div id="content"> <a href="#" rel="sample.html">Click me</a> </div> JS代码： 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { $('#content a[rel]').each(function() { $(this).qtip( { content: { url: $(this).attr('rel'), title: { text: 'Wiki - ' + $(this).text(), button: 'Close' } }, position: { corner: { target: 'bottomMiddle', tooltip: 'topMiddle' }, adjust: { screen: true } }, show: { when: 'click', solo: true }, hide: 'unfocus', style: { tip: true, border: { width: 0, radius: 4 }, name: 'light', width: 570 } }) }); }); </script> 7、Modal tooltips html如下所示： Html代码 复制代码 代码如下: <div id="content"> <a href="#" rel="modal">Click here</a> </div> JS代码： 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { $('a[rel="modal"]:first').qtip( { content: { title: { text: 'Modal tooltips sample', button: 'Close' }, text: 'hello world' }, position: { target: $(document.body), corner: 'center' }, show: { when: 'click', solo: true }, hide: false, style: { width: { max: 350 }, padding: '14px', border: { width: 9, radius: 9, color: '#666666' }, name: 'light' }, api: { beforeShow: function() { $('#qtip-blanket').fadeIn(this.options.show.effect.length); }, beforeHide: function() { $('#qtip-blanket').fadeOut(this.options.hide.effect.length); } } }); $('<div id="qtip-blanket">') .css({ position: 'absolute', top: $(document).scrollTop(), left: 0, height: $(document).height(), width: '100%', opacity: 0.7, backgroundColor: 'black', zIndex: 5000 }) .appendTo(document.body) .hide(); }); </script>

　　推荐阅读

　　JavaScript初学者需要了解10个小技巧

因为绝大多数的浏览器都和它兼容，你可以在这些浏览器中使用它。JavaScript被接受的相当快，因为它是如此的简单，而且使用范围相当广泛。许多程序员过去常常认为JavaScript是一门“玩具语言”，但是，AJAX进入市场>>>详细阅读

本文标题：qTip 基于JQuery的Tooltip插件[兼容性好]

地址：http://www.17bianji.com/kaifa2/JS/25784.html

 1/2    1