不得不爱开源 Wijmo jQuery 插件集（13）-【Tooltip】(附页面展示和源码)

Wijmo Tooltip 可以给你的网站添加动感十足的提示信息，给您的最终用户完美的工具提示！在上一篇文章中我们，给大家介绍了 Wijmo -列表插件的特性及使用方法。感谢园子中朋友的支持，朋友们的支持给我们写这一系列文章提供了很大的动力。在这篇文章中我们将介绍 Wijmo Tooltip 的特性及使用方法。Wijmo Tooltip即为 jQuery 中的工具提示插件。

如果你是第一次看本系列文章，那么还可以参考本系列的其他几篇文章，相信会给你带来更多惊喜：

不得不爱开源 Wijmo jQuery 插件集（1）-【开篇】(附演示和源码)
不得不爱开源 Wijmo jQuery 插件集（2）-【准备工作】(附30种Theme演示和源码)
不得不爱开源 Wijmo jQuery 插件集（3）-【Menu】(附页面展示和源码)
不得不爱开源 Wijmo jQuery 插件集（4）-【手风琴效果】(附页面展示和源码)
不得不爱开源 Wijmo jQuery 插件集（5）-【对话框】(附页面展示和源码)
不得不爱开源 Wijmo jQuery 插件集（6）-【Popup】(附页面展示和源码)
不得不爱开源 Wijmo jQuery 插件集（7）-【进度条】(附页面展示和源码)
不得不爱开源 Wijmo jQuery 插件集（8）-【滑动条】(附页面展示和源码)
不得不爱开源 Wijmo jQuery 插件集（9）-【日历】(附页面展示和源码)
不得不爱开源 Wijmo jQuery 插件集（10）-【Expander】(附页面展示和源码)
不得不爱开源 Wijmo jQuery 插件集（11）-【Spilter】(附页面展示和源码)
不得不爱开源 Wijmo jQuery 插件集（12）-【List】(附页面展示和源码)

看看 wijtootip 给我们带来了哪些惊喜？(鼠标 hover 图片查看效果)

建立你的第一个 Wijmo jQuery Menu:

HTML 标签：

<input title="tooltip1" type="text" />

<div id="targetContainer">

<div>

<input title="I am a unique and special tooltip!" type="text" />

</div>

jQuery 脚本：

<script id="scriptInit" type="text/javascript">

$(document).ready(function () {

$("[title]").wijtooltip();

});

</script>

特性

可定制外观

wijtooltip 通过 <div> 标签来实现，所以我们可以任意定制 div 的字体、边框和背景等 CSS 演示。

可定制触发器

可以定制显示 tooltip 的事件：hover，Click，right-click，focus 等等随心选择。

模式选择

通过设置 modal 为 true，来创建独占模式的 tooltip，直到 tooltip 消失，才可以操作其他元素。

可定制显示位置

使用 position 选项来控制 tooltip 的显示位置。

Ajax 异步内容请求

通过 OnAjaxUpdate 事件异步从后台获取 tooltip 内容。

CSS支持

你可以使用这一种级联样式表（CSS）的样式来定义自定义皮肤。有了CSS支持，你可以使该扩展器与你的组织标准相匹配。

最后，和大家分享一些 Wijmo 资源：

1.源码下载（包含以上特性）:Wijmo-Tooltip.zip

2.更多信息请参考：Wijmo 中文网站：http://www.gcpowertools.com.cn/products/c1_asp_overview.htm

3.开源Wijmo jQuery 讨论社区： http://gcdn.grapecity.com/index.aspx

wijlist API 介绍：(点击隐藏 API)

Options

ajaxCallback

Remarks:

在 AJAX 的 complete 回调方法中，用户可以使用 callback data 设置 tooltip 内容。

Type: Function

Default: false

Code Example:

$(".selector").wijtooltip("option", "ajaxCallback", function(){})

animation

Type: Object

Default: {animated: "fade", duration: 500, easing: null}

Code Example:

$(".selector").wijtooltip("option", "animation", {animated: "fade", duration: 400, easing: null})

