jQuery插件之-Poshy Tip
jQuery插件Poshy Tip是一个强大的jQuery Tooltips插件,它有多种不同的外观。同时可以作为 Form Tooltips使用,并且可以自定义气泡出现的位置。在处理表单验证提示上能带来更好的浏览体验,已经减少自己编写的代码量。
先来个截图:

Poshy Tip
插件拥有的参数:
- // default settings
- $.fn.poshytip.defaults = {
- content: '[title]', // content to display ('[title]', 'string', element, function(updateCallback){...}, jQuery)
- className: 'tip-yellow', // class for the tips
- bgImageFrameSize: 10, // size in pixels for the background-image (if set in CSS) frame around the inner content of the tip
- showTimeout: 500, // timeout before showing the tip (in milliseconds 1000 == 1 second)
- hideTimeout: 100, // timeout before hiding the tip
- showOn: 'hover', // handler for showing the tip ('hover', 'focus', 'none') - use 'none' to trigger it manually
- alignTo: 'cursor', // align/position the tip relative to ('cursor', 'target')
- alignX: 'right', // horizontal alignment for the tip relative to the mouse cursor or the target element
- // ('right', 'center', 'left', 'inner-left', 'inner-right') - 'inner-*' matter if alignTo:'target'
- alignY: 'top', // vertical alignment for the tip relative to the mouse cursor or the target element
- // ('bottom', 'center', 'top', 'inner-bottom', 'inner-top') - 'inner-*' matter if alignTo:'target'
- offsetX: -22, // offset X pixels from the default position - doesn't matter if alignX:'center'
- offsetY: 18, // offset Y pixels from the default position - doesn't matter if alignY:'center'
- allowTipHover: true, // allow hovering the tip without hiding it onmouseout of the target - matters only if showOn:'hover'
- followCursor: false, // if the tip should follow the cursor - matters only if showOn:'hover' and alignTo:'cursor'
- fade: true, // use fade animation
- slide: true, // use slide animation
- slideOffset: 8, // slide animation offset
- showAniDuration: 300, // show animation duration - set to 0 if you don't want show animation
- hideAniDuration: 300 // hide animation duration - set to 0 if you don't want hide animation
- };
注意事项:
jQuery版本要求1.4+
插件兼容 IE6+, FF 2+, Opera 9+, Safari 3+, Chrome
tooltip 的DIV容器支持在IE6中使用min/max-width(只限于px像素值),可以不用特意为IE6做hack
当使用图片来作为容器背景的时候,脚本将自动忽略background-color/padding/border属性的设置,并围绕背景图片创建tooltip 容器
PNG背景图片在IE6中不被支持(只有GIF支持),如果将一个PNG图片设为背景图片,在IE6中将自动用background-color/padding/border属性来替换掉图片背景
jQuery插件之-Poshy Tip的更多相关文章
- jQuery Plugin Poshy Tip 使用 统一提示信息
项目到了后期,发现前端的提示信息不统一,解决思路如下: 1.回顾系统中tip出现的场景:表单验证提示信息.数据列表中随填随显 2.确定问题域:多条提示信息层叠.信息显示风格不统一 3.结论:找出一款合 ...
- 自己动手写jQuery插件---Tip(提示框)
对jQuery相信很多同学和我一样平时都是拿来主义,没办法,要怪只能怪jQuery太火了,各种插件基本能满足平时的要求.但是这毕竟不是长久之道,古人云:“授之以鱼,不如授之以渔”. 为了方便之前没有接 ...
- jquery插件之poshytip
Poshy Tip 是一个强大的jQuery 工具提示插件,拥有不同的外观.作为 Form Tooltips使用时,可以自定义气泡出现的位置. 导入插件: <script type=" ...
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
- 常用Jquery插件整理
虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...
- jquery插件库
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...
- 常用JQuery插件
虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...
- 全屏滚动-jQuery插件实现
全屏滚动 <---很久没写了,这段忙了点,以后还是每周尽量写点东西---> 在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1. ...
- 强烈推荐240多个jQuery插件提供下载
jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是—写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的 ...
随机推荐
- 责任链模式(Chain of Responsibility Pattern)
责任链模式:可以为某个请求创建一个对象链.每个对象依序检查此请求,并对其处理,或者把它传给链中的下一个对象. 责任链上的对象负责处理请求,客户只需要将请求发送到责任链上即可,无需关心处理的细节和请求的 ...
- 24种设计模式--访问者模式【Visitor Pattern】
今天天气不错,绝对是晴空万里,骄阳似火呀,好,我们今天来讲访问者模式,我们在前面讲了组合模式和迭代器模式,通过组合模式我们能够把一个公司的人员组织机构树搭建起来,给管理带来非常大的便利,通过迭代器模式 ...
- HTML5的离线储存
在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件. 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技 ...
- Keil 4 与Proteus 7.8联调
实验环境: windows 8.1 pro with Keil 4 and Proteus 7.8 both cracked. 步骤: 下载联调工具Vdmagdi,安装. keil下Option/De ...
- json 筛选数据 $.grep过滤数据
var data = { status: "ok", image_size_list: [ { image_size_id: "22", ad_class: & ...
- sprintf函数php的详细使用方法
PHP sprintf() 函数 先说下为什么要写这个函数的前言,这个是我在微信二次开发的一个token验证文档也就是示例文档看到的一个函数,当时非常不理解,于是查了百度,但是很多结果都很笼统,结果也 ...
- jquery垂直公告滚动实现代码
公告滚动想必大家都有见到过吧,实现方法也有很多,下面为大家介绍使用jquery实现垂直公告滚动,感兴趣的朋友不要错过 复制代码代码如下: <!DOCTYPE html PUBLIC " ...
- tableView -- tips
1. 如果发现TableView的第一个sectionHeader不显示, 那么可以断定, 你没有用代理方法来设置 sectionHeader的高度! #pragma mark - delegate ...
- bug - colorWithPatternImage:
// 在ios5之前, 再通过以下方法设置背景时, 有闪屏bug self.view.backgroundColor = [UIColor colorWithPatternImage:<#(no ...
- jersey post提交到 ContainerRequestFilter 而HttpServletRequest获取不到数据(转)
jersey post提交到 ContainerRequestFilter 而HttpServletRequest获取不到数据 问题:在serverfilter request获取不到post提交的 ...