基于jQuery的tooltips插件--poshytip

摘要:

  分享一款在项目中使用的tooltips插件--poshytip,这是一款基于jQuery的插件,其特点是简单易用,支持浏览器:IE6+, FF 2+, Opera 9+, Safari 3+, Chrome,并且带有六种皮肤的提示框

Install:

  下载poshytip插件,解压之后将文件夹src拷贝到项目中,然后引入js和css文件。

1 <link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />
2 <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
3 <script type="text/javascript" src="../src/jquery.poshytip.min.js"></script>

注意:文件夹中包含所有样式,只需引自己需要的样式,此处引用的是tip-yellow.css。poshytip是基于jQuery的插件,所以在引用插件之前先引用jQuery,版本需要在1.4+。poshytip包含两个js文件jquery.poshytip.js和jquery.poshytip.min.js,前者是未压缩版,如果在开发中出现错误可以引用这个调试,开发完之后线上引用后者压缩版的。

Demos:

1 <a id="demo" title="Hey, there! This is a tooltip." href="#">
2 <script>
3 $(‘#demo‘).poshytip();
4 </script>

如果没有设置poshytip的content,那么它就会将元素的title值作为提示信息。

设置不同皮肤的提示框

$(‘#demo‘).poshytip({
  className: ‘‘
});

设置className值来定义皮肤,缺省状态是tip-yellow。取值:tip-yellow,tip-violet,tip-darkgray,tip-skyblue,tip-yellowsimple,tip-twitter,tip-green

注意:设置className同时应将对应的css文件引入。

表单提示:

  

1 $(‘#demo-form-name‘).poshytip({
2     className: ‘tip-yellowsimple‘,
3     showOn: ‘focus‘,
4     alignTo: ‘target‘,
5     alignX: ‘right‘,
6     alignY: ‘center‘,
7     offsetX: 5,
8     showTimeout: 100
9 });

配置参数:

    类型(时间单位为毫秒) 示例
content 显示的内容(缺省取值title) String, DOM element, Function, jQuery
$(‘#demo‘).poshytip({
  content: ‘Hey, there! This is a tooltip.‘
});

className 设置提示框的class String
$(‘#demo‘).poshytip({
  className: ‘tip-yellow‘
});

bgImageFrameSize 提示框背景图片的大小 Number
$(‘#demo‘).poshytip({
  className: ‘tip-violet‘,
  bgImageFrameSize: 9
});

showTimeout 延迟显示时间 Number
$(‘#demo‘).poshytip({
  className: ‘tip-violet‘,
  bgImageFrameSize: 9,
  showTimeout: 50
});

hideTimeout 延迟消失时间 Number
$(‘#demo‘).poshytip({
  className: ‘tip-violet‘,
  bgImageFrameSize: 9,
  hideTimeout: 50
});

timeOnScreen 自动隐藏之前显示多长时间 Number
$(‘#demo‘).poshytip({
  className: ‘tip-violet‘,
  bgImageFrameSize: 9,
  timeOnScreen: 1000
});

//当元素获取到焦点时,提示框显示1秒之后自动隐藏

showOn 触发何种事件显示提示框 String(‘hover‘, ‘focus‘, ‘none‘)
$(‘#demo‘).poshytip({
  showOn: ‘focus‘
});

//当获取焦点时显示提示

liveEvents      
alignTo 设置箭头位置 String(‘cursor‘, ‘target‘)
$(‘#demo‘).poshytip({
  alignTo: ‘cursor‘
});

//设置箭头位置相对于鼠标位置

alignX 水平对齐相对于鼠标光标或目标元素 String( ‘right‘, ‘center‘, ‘left‘, ‘inner-left‘, ‘inner-right‘) $(‘#demo‘).poshytip({
  alignX: ‘center‘
});
alignY 垂直对齐相对于鼠标光标或目标元素 String( ‘bottom‘, ‘center‘, ‘top‘, ‘inner-bottom‘, ‘inner-top‘) $(‘#demo‘).poshytip({
  alignY: ‘center‘
});
offsetX 设置提示框横向偏移 Number $(‘#demo‘).poshytip({
  offsetX: 10
});
offsetY 设置提示框纵向偏移 Number $(‘#demo‘).poshytip({
  offsetY: 10
});
keepInViewport 设置提示始终显示在窗口 Boolean $(‘#demo‘).poshytip({
  keepInViewport: true
});
allowTipHover 当鼠标悬在tip上时,不隐藏tip Boolean $(‘#demo‘).poshytip({
  allowTipHover: true
});
followCursor 提示跟随光标移动 Boolean $(‘#demo‘).poshytip({
  followCursor: true
});
fade 使用fade动画 Boolean $(‘#demo‘).poshytip({
  fade: true
});
slide 使用slide动画 Boolean
$(‘#demo‘).poshytip({
  slide: true
});

