现在位置首页 / 前端开发 /正文

jquery 简单易用的提示消息插件:poshytip使用及demo

作者: IT小兵 | 2014年12月29日| 热度:℃ | 评论: |参与:

[jquery message tooltip告警提示信息展示控件]介绍了一个消息提示框,今天分享一个简单易用的消息提示插件:poshytip。这是一款基于jQuery的插件,其特点是简单易用,支持浏览器:IE6+, FF 2+, Opera 9+, Safari 3+, Chrome,并且带有六种皮肤的提示框。

项目地址:http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/ 

demo效果图:

使用步骤:

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

<link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />
 <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
  <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,前者是未压缩版,如果在开发中出现错误可以引用这个调试,开发完之后线上引用后者压缩版的。

2、html及调用:

<a id="demo" title="Hey, there! This is a tooltip." href="#">
 <script>
 $('#demo').poshytip();
 </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文件引入。

表单提示:

  

$('#demo-form-name').poshytip({
    className: 'tip-yellowsimple',
    showOn: 'focus',
    alignTo: 'target',
    alignX: 'right',
    alignY: 'center',
    offsetX: 5,
    showTimeout: 100
});



配置参数:

  类型(时间单位为毫秒)示例
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')彻底销毁提示框

 小结:

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

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询