qTip--基于JQuery的Tooltip插件
来源:互联网 发布:淘宝店铺5蓝冠 编辑:程序博客网 时间:2024/06/03 13:28
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如下所示:
- <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如下所示:
- <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>
效果如图所示:
- qTip--基于JQuery的Tooltip插件
- 基于jquery的显示插件 jquery.qtip
- 基于bootstrup 3的jQuery tooltip插件
- jquery.qtip插件的简单入门
- jQuery插件qtip使用指南
- qtip jquery 提示插件使用指南
- Jquery插件学习系列-QTip
- Jquery 插件 qtip 实现丰富的提示效果
- 使用jQuery插件qtip遇到的位置问题
- jQuery提示插件 qTip简单使用
- 一个Jquery的提示(tooltip)插件Jtip
- 简单实用的jQuery Tooltip提示插件
- jquery插件之tooltip
- 【学习】jquery 插件-Tooltip
- jQuery Tooltip插件
- GBin1插件分享:10个超棒tooltip的jQuery插件
- 流行的jQuery信息提示插件(jQuery Tooltip Plugin)
- 第一次写jquery插件(tooltip)
- 2013 暑假多校训练 4总结
- 演示tcp传输。
- Subvision SVN 服务端与客户端的安装
- BAT命令
- AS3 IOC框架Spring Actionscript 的使用总结
- qTip--基于JQuery的Tooltip插件
- 来自奢侈品行业的CEO能给苹果带来什么?
- 【简单介绍+实践】大端、小端、主机序、网络序
- javascript出现字符串常量未结束常见原因
- MTK android 工程中如何修改照片详细信息中机型名
- sql 获取 session 客户端的 IP 地址
- 华为机试题:身份证号码合法性判断
- Web Service学习文档下载
- 网页提示https“证书错误:导航已阻止”,无法跳转解决办法