slideOffset slide动画相抵消 Number $(‘#demo‘).poshytip({
  slideOffset: 1000
});
showAniDuration 显示动画时长 Number $(‘#demo‘).poshytip({
  showAniDuration: 1000
});
hideAniDuration 隐藏动画的持续时间 Number $(‘#demo‘).poshytip({
  hideAniDuration: 1000
});
refreshAniDuration 异步更新提示时,动画的持续时间 Number $(‘#demo‘).poshytip({
  refreshAniDuration: 1000
});

方法:

.poshytip(‘show‘) 显示提示框,前提提示框的alignTo参数被设置为‘target‘
.poshytip(‘showDelayed‘, [ timeout ] ) 设置显示提示框延迟时间
.poshytip(‘hide‘) 隐藏提示框
.poshytip(‘hideDelayed‘, [ timeout ] ) 设置隐藏提示框延迟时间
.poshytip(‘update‘, content, [ dontOverwriteOption ] ) 更新提示框内容
.poshytip(‘disable‘) 禁用提示框
.poshytip(‘enable‘) 启用提示框
.poshytip(‘destroy‘) 彻底销毁提示框

小结:

  提示无处不在,更多的提示才能帮助用户轻松的使用产品,不管是表单注册提示、错误提示等等。希望你能够喜欢这款提示插件。

时间: 2024-10-05 05:20:55

基于jQuery的tooltips插件--poshytip的相关文章

基于jQuery的滚动条插件-jquery.jscrollbar

jquery.jscrollbar 是一个基于jQuery的滚动条插件,支持水平滚动条和垂直滚动条,支持鼠标键盘事件 主要功能 支持水平滚动条 支持垂直滚动条 自动判断水平滚动条和垂直滚动条是否显示 支持外部调用来滚动内容 支持滚动条部分样式自定义 支持键盘方向键控制 支持鼠标滚动(需要mousewheel插件) 支持滚动条显示位置设置(外部|悬浮) 支持手动更新界面 依赖的库 jQuery (http://jquery.com/) jquery.jqdrag (https://github.c

基于jquery下拉列表树插件代码

分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width="100%" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="1" bgcolor="#FF

一款基于jQuery的分页插件

特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/ 1.效果示例 2.代码样式 /* * 基于jquery 分页插件 * by [email protected] */ $(function (){ window.pageUtil = { /** * 构建分页 * @param {Object} divId 要绑定的容器 * @pa

基于jQuery的日历插件

上个星期看到同事做一个有关日历提醒功能的需求,为了找个插件也是费了不少心思,然后刚好有时间就试着写了一个简单demo 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天,需要一个7X6的表格去装载 ·如果知道了某个月份1号是星期几,这个月份有多少天,一个循环就可以显示某个月的日历了吧(眼睛都放光了*.*) ·加上一些控件让用户可以方便操作吧(比如可以输入年份.月份,可以点击选择年份.月份) 新建一个html文件,html结构: <

基于jquery的放大镜插件

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title></head><script src="../jquery-1.8.3.min.js" type="text/javascript"></script>

两款基于Jquery的图表插件

一.EasyPieChart 页面加载时,运行initPieChart()函数,调用easyPieChart()函数,显示出图表. 代码: var initPieChart = function() { $('.percentage').easyPieChart({ animate: 1000 }); $('.percentage-light').easyPieChart({ barColor: function(percent) { percent /= 100; return "rgb(&q

jquery easyui+sparkline插件+jqplot插件实现数据表行内插入线形图

Jquery easyui : 实现前端数据包格式化输出,支持多种模块式定义,只需要添加相应的预设参数即可实现丰富的前端. 资料参考: http://www.jeasyui.com/ Jquery sparkline: 基于jQuery 的js插件,底层调用html5的canvas标签,并通过js动态实现在数据表行内画条形图或趋势图,操作简单,可实现不同类型的图形化,如线形图,饼状图,柱形图. 资料参考:http://omnipotent.net/jquery.sparkline/#s-docs

jquery数字打分插件与嵌入到EasyUI datagrid中的示例

这阵儿是断续折腾定性考评表打分的事儿了.虽是UI菜鸟,但却一直想让用户在操作上更加方便,之前基于"jQuery星级评分插件"实现了一个评分界面(因为比较简单,就不做总结了),用户反应还不错. 这一次的评分表中,各项分值的特点有:一是每个评分项的分值均不太一样:二是分值为整数,但分值范围大,从-1000到+1000都存在.若是采用在datagrid中嵌入编辑框的形式实现的话,总是觉得让用户使用不太方便,所以内心非常想做一个数字插件,然后就搜到中意的例子--"简单的jQuery用

jQuery拖拽插件制作拖拽排序特效

基于jQuery拖拽插件制作拖拽排序特效是一款非常实用的鼠标拖拽布局插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><