calloutAnimation

Remarks:

object 类型，如: {duration:100,easing:'swing'}.

Type: Object

Default: {}

Code Example:

$(".selector").wijtooltip("option","calloutAnimation",{duration:200})

calloutFilled

Type: Boolean

Default: true

Code Example:

$(".selector").wijtooltip("option","calloutFilled",true)

closeBehavior

Type: String

Default: auto

Code Example:

$(".selector").wijtooltip("option","closeBehavior","auto")

content

Remarks:

可以为方法或 HTML 标记，如果为方法，tooltip 内容为方法的返回值。

Type: String or Function

Default:

Code Example:

$(".selector").wijtooltip("option","content","my content")

group

Type: String

Default: null

Code Example:

$(".selector").wijtooltip("option","group","A")

hideAnimation

Remarks: object 类型，如 showAnimation 属性。

Type: Object

Default: {}

Code Example:

$(".selector").wijtooltip("option","hideAnimation",{animated:'fade',duration:500})

hideDelay

Type: Number

Default: 0

Code Example:

$(".selector").wijtooltip("option","hideDelay",200)

mouseTrailing

Type: Boolean

Default: false

Code Example:

$(".selector").wijtooltip("option","mouseTrailing",false)

position

Type: Object

Default: auto

Code Example:

$(".selector").wijtooltip("option","position",{my: 'left bottom',at: 'right top',offset: '0 0'})

showAnimation

Remarks:

object 类型。预设值有： 'animated', 'duration',，和 'easing'.。

Type: Object

Default: {}

Code Example:

$(".selector").wijtooltip("option","showAnimation",{animated:fade,duration:500})

showCallout

Type: Boolean

Default: true

Code Example:

$(".selector").wijtooltip("option","showCallout",true)

showDelay

Type: Number

Default: 0

Code Example:

$(".selector").wijtooltip("option","showDelay",200)

title

Type: String

Default: ””

Remarks:

可以为方法或 HTML 标记，如果为方法，tooltip 内容为方法的返回值。

Code example:

$(".selector").wijtooltip("option","title","my title");

triggers

Remarks:

预设值有：'hover'，'click'，'focus'， 'rightclick'，或者'custom'.

Type: String

Default: 'hover'

Code Example:

$(".selector").wijtooltip("option","triggers","hover")

Events

hidden.tooltip

Parameters:

e: This is the jquery event object.

ui: This is the wijtooltip widget object.

Code Example:

// Supply a function as an option.

$(".selector").wijtooltip({hidden: function(e, ui){}});

//Bind to the event by type: wijtooltiphidden

$(".selector").bind("wijtooltiphidden", function(e, ui){});

hiding.tooltip

Parameters:

e: This is the jquery event object.

ui: This is the wijtooltip widget object.

Code Example:

// Supply a function as an option.

$(".selector").wijtooltip({hiding: function(e, ui){}});

// Bind to the event by type: wijtooltiphiding

$(".selector").bind("wijtooltiphiding", function(e, ui){});

showing.toolTip

Remarks:

If data.cancel is set to true, then the tooltip is no longer shown.

Parameters:

e: This is the jquery event object.

ui: This is the tooltip widget.

Code Example:

// Supply a function as an option.

$("#selector").wijtooltip({showing: function(e,ui){}});

// Bind to the event by type: wijtooltipshowing

$(".selector").bind("wijtooltipshowing", function(e, ui){});

shown.tooltip

Parameters:

e: This is the jquery event object.

ui: This is the wijtooltip widget object.

Code Example:

// Supply a function as an option.

$(".selector").wijtooltip({shown: function(e, ui){}});

// Bind to the event by type: wijtooltipshown

$(".selector").bind("wijtooltipshown", function(e, ui){});

Methods

destroy

重置 wijtooltip 到初始化状态。

hide

隐藏 wijtooltip.

show

显示 wijtooltip。

转载于:https://www.cnblogs.com/C1SupportTeam/archive/2012/11/16/2773493.html