插件描述：qTip是jQuery 框架的工具提示插件。它是跨浏览器、可自定义和功能的完整包装!
使用方法
安装qTip只包括jQuery 和qTip库文件例如jquery.qtip-1.0.0.min.js使用脚本的 html 元素，就像这样：
1 2 | <script type="text/javascript" src="js/jquery.1.3.2.min.js"></script><script type="text/javascript" src="js/jquery.qtip-1.0.0.min.js"></script> |
HTML 结构
一旦创建，所有的工具提示在此窗体中有一个共同的 HTML 结构：
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="qtip qtip-stylename"> <div class="qtip-tip" rel="cornerValue"></div> <div class="qtip-wrapper"> <div class="qtip-borderTop"></div> // Only present when using rounded corners <div class="qtip-contentWrapper"> <div class="qtip-title"> // All CSS styles... <div class="qtip-button"></div> // ...are usually applied... </div> <div class="qtip-content"></div> // ...to these three elements! </div> <div class="qtip-borderBottom"></div> // Only present when using rounded corners </div></div> |
当造型工具提示所有额外的 CSS 样式应应用于内容和标题的元素，除非您特别造型其他元素 ！
创建工具提示
用qTip创建工具提示是非常简单的。你想要应用一个工具提示，使用jQuery 的选择器的元素列表的生成如下所示：
1 | $('ul:last li.active') |
例如上面的代码将生成的是页面上的最后一个 ul 元素，所有元素的数组。一旦您确定了您的元素数组，您只调用qtip()方法，以及选项对象来指定工具提示，像这样：
1 2 3 4 5 | $('ul:last li.active').qtip({ content: 'This is an active list element', show: 'mouseover', hide: 'mouseout'}) |
这将创建包含任何列表项，鼠标移动将显示内容和隐藏
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery分页插件jPages
- 下一个特效： jQuery工具提示插件Poshy Tip