jQuery提示插件PoshyTip使用详解

时间：2013-05-20 编辑：简简单单来源：一聚教程网

Demo中提供了三种使用的例子，页面代码如下：

代码如下

复制代码

2、用户名：

jQuery
1、基本使用：

代码如下	复制代码
$("#tip1").poshytip();

2、表单提示：当输入框获得焦点时，在右侧会出现提示工具条

代码如下	复制代码
$('#user').poshytip({ className: 'tip-yellowsimple', showOn: 'focus', alignTo: 'target', alignX: 'right', alignY: 'center', offsetX: 5 });

3、服务端调用：通过调用服务端ajax.php，获得返回数据

代码如下	复制代码
$('#remote').poshytip({ alignY: 'bottom', content: function(updateCallback) { $.get('ajax.php?id=1',function(msg){ updateCallback(msg); }); return 'Loading...'; } });

官网的一些效果介绍

Usage Examples

The default browser tooltip that displays the value of the title attribute is replaced with a "poshier" version:

Hover for a tooltip

View plain code

代码如下	复制代码
$('#demo-basic').poshytip();

Styles (Classes)

Using different tooltip classes is easy. Here are some examples that are included in the download package (in the "src" folder).

.tip-yellow

View plain code

代码如下	复制代码
$('#demo-tip-yellow').poshytip();

.tip-violet

View plain code

代码如下

复制代码

$('#demo-tip-violet').poshytip({ className: 'tip-violet', bgImageFrameSize: 9 });

.tip-darkgray

View plain code

代码如下	复制代码
$('#demo-tip-darkgray').poshytip({ className: 'tip-darkgray', bgImageFrameSize: 11, offsetX: -25 });

.tip-skyblue

View plain code

代码如下	复制代码
$('#demo-tip-skyblue').poshytip({ className: 'tip-skyblue', bgImageFrameSize: 9, offsetX: 0, offsetY: 20 });

.tip-yellowsimple (no background-image used for the tooltip body)

View plain code

代码如下	复制代码
$('#demo-tip-yellowsimple').poshytip({ className: 'tip-yellowsimple', showTimeout: 1, alignTo: 'target', alignX: 'center', offsetY: 5, allowTipHover: false });

.tip-twitter (ala Twitter)

View plain code

代码如下	复制代码
$('#demo-tip-twitter').poshytip({ className: 'tip-twitter', showTimeout: 1, alignTo: 'target', alignX: 'center', offsetY: 5, allowTipHover: false, fade: false, slide: false });

.tip-green

View plain code

代码如下	复制代码
$('#demo-tip-green').poshytip({ className: 'tip-green', offsetX: -7, offsetY: 16, allowTipHover: false });

Form Tooltips (with varying positioning)

Adding form input field tooltips is simple. You just have to make sure they are triggered on focus/blur (i.e. showOn: 'focus') and positioned relatively to the target element (i.e. alignTo: 'target'). The script also updates the position of such tooltips if the window is resized (e.g. show some of the tips below and resize your browser window for a demo).

Name:

View plain code

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

Email:

View plain code

代码如下	复制代码
$('#demo-form-email').poshytip({ className: 'tip-yellowsimple', showOn: 'focus', alignTo: 'target', alignX: 'left', alignY: 'center', offsetX: 5, showTimeout: 100 });

Site:

View plain code

代码如下

复制代码

$('#demo-form-site').poshytip({ className: 'tip-yellowsimple', showOn: 'focus', alignTo: 'target', alignX: 'inner-left', offsetX: 0, offsetY: 5, showTimeout: 100 });

Subject:

代码如下	复制代码
$('#demo-form-subject').poshytip({ className: 'tip-yellowsimple', showOn: 'focus', alignTo: 'target', alignX: 'center', alignY: 'bottom', offsetX: 0, offsetY: 5, showTimeout: 100 });

Asynchronous Loading of the Content

Poshy Tip supports using a function for returning the tooltip content and the script also passes an update callback function as an argument to this function. By using this callback, you can easily update asynchronously the content of the tooltip after it has been displayed. The script also recalculates and updates the position of the tooltip when its content is updated.

Simple Example

Update content after 1 second

代码如下

复制代码

$('#demo-async-timeout').poshytip({
content: function(updateCallback) {
window.setTimeout(function() {
updateCallback('Tooltip content updated!'); }, 1000);
return 'Loading...'; } }
);

jQuery

提示插件PoshyTip下载地址:http://file.111com.net/download/2013/05/20/poshytip-1.1.zip

上一个： Javascript获取HTML静态页面参数传递值
下一个： js关闭浏览器窗口不提示代码

JavaScript和jQuery制作光棒效果 04-28
jquery Layer(弹窗/tips/confirm)插件使用教程 06-24
jquery poshytip消息提示插件使用 01-01
jquery消息插件tooltip告警提示信息应用例子 07-21
jquery与javascript常用代码片段整理 02-24
基于jquery tips提示效果 10-27

推荐专题

最新下载

热门教程

jQuery提示插件PoshyTip使用详解

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程