基于jQuery的tooltips插件--poshytip

摘要:
摘要:共享项目中使用的工具提示插件——poshytip,这是一个基于jQuery的插件。它易于使用,支持浏览器:IE6+、FF2+、Opera 9+、Safari 3+和Chrome,并且有一个带有六种皮肤的提示框。安装:下载poshytip插件,解压缩它,将文件夹src复制到项目中,然后导入js和css文件。1<linkrel=“stylesheet”href=“。
摘要:

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

基于jQuery的tooltips插件--poshytip第1张基于jQuery的tooltips插件--poshytip第2张基于jQuery的tooltips插件--poshytip第3张

基于jQuery的tooltips插件--poshytip第4张基于jQuery的tooltips插件--poshytip第5张基于jQuery的tooltips插件--poshytip第6张

基于jQuery的tooltips插件--poshytip第7张

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文件引入。

表单提示:

  基于jQuery的tooltips插件--poshytip第8张

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设置提示框的classString

$('#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上时,不隐藏tipBoolean$('#demo').poshytip({
  allowTipHover: true
});
followCursor提示跟随光标移动Boolean$('#demo').poshytip({
  followCursor: true
});
fade使用fade动画Boolean$('#demo').poshytip({
  fade: true
});
slide使用slide动画Boolean

$('#demo').poshytip({
  slide: true
});

slideOffsetslide动画相抵消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')彻底销毁提示框
 小结:

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

免责声明:文章转载自《基于jQuery的tooltips插件--poshytip》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇dpdk 网卡顺序Python脚本获取参数的方式下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

jQuery积累:serialize()、stringify()、toJSON()

*)表单serialize()序列化,和serializeArray() ##)应用场景 当Ajax或者get请求发送表单中的某一个,或者某几个值到后台时,通过jQuery就能获取到这些值。然后作为Ajax的参数(或者get请求的 ? 后的参数)发送到后台。 但是,当需要发送整个表单的数据到后台时,表单如果小还好说,表单如果大,有很多的值,那一个一个获取就...

第二百二十七节,jQuery EasyUI,ComboTree(树型下拉框)组件

jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个组件依赖于Combo(下拉框) 和 Tree(树)组件。 一.加载方式 class 加载方式 <select id="cc"class="easy...

jQuery中hover()的事件委托

事件委托:事件在页面加载之前,或者在事件之后追加的元素,需要用的事件委托 on() 方法在被选元素及子元素上添加一个或多个事件处理程序。 自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。 注意:使...

详细讲解jquery带进度上传插件Uploadify(ASP.NET版本)使用

本文将带给大家很帅的jquery上传插件,ASP.NET版本的哦,这个插件是Uploadify实现的效果非常不错,带进度显示。首先到Uploadify官方下载这个插件:官方下载 官方文档 官方演示 好,下载好之后,按下面的步骤来实现一个简单的上传功能。1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中。2...

jQuery缓存数据

很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如 1 2 3 4 <div data="some data">Test</div> <script> div.getAttribute('data');// some data </script> 给页面中div添加了自定义...

jQuery 1.9升级指南

http://www.css88.com/archives/5086 原文地址:http://jquery.com/upgrade-guide/1.9/翻译的不对或者不通顺的地方欢迎拍砖留言。 概述 jQuery 1.9删除或修改了几个过去行为不一致或效率低下的几个API。他们在以前的jQuery版本中已经标注过过时(deprecated)的API,特别是...