ExtJs4 笔记（7） Ext.tip.ToolTip 提示

ExtJs4 笔记（7） Ext.tip.ToolTip 提示

《回到系列目录
本篇介绍提示控件，ExtJs支持两种方式定义提示，可以支持普通html元素和一般的ExtJs UI控件。

一、基本提示 Ext.tip.ToolTip

1.最简单的提示

下面通过代码定义一个最简单的提示，首先在HTML加入一个div，我们要实现当鼠标移动到这个div上时，自动出现提示，如下是html内容：
[html]

接着在js中添加如下代码：
[Js]

OK,第一个提示已经添加成功，我们来预览一下效果：

2.可关闭的提示

[html]

[Js]

效果如下，鼠标移移出后提示不消失，单击叉即可关闭：

3.Ajax提示，提示的内容来自服务端

[html]

[Js]

在服务端通过MVC控制层action来返回提示内容，代码如下：
[c#]

效果：

4.提示跟随鼠标移动

[html]

[Js]

效果：

5.带箭头的提示

[html]

[Js]

效果：

5.图文并茂的提示内容

在提示内容中可以加入图片，超链接等以及如何html元素，还可以自定义提示标题：
[html]

[Js]

效果：

二、快速提示 Ext.tip.QuickTip

快速提示通过在html上添加特定的属性就可以体现出来，比较方便，只需要在代码里面通过如下方式初始化：
[Js]

下面看看使用方式：
[html]

data-qtip:设置提示正文内容。

data-qtitle:设置提示的标题。

data-qwidth:设置提示的宽度。

data-qalign:表示用提示的一个基准点，对应到原件的哪个基准点。例如：tl-br表示用提示的左上角，对应到原件的右下角。
效果展示：

三、在extjs控件上使用提示

1.按钮上的快速提示

首先也要运行如下代码：
[Js]

这样按钮配置项就可以使用“tooltip”了：
[Js]

效果展示：

2.按钮上的自定义提示

[Js]

效果展示：



作者：李盼（Lipan）

出处：[Lipan] （http://www.cnblogs.com/lipan/）

版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。

分类: JS,MVC

好文要顶 关注我 收藏该文








lipan

关注 - 4

粉丝 - 602

+加关注

10

0

« 上一篇：ExtJs4
笔记（6） Ext.MessageBox 消息对话框

» 下一篇：ExtJs4
笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

posted @ 2011-12-16 08:16 lipan 阅读(21813)
评论(6) 编辑 收藏

评论列表

#1楼 2011-12-16
09:46 小渺

很好。

让初学者摆脱了对英文api的恐慌。

灵活运用，就可举一反三了。
支持(0)反对(0)

#2楼 2011-12-16
10:04 neverlost

非常不错，感谢分享
支持(0)反对(0)

#3楼 2011-12-16
11:02 yonghu86

很产错，顶一下。
支持(0)反对(0)

#4楼 2011-12-16
12:07 show_show

非常好
支持(0)反对(0)

#5楼[楼主] 2011-12-16
14:21 lipan

@ show_show

@海南.胡勇

@neverlost

@小渺

谢谢支持:)
支持(0)反对(0)

#6楼 2012-06-28
11:48 dextersmaker

谢谢楼主。