jquery提示插件qtip2使用(全面)

详情参考:http://qtip2.com

我下载的 库文件以及自己总结的资料:链接:http://pan.baidu.com/s/1pJI43Cv密码:751y

基本用法:

(1)只有简单提示

$(‘#username‘).qtip({ // Grab some elements to apply the tooltipto

content: {

text: ‘用户名只能输入英文字母或者数字‘

}

});

(2)带标题的

$(‘#password‘).qtip({ // Grabsome elements to apply the tooltip to

content: {

text:‘密码为6-12位数‘,

title:"演示",

}

(3)设置位置

$(‘#password‘).qtip({ // Grab some elements to apply the tooltipto

content: {

text: ‘密码为6-12位数‘,

title:"演示",

}

,

position:{

my: ‘top left‘,

at: ‘bottom center‘,

},

style:{

classes: ‘qtip-purple‘,

tip: {

border:1,

width:50,

height:20

}

}

});

my:是指三角的位置

at:是在提示在组件的相对位置

(top 上 bottom下  )( left左 right右center中)

两组配合使用

(4)设置风格

$(‘#password‘).qtip({ // Grab someelements to apply the tooltip to

content: {

text: ‘密码为6-12位数‘,

title:"演示",

}

,

position:{

my: ‘top left‘,

at: ‘bottom center‘,

},

style:{

classes: ‘qtip-purple‘,

tip: {

border:1,

width:50,

height:20

}

}

});

classes可以有多种选择

qtip-light浅色

qtip-dark 深色

qtip-cream

qtip-red

qtip-blue

qtip-shadow

qtip-rounded圆角

qtip-youtube

qtip-jtools

qtip-cluetip

qtip-tipsy

qtip-tip

qtip-titlebar

qtip-default

classes:‘qtip-purple‘,

classes: ‘qtip-purpleqtip-rounded‘,

可以自定义 上面的qtip-purple就是我自己定义的

.qtip-purple{background-color:#9FF0E1;border-color:#EEC933;color:#42B453}.qtip-purple.qtip-titlebar{background-color:#9465E1}

background-color是内容的背景颜色

border-color:整个的边框

color:文字的颜色

.qtip-purple.qtip-titlebar{background-color: #9465E1}  设置的是标题的背景色

标题还可以设置标题文字颜色

.qtip-purple .qtip-titlebar{background-color:#9465E1;color:red}

(6)显示 隐藏 重置等

显示:$(‘#username‘).qtip(‘show‘);

隐藏:$(‘#username‘).qtip(‘hide‘);

$(‘.selector‘).qtip(‘reposition‘);//
Reposition all tooltips belonging to the selected elements重置该选择器选中元素的提示组件

$(‘.selector‘).qtip(‘disable‘);// Disable all
tooltips belonging to the selectedelements

该选择器选中元素的提示组件设为不可用状态

$(‘.selector‘).qtip(‘toggle‘,true);//
显示该选择器选中元素的提示组件$(‘.selector‘).qtip(‘destroy‘,true);//
直接销毁属于该选择器选中元素的提示组件

(7)修改值

$(“#username”).qtip(‘api‘).set(‘content.text‘,‘这里是内容‘);

$(“#username”).qtip(‘api‘).set(‘content.text‘,‘这里是修改后的内容‘)..set(‘content.title‘,‘这里是修改后的标题‘);

时间: 2024-11-04 16:13:27

jquery提示插件qtip2使用(全面)的相关文章

Jquery 提示插件

jQuery信息提示工具 官方地址:http://www.sharejs.com/code/jquery/plugin/poshytip-1.0/demo/index.html Demo中提供了三种使用的例子,页面代码如下:  <p>1.<a id="tip1" title="嗨..这里有个工具提示条!" href="#">鼠标滑上这里看看</a></p> <br/> <p>

jQuery提示插件alertify使用指南!

jQuery提示插件alertify使用指南 alertifyjs是一个非侵入式,可定制的JavaScript通知组件.包括可定制的对话框,和右下角消息弹出框.完全可定制的警报,确认和提示对话框.完全自定义的通知系统.回调参数处理包括"确定"和"取消"按钮的点击.允许对话框排队 1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文件 主要使用三个文件,两

jquery 提示插件 cluetip

jquery的 插件cluetip, 地址下载是:plugins.learningjquery.com/cluetip/demo/ 下面简单讲解下用法: 1 首先当然要放JQUERY的基本JS,和这个插件的JS了,如: <a class="title" href="#" title="This is the title|The first set of contents comes after the first delimiter..... $('

自己写的一个简单的jQuery提示插件

代码: /** * 2014年11月13日 * 提示插件 */ (function ($) { $.fn.tips = function (text) { var divtipsstyle = "position: absolute; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height:20px; "; $

jQuery提示插件alertify使用指南

alertifyjs是一个非侵入式,可定制的JavaScript通知组件.包括可定制的对话框,和右下角消息弹出框.完全可定制的警报,确认和提示对话框.完全自定义的通知系统.回调参数处理包括“确定“和”取消“按钮的点击.允许对话框排队 1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文件 主要使用三个文件,两个css(alertify.core.css,alertify.defaul

漂亮灵活设置的jquery通知提示插件toastr

toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成JS,非常的方便使用.jQ酷的另外一款jquery提示插件也不错:jQuery自定义工具提示插件DarkTooltip. 使用方法: 引入核心文件 1 2 3 <link href="toastr.css" rel="stylesheet" type="

我的第三个jquery插件——promptForK13内容提示插件

jQuery提示插件,默认css样式使用了css3属性,所以最好在火狐或谷歌等标准浏览器下浏览.可自定义提示框结构及样式. 下载 可设参数: "addID": "", //追加ID,方便自定义控制    "addClass": "", //追加class,方便自定义控制    "dom": "", //自定义dom结构                //最外面的元素必须以.prompt_

jQuery打造智能提示插件二(可编辑下拉框)

在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// <reference path="jquery-autocomplete2.0.js" /> zhangs 20140516 */ (function($) { $.fn.combox = function(options) { var KEY = { UP: 38, DOW

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

原文:从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零