存档

‘JavaScript’ 分类的存档

jQuery Plugin Poshy Tip 使用

2012年7月12日 没有评论

项目到了后期,发现前端的提示信息不统一,解决思路如下:

1.回顾系统中tip出现的场景:表单验证提示信息、数据列表中随填随显

2.确定问题域:多条提示信息层叠、信息显示风格不统一

3.结论:找出一款合适的tip插件进行整合快速的响应项目的需要

google关键词:jquery tooltip,检索了好多tip插件,最终选择了Poshy Tip,理由如下:

1.多种不同的外观。

2.同时可以作为 Form Tooltips使用

3.可以自定义气泡出现的位置

先来一个直观的认识:

Poshy Tip

Poshy Tip tooltip jquery

详细的参数说明如下:


$.fn.poshytip.defaults = {

// 提示内容默认为元素的标题,可以使指定的字符串、元素、回调函数、jquery对象

content:'[title]',

// 指定的tips class样式

className:'tip-yellow',

//按照像素计算背景图片和显示内容的内边距

bgImageFrameSize:10,

showTimeout:500,// 延时多久开始显示

hideTimeout:100,// 延时多久开始隐藏

timeOnScreen:0,// 自动隐藏之前延时多久

//显示方式 支持'hover'鼠标划入、'focus' 获取焦点、'none'手动显式调用

showOn:'hover',

liveEvents:false,// 支持live  事件  同样可以对未来元素进行影响

alignTo:'cursor',// 和谁进行对齐 ('cursor' 鼠标, 'target' 目标元素)

// 水平方向对齐方式 可选参数:

//('right', 'center', 'left', 'inner-left', 'inner-right')

alignX:'right',

// 垂直方向对齐方式 可选参数:

//('bottom', 'center', 'top', 'inner-bottom', 'inner-top')

alignY:'top',

offsetX:-22,// 水平偏移量

offsetY:18,// 垂直方向偏移量

//hover显示方式下,允许鼠标离开元素仍然显示提示信息

allowTipHover:true,

// 提示信息随着鼠标移动  只在满足hover显示方式下,对齐方式为alignTo:'cursor' 才有效

followCursor:false,

fade:true,// 使用动画

slide:true,// 使用slie效果

slideOffset:8,// slide 动画的偏移量

// 动画显示的时间间隔 如果不想动画效果,设置为0即可

showAniDuration:300,

// 动画隐藏的时间间隔 如果不想动画效果,设置为0即可

hideAniDuration:300

};

核心方法


.poshytip('show')    手动显示tip

.poshytip('hide')    手动隐藏tip

.poshytip('update', content, [ dontOverwriteOption ] )  手动更新tip

.poshytip('disable')  tip不可用

.poshytip('enable')   tip可用

.poshytip('destroy')  销毁tip

官方网址:

http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/