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

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

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

看看 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>

</div>


jQuery 脚本：

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

$(document).ready(function () {

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

});

</script>

 

特性

可定制外观

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

tooltips_pure

可定制触发器

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

模式选择

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

可定制显示位置

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

tooltips_position

 

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
该值用来定义通过AJAX模式来获取内容的回调。
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
如果该分组选项与另一个工具提示部件设置相同，则这两个部件共用一个工具提示DOM。
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
如果该值设置为true的话，则工具提示会与鼠标一起移动。
Type: Boolean
Default: false
Code Example:

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

position
该值用来设置工具提示与'relativeTo“，”offsetX'，和'offsetY'属性相关的位置模式。
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:

1

$(".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
当C1ToolTip被隐藏时，在客户端触发。
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
在C1ToolTip被隐藏之前，在客户端触发。
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
在C1ToolTip显示之前，在客户端触发。
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
当C1ToolTip显示时，在客户端触发。
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。

 

posted @ 2012-11-16 16:30  葡萄城开发工具  阅读(1997)  评论(1)    收藏  举报