- 浏览: 3323084 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 6540zccst转载 原文链接:http://www.csdn.n ... -
点击时文字左右切换(不同于图片左右切换)
2014-08-19 16:49 1649作者:zccst 文字左右切换,慢慢收集 很难找到现成的 ... -
Jquery实现遮罩层,就是弹出DIV周围都灰色不能操作
2014-08-01 15:09 4402作者:zccst 本篇文章的精髓是: 定义一个div,设置 ... -
jquery【插件】图片放大(点击)
2013-08-11 19:42 1294作者:zccst 1,图片点击放大。 缺点:放大后的图片不 ... -
jQuery下的返回顶部功能的实现实例页面
2013-06-03 22:31 1070jQuery下的返回顶部功能的实现实例页面 直接复制下面代码 ... -
jquery【插件】图片切换轮播等
2013-06-02 00:27 1271作者:zccst 在网站内添加图片效果,是经常遇到的事情,所 ... -
jquery实现二级联动
2012-03-22 19:52 1540作者:zccst <script type=&quo ... -
jquery【插件】 timeago的使用
2012-03-09 14:28 5198作者:zccst <script type=&qu ... -
jquery【插件】flexigrid
2012-02-27 14:06 1184一、flexigrid——灵活的表格制作 官方网址:http: ... -
jquery【插件】popup
2012-02-27 14:04 1217jquery独立插件 一、弹出框(pop) 原理: 源码见 ... -
jquery【插件】 pagination使用
2012-02-21 17:58 34354作者:zccst 2014年2月23日补充带跳转到指定页的 ... -
jquery【插件】tableview
2012-01-18 17:16 1316tableview tableview其实不太好用。 T ...
相关推荐
jQuery QTip是一款强大的前端提示插件,它基于jQuery库,提供了丰富的自定义选项和样式控制,可以创建各种类型的提示信息,如信息气泡、提示框、工具提示等。QTip不仅支持基本的文字提示,还能包含HTML内容,甚至与...
qTip通过CSS样式和JavaScript API提供丰富的定制选项,可以满足开发者对于提示信息的各种需求。 ### 二、安装与引入 要在项目中使用qTip,首先需要确保已引入jQuery库。然后,你可以通过CDN或者下载zip文件的方式...
jQuery qTip是一款基于JavaScript库jQuery的提示插件,它允许开发者轻松地创建自定义的提示信息。qTip提供了一种灵活的方式来展示各种类型的信息,包括简单的文本提示、复杂的HTML内容,甚至可以包含图像、视频等...
jQuery qtip浮动提示框插件新浪微博图片或文字ajax提示
【描述】qTip2是jQuery的一个强大插件,主要功能是提供可自定义的提示信息。在第二季度发布的这个版本(qTip2-master),它进行了多方面的改进和优化,旨在提高用户体验和开发者的工作效率。qTip2不仅能够处理基本的...
而`qTip2`则是基于jQuery的一个强大且灵活的提示(tooltip)插件,它允许开发者自定义提示框的样式、位置和触发事件,从而提供更丰富的用户体验。 `qTip2`的核心特性在于它的灵活性和可定制性。通过这个工具,你...
jQuery.qTip是一款强大的提示信息插件,用于在网页中创建各种各样的提示效果。它提供了丰富的自定义选项,包括内容、样式、位置以及显示和隐藏的控制,使得开发者能够轻松地实现复杂且美观的提示信息功能。以下是对...
qTip2是一款强大的jQuery插件,用于创建可自定义的工具提示。这款插件提供了丰富的功能,包括事件处理、定位、全局设置、核心功能、...无论是简单的提示信息还是复杂的交互设计,qTip2都能以灵活、强大的方式满足需求。
jQuery提示插件qTip2是一款强大的工具,它扩展了jQuery的功能,允许开发者创建美观且功能丰富的提示信息。这款插件支持Ajax加载内容以及多种样式设置,使得提示信息不仅能够显示静态文本,还能动态获取远程数据,...
qTip2是一个强大的jQuery插件,专用于创建功能丰富的提示信息和弹出窗口。这个插件以其灵活性、可定制性和美观的设计而闻名,是qTip系列的第二代产品,相较于第一版进行了全面的升级和改进。qTip2的出现使得在网页...
本教程将详细讲解如何利用jQuery的提示信息插件(tooltip)来实现图片多点鼠标滑过时的信息提示效果。这个压缩包包含了一个使用须知的文本文件以及一个可能为示例代码或资源的文件。 首先,我们需要理解jQuery ...
2. **qTip**:qTip是jQuery的一个插件,它提供了丰富的提示框功能,可以创建各种复杂的提示信息,如弹出框、气泡提示等。在这个项目中,qTip被用于构建类似新浪微博的浮动提示框,提供用户交互反馈。 3. **Ajax**:...
2. **jGrowl**:这个插件不仅仅用于工具提示,还擅长于创建通知窗口。它可以将工具提示以弹出通知的形式展示,增强用户体验。 3. **jQuery Horizontal Tooltips Menu**:为菜单项提供水平方向的工具提示,使得菜单...
jQuery的qTip是一个功能丰富的Tooltip插件,它允许开发者在网页上添加动态的提示工具,这些提示工具能够以友好和美观的方式为用户提供额外信息。这个插件是基于流行的jQuery库,所以它很容易集成到各种使用jQuery的...
而QTip则是一个优秀的jQuery提示插件,可以创建复杂的提示信息。 1. jQuery UI的使用: 首先,需要在页面中引入jQuery UI的CSS和JS文件,然后调用相应的UI方法,如创建对话框: ```html <script src="jquery-ui.js...
总结来说,QTip作为一款强大的jQuery提示插件,提供了丰富的功能来增强网页的交互体验。通过基础提示、预定义样式、复杂HTML和自定义事件,开发者可以灵活地定制文字提示,以满足不同应用场景的需求。在实际项目中,...