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‘,‘这里是修改后的标题‘);

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。