jQuery Tooltips插件、Poshy提示 - 时尚工具提示、Poshy提示jQuery插件
1) Poshy Tip 是一个强大的jQuery Tooltips插件,拥有不同的外观。作为 Form Tooltips使用时,可以自定义气泡出现的位置。
演示地址:

Poshy提示 - jQuery插件的时尚工具提示
我几乎听不到你问 - 为什么另一个jQuery的工具提示插件?好吧,其实我从来没有计划创建这个插件,直到我达到了设计这个网站的最后阶段,并决定增加一些漂亮的工具提示。于是我开始寻找一个工具提示插件,允许轻松打造时尚工具提示,还包括这样的脚本最有用的功能。不过,我所以最后我写一个完全新的插件和现在正在做它适用于所有并不满意,我发现的结果。
引入poshytip用到样式文件以及核心库,在引入Easyui核心库之后,引入我修改的plugins目下的validatebox对应的组件:
- <head>
- <meta charset="UTF-8">
- <title>Basic ValidateBox - jQuery EasyUI Demo</title>
- <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
- <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
- <link rel="stylesheet" type="text/css" href="../demo.css">
- <link rel="stylesheet" type="text/css" href="../../poshytip/src/tip-yellowsimple/tip-yellowsimple.css">
- <link rel="stylesheet" type="text/css" href="../../poshytip/src/tip-green/tip-green.css ">
- <link rel="stylesheet" type="text/css" href="../../poshytip/src/tip-darkgray/tip-darkgray.css">
- <link rel="stylesheet" type="text/css" href="../../poshytip/src/tip-skyblue/tip-skyblue.css">
- <link rel="stylesheet" type="text/css" href="../../poshytip/src/tip-twitter/tip-twitter.css">
- <link rel="stylesheet" type="text/css" href="../../poshytip/src/tip-violet/tip-violet.css">
- <link rel="stylesheet" type="text/css" href="../../poshytip/src/tip-yellow/tip-yellow.css">
- <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
- <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
- <script type="text/javascript" src="../../plugins/jquery.validatebox.js"></script>
- <script type="text/javascript" src="../../poshytip/src/jquery.poshytip.min.js"></script>
- <script trpe="text/javascript" src="../../locale/easyui-lang-zh_CN.js"></script>
- </head>
注意以下几点:
- poshytip插件的几个css样式分别对应该插件的几种皮肤,要是只用一个的话,只要引入一个就够了
- 引入plugins目录下的jquery.validatebox.js其实是对核心库对应组件的覆盖定义
- 本次修改是兼容validatebox原有方式的,即引入poshytip则会使用poshytip方式,不引入的话就是用原方式,完全无冲突
- 在easyui的window等组件中使用,poshytip的消息体会被window等遮住,需要改poshytip插件每个皮肤下css文件定义的z-index值,由1000改为9900000
文件下载分享网址:baiduyunguanjia-javascript实例-0000-poshytip插件-工具提示
参数和方法一览表
| 参数/方法 | 描述 |
| content | 提示工具条中的内容,默认是从元素的title属性中获取。 |
| className | 提示工具条的样式 |
| showTimeout | 提示工具条出现前的过渡时间 |
| hideTimeout | 提示工具条消失的过渡时间 |
| showOn | 提示工具条触发方式,有'hover', 'focus', 'none'三种方式 |
| alignX | 提示工具条出现在水平方向相对当前元素的位置,有'right', 'center', 'left', 'inner-left', 'inner-right' |
| alignY | 提示工具条出现在垂直方向相对当前元素的位置,有'bottom', 'center', 'top', 'inner-bottom', 'inner-top' |
| offsetX | 相对X方向位移,数字 |
| offsetY | 相对Y方向位移,数字 |
| hideTimeout | 工具条消失的过渡时间 |
| hideTimeout | 工具条消失的过渡时间 |
| hideTimeout | 工具条消失的过渡时间 |
| offsetY | 相对Y方向位移,数字 |
| allowTipHover | 允许鼠标滑向工具条上方 |
| fade | 是否使用渐隐渐显动画,true/false |
| slide | 是否使用滑动动画,true/false |
| 方法:show | .poshytip('show'),手动触发显示提示工具条 |
| 方法:hide | .poshytip('hide'),手动触发隐藏提示工具条 |
| 方法:disable | .poshytip('disable'),手动触发禁用提示工具条 |
| 方法:enable | .poshytip('enable'),手动触发启用提示工具条 |
英文插件说明

插件拥有的方法:


效果还可以查看:http://localhost/response/seejs_index.html
第二种方式为:Poshy提示jQuery插件

Poshy提示 - 时尚工具提示的jQuery插件:http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/
Poshy提示演示例子:http://vadikom.com/demos/poshytip/
原文运用过:D:\www\fenzhidao\admin\js\jquery.poshytip.js
标签页
浙公网安备 33010602011771号