摘要:

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

Install:

  下载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,前者是未压缩版,如果在开发中出现错误可以引用这个调试,开发完之后线上引用后者压缩版的。

Demos:

 <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 设置提示框的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') 彻底销毁提示框

小结:

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

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

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

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  2. 基于jQuery头像裁剪插件cropbox

    今天给大家分享一款基于jQuery头像裁剪插件cropbox,这是一款简单实用的jQuery头像在线裁剪插件.该插件适用于适用浏览器:IE8.360.FireFox.Chrome.Safari.Ope ...

  3. 基于jQuery的用户界面插件集合---EasyUI

    easyui是一种基于jQuery的用户界面插件集合.为创建现代化,互动,JavaScript应用程序,提供必要的功能.使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以 ...

  4. 一款基于jQuery的分页插件

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  5. 基于Jquery、JqueryUI插件编写

    刚开始编写jquery插件的时候,只是从网上找个模板看着写,并不理解.刚刚仔细把官网的API看了下,突然觉得豁然开朗了.马上放假了想着应该整理整理不然忘了又. How to create a Jque ...

  6. 基于jquery 的分页插件,前端实现假分页效果

    上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...

  7. 基于jQuery的自定义插件:实现整屏分页转换的功能

    动态创建jQuery插件 一.实现功能: 1.基本功能:自适应式整屏分页功能的实现 2.通过鼠标点击标签页转换分页,支持键盘上下左右键的转换分页,同样支持 鼠标滚轮上下滑动转换分页 3.切屏时的动画效 ...

  8. 自编基于jQuery实现分页插件

    $(function(){ }); /** * @params dataUrl:请求数据url地址 * @params countUrl:请求数据总数url地址 * @params pageSize: ...

  9. 基于jQuery的日历插件

    上个星期看到同事做一个有关日历提醒功能的需求,为了找个插件也是费了不少心思,然后刚好有时间就试着写了一个简单demo 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制 ...

随机推荐

  1. 记录 dts 里面添加 SD cd

    很多设备树一开始 SD 卡选项并未添加 SD 卡触发 // dts 741 &mmc1 { 742 vmmc-supply = <&vmmcsd_fixed>; 743 s ...

  2. python 全局变量的使用

    我尝试使用 类似 C 语言的方式去调用 python 的全局变量,发现不行,后经过 尝试,要使用 global 进行调用 test_num = 0; # 首先声明一个全局变量 def test_fun ...

  3. python入门-分类和回归各种初级算法

    引自:http://www.cnblogs.com/taichu/p/5251332.html ########################### #说明: # 撰写本文的原因是,笔者在研究博文“ ...

  4. es 剩余磁盘空间达到es最小值,添加数据被block

    剩余磁盘空间达到es最小值,添加数据被block PUT _all/_settings {"index.blocks.read_only_allow_delete": null} ...

  5. Java知多少(17)强调一下编程风格

    讲完了Java的基础语法,大家就可以编写简单的程序代码了,这里有必要强调一下编程风格. 代码风格虽然不影响程序的运行,但对程序的可读性却非常重要.自己编写的程序要让别人看懂,首先在排版方面要非常注意. ...

  6. JSONObject遍历获取键值方法合并两个JSONObject

    JSONObject obj1= new JSONObject(); try { obj1.put("obj1_data", obj1_data); if (null != obj ...

  7. Qt QTcpSocket 对连接服务器中断的不同情况进行判定

    简述 对于一个C/S结构的程序,客户端有些时候需要实时得知与服务器的连接状态.而对于客户端与服务器断开连接的因素很多,现在就目前遇到的情况进行一下总结. 分为下面六种不同情况 客户端网线断开 客户端网 ...

  8. 自然语言交流系统 phxnet团队 创新实训 个人博客 (七)

    使用Lucene 3.0.0的结构遍历TokenStream的内容. 以前版本的Lucene是用TokenStream.next()来遍历TokenStream的内容, 目前的版本稍微修改了一下, 使 ...

  9. C++ 面向对象 类成员函数this指针

    每个类成员函数都只涉及一个对象, 即调用它的对象. 但有时候方法可能涉及到两个对象, 在这种情况下需要使用C++ 的 this 指针 假设将方法命名为topval(), 则函数调用stock1.top ...

  10. 【Python】Python加lxml实现图片解析下载功能

    1.下载网页:OpenHtml.py import urllib.request from urllib.parse import quote class HtmlLoader(object): de ...