- 浏览: 3292786 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst(转)
三个文件:
<link href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>
从官方网站下载最新版本时,可以选择相应的样式及插件;可选的样式包括几种色彩风格(Colour Styles)、CSS3相关样式如圆角;以及以下各种插件,可根据自己需要选择:
Ajax,这个不用说,请求远程内容的
Tips,气泡对话效果,如箭头
Modal,模态对话框效果,如jQuery UI Dialog / ThickBox 的效果
Image map,提供对map内area标记的提示支持
SVG,对SVG元素提供提示的支持
BGIFrame,用于IE6这种古董,如遮住select控件等
除了以上插件的功能外,它的主要功能有(仅列出较常用的):
设置提示的内容、标题、关闭按钮等
使用元素的属性,来作为提示信息内容,如链接的标题(<a title="提示信息")、图片的提示(<img src="提示信息")等等
提示信息显示的位置
提示信息的目标,即显示到什么元素上
提示信息显示/隐藏触发的事件,如鼠标移到元素上、点击(mouseenter,click)
提示信息显示/隐藏的效果
外观的定义,通过相应样式设置
跟随可拖动目标、鼠标指针等
使用频率最高的估计也就以下这些参数
对于显示的位置,有以下参数可以设置:
my = [
'top left', 'top right', 'top center',
'bottom left', 'bottom right', 'bottom center',
'right center', 'right top', 'right bottom',
'left center', 'left top', 'left bottom', 'center'
]
at = [
'bottom left', 'bottom right', 'bottom center',
'top left', 'top right', 'top center',
'left center', 'left top', 'left bottom',
'right center', 'right top', 'right bottom', 'center'
]
而对于显示的色彩风格则有以下各种颜色:
['red', 'blue', 'dark', 'light', 'green','jtools', 'plain', 'youtube', 'cluetip', 'tipsy', 'tipped']
比如red就是ui-tooltip-red,默认为default。另外还有ui-tooltip-shadow、ui-tooltip-rounded分别表示阴影、圆角效果,可以叠加,如下:
$("#demo2").qtip({
content: "这是提示内容(by囧月)",
style: {
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
});
另外对于ajax则有以下主要参数可以设置(与jQuery.ajax一致):
$('.selector').qtip({
content: {
text: 'Loading...', // Loading text...
ajax: {
url: '/path/to/file', // URL to the JSON script
type: 'GET', // POST or GET
data: { id: 3 }, // Data to pass along with your request
dataType: 'json', // Tell it we're retrieving JSON
success: function(data, status) {
//...
}
}
}
});
需要注意的是,AJAX默认使用GET请求而且启用了cache。
参数设置
先看一下qTip2默认的参数设置:
使用方法
以下就简单演示一些使用方法
$("#demo2").qtip({
content: "这是提示内容(by囧月)"
});
创建一个带标题的提示:
$("#demo3").qtip({
content: {
text: "这是提示内容(by囧月 lwme.cnblogs.com)"
, title: "提示标题"
}
});
带关闭按钮的提示:
$("#demo3").qtip({
content: {
text: "这是提示内容(by囧月 lwme.cnblogs.com)",
title: {
text: "提示标题",
button: "关闭"
}
}
});
使用元素的属性作为提示信息:
$("a[title]").qtip(); //从链接的title
$("img[alt]").qtip(); //从img的alt
$("div[title]").qtip(); //从div的title
也可以显式指定元素属性作为提示信息:
$('img[alt]').qtip({
content: {
attr: 'alt'
}
});
使用AJAX请求远程:
$("#demo4").qtip({
content: {
text: "加载中...",
ajax: {
url: "lwmeAtCnblogs.aspx?name=囧月"
}
}
});
设置位置及样式:
$("#demo5").qtip({
position: {
my: 'bottom left',
at: 'top center'
},
style: {
classes: 'ui-tooltip-red'
}
});
点击时出现模态对话框:
$('button').qtip({
content: "这是提示内容(by囧月 lwme.cnblogs.com)",
show: {
event: 'click', // Show it on click...
solo: true, // ...and hide all other tooltips...
modal: true // ...and make it modal
},
hide: false
});
页面加载完成时显示,且不会自动隐藏:
$('button').qtip({
content: "这是提示内容(by囧月 lwme.cnblogs.com)",
show: {
ready: true
},
hide: false
});
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
三个文件:
<link href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>
从官方网站下载最新版本时,可以选择相应的样式及插件;可选的样式包括几种色彩风格(Colour Styles)、CSS3相关样式如圆角;以及以下各种插件,可根据自己需要选择:
Ajax,这个不用说,请求远程内容的
Tips,气泡对话效果,如箭头
Modal,模态对话框效果,如jQuery UI Dialog / ThickBox 的效果
Image map,提供对map内area标记的提示支持
SVG,对SVG元素提供提示的支持
BGIFrame,用于IE6这种古董,如遮住select控件等
除了以上插件的功能外,它的主要功能有(仅列出较常用的):
设置提示的内容、标题、关闭按钮等
使用元素的属性,来作为提示信息内容,如链接的标题(<a title="提示信息")、图片的提示(<img src="提示信息")等等
提示信息显示的位置
提示信息的目标,即显示到什么元素上
提示信息显示/隐藏触发的事件,如鼠标移到元素上、点击(mouseenter,click)
提示信息显示/隐藏的效果
外观的定义,通过相应样式设置
跟随可拖动目标、鼠标指针等
使用频率最高的估计也就以下这些参数
$.fn.qtip.defaults = { content: { text: true, attr: 'title', ajax: false, title: { text: false, button: false } }, position: { my: 'top left', at: 'bottom right', }, show: { event: 'mouseenter', solo: false, ready: false, modal: false }, hide: { event: 'mouseleave' }, style: 'ui-tooltip-default' };
对于显示的位置,有以下参数可以设置:
my = [
'top left', 'top right', 'top center',
'bottom left', 'bottom right', 'bottom center',
'right center', 'right top', 'right bottom',
'left center', 'left top', 'left bottom', 'center'
]
at = [
'bottom left', 'bottom right', 'bottom center',
'top left', 'top right', 'top center',
'left center', 'left top', 'left bottom',
'right center', 'right top', 'right bottom', 'center'
]
而对于显示的色彩风格则有以下各种颜色:
['red', 'blue', 'dark', 'light', 'green','jtools', 'plain', 'youtube', 'cluetip', 'tipsy', 'tipped']
比如red就是ui-tooltip-red,默认为default。另外还有ui-tooltip-shadow、ui-tooltip-rounded分别表示阴影、圆角效果,可以叠加,如下:
$("#demo2").qtip({
content: "这是提示内容(by囧月)",
style: {
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
});
另外对于ajax则有以下主要参数可以设置(与jQuery.ajax一致):
$('.selector').qtip({
content: {
text: 'Loading...', // Loading text...
ajax: {
url: '/path/to/file', // URL to the JSON script
type: 'GET', // POST or GET
data: { id: 3 }, // Data to pass along with your request
dataType: 'json', // Tell it we're retrieving JSON
success: function(data, status) {
//...
}
}
}
});
需要注意的是,AJAX默认使用GET请求而且启用了cache。
参数设置
先看一下qTip2默认的参数设置:
$.fn.qtip.defaults = { // 页面加载完成就创建提示信息的元素 prerender: false, // 为提示信息设置id,如设置为myTooltip // 就可以通过ui-tooltip-myTooltip访问这个提示信息 id: false, // 每次显示提示都删除上一次的提示 overwrite: true, // 通过元素属性创建提示 // 如a[title],把原有的title重命名为oldtitle suppress: true, // 内容相关的设置 content: { // 提示信息的内容 // 如果只设置内容可以直接 content: "提示信息" // 而不需要 content: { text: { "提示信息" } } text: true, // 提示信息使用的元素属性 attr: 'title', // ajax插件 ajax: false, title: { // 提示信息的标题 // 如果只设置标题可以直接 title: "标题" text: false, // 提示信息的关闭按钮 // 如button:"x",button:"关闭" // 都可以启用关闭按钮 button: false } }, // 位置相关的设置 position: { // 提示信息的位置 // 如提示的目标元素的右下角(at属性) // 对应 提示信息的左上角(my属性) my: 'top left', at: 'bottom right', // 提示的目标元素,默认为选择器 target: FALSE, // 提示信息默认添加到的容器 container: FALSE, // 使提示信息在指定目标内可见,不会超出边界 viewport: FALSE, adjust: { // 提示信息位置偏移 x: 0, y: 0, mouse: TRUE, resize: TRUE, method: 'flip flip' }, // 特效 effect: function(api, pos, viewport) { $(this).animate(pos, { duration: 200, queue: FALSE }); } }, // 显示提示的相关设置 show: { // 触发事件的目标元素 // 默认为选择器 target: false, // 事件名称,默认为鼠标移到时 // 可以改为click点击 event: 'mouseenter', // 特效 effect: true, // 延迟显示时间 delay: 90, // 隐藏其他提示 solo: false, // 在页面加载完就显示提示 ready: false, modal: { // 启用模态对话框效果 on: false, // 特效 effect: true, blur: true, escape: true } }, // 隐藏提示的相关设置 // 参考show hide: { target: false, event: 'mouseleave', effect: true, delay: 0, // 设置为true时,不会隐藏 fixed: false, inactive: false, leave: 'window', distance: false }, // 样式相关 style: { // 样式名称 classes: '', widget: false, width: false, height: false, // tip插件,箭头相关设置 tip: { corner: true, mimic: false, width: 8, height: 8, border: true, offset: 0 } }, // 相关事件绑定 events: { render: null, move: null, show: null, hide: null, toggle: null, visible: null, focus: null, blur: null } };
使用方法
以下就简单演示一些使用方法
$("#demo2").qtip({
content: "这是提示内容(by囧月)"
});
创建一个带标题的提示:
$("#demo3").qtip({
content: {
text: "这是提示内容(by囧月 lwme.cnblogs.com)"
, title: "提示标题"
}
});
带关闭按钮的提示:
$("#demo3").qtip({
content: {
text: "这是提示内容(by囧月 lwme.cnblogs.com)",
title: {
text: "提示标题",
button: "关闭"
}
}
});
使用元素的属性作为提示信息:
$("a[title]").qtip(); //从链接的title
$("img[alt]").qtip(); //从img的alt
$("div[title]").qtip(); //从div的title
也可以显式指定元素属性作为提示信息:
$('img[alt]').qtip({
content: {
attr: 'alt'
}
});
使用AJAX请求远程:
$("#demo4").qtip({
content: {
text: "加载中...",
ajax: {
url: "lwmeAtCnblogs.aspx?name=囧月"
}
}
});
设置位置及样式:
$("#demo5").qtip({
position: {
my: 'bottom left',
at: 'top center'
},
style: {
classes: 'ui-tooltip-red'
}
});
点击时出现模态对话框:
$('button').qtip({
content: "这是提示内容(by囧月 lwme.cnblogs.com)",
show: {
event: 'click', // Show it on click...
solo: true, // ...and hide all other tooltips...
modal: true // ...and make it modal
},
hide: false
});
页面加载完成时显示,且不会自动隐藏:
$('button').qtip({
content: "这是提示内容(by囧月 lwme.cnblogs.com)",
show: {
ready: true
},
hide: false
});
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
发表评论
-
22个很棒的jQuery文件上传插件
2014-09-02 19:17 6487zccst转载 原文链接:http://www.csdn.n ... -
点击时文字左右切换(不同于图片左右切换)
2014-08-19 16:49 1615作者:zccst 文字左右切换,慢慢收集 很难找到现成的 ... -
Jquery实现遮罩层,就是弹出DIV周围都灰色不能操作
2014-08-01 15:09 4368作者:zccst 本篇文章的精髓是: 定义一个div,设置 ... -
jquery【插件】图片放大(点击)
2013-08-11 19:42 1241作者:zccst 1,图片点击放大。 缺点:放大后的图片不 ... -
jQuery下的返回顶部功能的实现实例页面
2013-06-03 22:31 1035jQuery下的返回顶部功能的实现实例页面 直接复制下面代码 ... -
jquery【插件】图片切换轮播等
2013-06-02 00:27 1202作者:zccst 在网站内添加图片效果,是经常遇到的事情,所 ... -
jquery实现二级联动
2012-03-22 19:52 1488作者:zccst <script type=&quo ... -
jquery【插件】 timeago的使用
2012-03-09 14:28 5121作者:zccst <script type=&qu ... -
jquery【插件】flexigrid
2012-02-27 14:06 1111一、flexigrid——灵活的表格制作 官方网址:http: ... -
jquery【插件】popup
2012-02-27 14:04 1138jquery独立插件 一、弹出框(pop) 原理: 源码见 ... -
jquery【插件】 pagination使用
2012-02-21 17:58 34280作者:zccst 2014年2月23日补充带跳转到指定页的 ... -
jquery【插件】tableview
2012-01-18 17:16 1277tableview tableview其实不太好用。 T ...
相关推荐
qTip2是一个灰常强大且精致的jQuery提示信息插件,是qTip的第2版,也是一个全新的版本,提供了丰富的功能及漂亮的外观,非常易于使用
提供为 Rails 3.1+ 资产管道打包的qTip2 jQuery 插件。 安装 将这些行添加到应用程序的Gemfile : # qtip2 jquery plugin packaged for the rails asset pipeline gem 'qtip2-jquery-rails' , '~> 2.2.100' 然后...
jQuery qtip浮动提示框插件新浪微博图片或文字ajax提示
主要介绍了jquery.qtip提示信息插件用法,结合简单实例形式分析了该插件用于显示提示信息的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
qTip2是一个灰常强大且精致的jQuery提示信息插件,是qTip的第2版,也是一个全新的版本,提供了丰富的功能及漂亮的外观,非常易于使用。
jquery qtip
jQuery qtip浮动提示框插件新浪微博图片或文字ajax提示框
qTip是一个基于JQuery的Tooltip插件。它几乎支持所有的主流浏览器。
JQuery的前端气泡插件,包括js工具类及详细的使用实例,有注详细的注释
主要介绍了jQuery提示插件qTip2用法,结合实例形式分析了qTip2的使用技巧,可支持ajax及多种样式的设置,需要的朋友可以参考下
前端项目-qtip2,介绍…第2季度。第二代高级qtip插件,用于流行的jquery框架。
jquery-qtip,提示框。 使用很方便
qTip是一个实现圆角对话气泡框样式的Tooltip jQuery插件。支持多种浏览器,可定制,功能强大。
提示未功能,包括样式 位置 事件都可以 由自己定义 。。。很强很方便。。
jquery.qtip-1.0.0-rc3.js 弹出层
是qTip2的中文API PDF格式的,可以看看这篇文章http://blog.csdn.net/yhc13429826359/article/details/7796033
qTip2不再维护。 如果需要支持或新功能,请考虑移至较新的库! 非常强大的工具提示 介绍... qTip 2 。 第二代高级qTip插件,用于流行的jQuery框架。 qTip 2建立在1.0的用户友好但功能丰富的基础之上,为您提供了...