ExtJs4 笔记(7) Ext.tip.ToolTip 提示
2012-02-13 16:42
197 查看
本篇介绍提示控件,ExtJs支持两种方式定义提示,可以支持普通html元素和一般的ExtJs UI控件。
[html]
?
接着在js中添加如下代码:
[Js]
?
OK,第一个提示已经添加成功,我们来预览一下效果:
![](http://pic002.cnblogs.com/images/2011/99414/2011121321312535.jpg)
?
[Js]
?
效果如下,鼠标移移出后提示不消失,单击叉即可关闭:
![](http://pic002.cnblogs.com/images/2011/99414/2011121321320655.jpg)
?
[Js]
?
在服务端通过MVC控制层action来返回提示内容,代码如下:
[c#]
?
效果:
![](http://pic002.cnblogs.com/images/2011/99414/2011121321323290.jpg)
?
[Js]
?
效果:
![](http://pic002.cnblogs.com/images/2011/99414/2011121321334229.jpg)
?
[Js]
?
效果:
![](http://pic002.cnblogs.com/images/2011/99414/2011121321343245.jpg)
[html]
?
[Js]
?
效果:
![](http://pic002.cnblogs.com/images/2011/99414/2011121321351175.jpg)
[Js]
?
下面看看使用方式:
[html]
?
data-qtip:设置提示正文内容。
data-qtitle:设置提示的标题。
data-qwidth:设置提示的宽度。
data-qalign:表示用提示的一个基准点,对应到原件的哪个基准点。例如:tl-br表示用提示的左上角,对应到原件的右下角。
效果展示:
![](http://pic002.cnblogs.com/images/2011/99414/2011121321364531.jpg)
![](http://pic002.cnblogs.com/images/2011/99414/2011121321372629.jpg)
[Js]
?
这样按钮配置项就可以使用“tooltip”了:
[Js]
?
效果展示:
![](http://pic002.cnblogs.com/images/2011/99414/2011121321384556.jpg)
?
效果展示:
![](http://pic002.cnblogs.com/images/2011/99414/2011121321390689.jpg)
作者:李盼(Lipan)
出处:[Lipan] (http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有
一、基本提示 Ext.tip.ToolTip
1.最简单的提示
下面通过代码定义一个最简单的提示,首先在HTML加入一个div,我们要实现当鼠标移动到这个div上时,自动出现提示,如下是html内容:[html]
?
[Js]
?
![](http://pic002.cnblogs.com/images/2011/99414/2011121321312535.jpg)
2.可关闭的提示
[html]?
?
![](http://pic002.cnblogs.com/images/2011/99414/2011121321320655.jpg)
3.Ajax提示,提示的内容来自服务端
[html]?
?
[c#]
?
![](http://pic002.cnblogs.com/images/2011/99414/2011121321323290.jpg)
4.提示跟随鼠标移动
[html]?
?
![](http://pic002.cnblogs.com/images/2011/99414/2011121321334229.jpg)
5.带箭头的提示
[html]?
?
![](http://pic002.cnblogs.com/images/2011/99414/2011121321343245.jpg)
5.图文并茂的提示内容
在提示内容中可以加入图片,超链接等以及如何html元素,还可以自定义提示标题:[html]
?
?
![](http://pic002.cnblogs.com/images/2011/99414/2011121321351175.jpg)
二、快速提示 Ext.tip.QuickTip
快速提示通过在html上添加特定的属性就可以体现出来,比较方便,只需要在代码里面通过如下方式初始化:[Js]
?
[html]
?
data-qtitle:设置提示的标题。
data-qwidth:设置提示的宽度。
data-qalign:表示用提示的一个基准点,对应到原件的哪个基准点。例如:tl-br表示用提示的左上角,对应到原件的右下角。
效果展示:
![](http://pic002.cnblogs.com/images/2011/99414/2011121321364531.jpg)
![](http://pic002.cnblogs.com/images/2011/99414/2011121321372629.jpg)
三、在extjs控件上使用提示
1.按钮上的快速提示
首先也要运行如下代码:[Js]
?
[Js]
?
![](http://pic002.cnblogs.com/images/2011/99414/2011121321384556.jpg)
2.按钮上的自定义提示
[Js]?
![](http://pic002.cnblogs.com/images/2011/99414/2011121321390689.jpg)
作者:李盼(Lipan)
出处:[Lipan] (http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有
相关文章推荐
- ExtJs4 笔记(7) Ext.tip.ToolTip 提示
- [转载]ExtJs4 笔记(7) Ext.tip.ToolTip 提示
- ExtJs4 笔记 Ext.tip.ToolTip 提示
- ExtJs4 笔记(7) Ext.tip.ToolTip 提示
- ExtJs4 笔记(7) Ext.tip.ToolTip 提示
- ExtJs4 笔记(7) Ext.tip.ToolTip 提示
- ExtJs4 笔记(7) Ext.tip.ToolTip 提示
- ExtJs4 笔记(7) Ext.tip.ToolTip 提示
- ExtJs4 笔记(7) Ext.tip.ToolTip 提示
- Ext.tip.ToolTip 提示
- Ext.tip.ToolTip 气泡提示
- ExtJs4 Ext.tip.ToolTip
- ExtJs4 笔记 Ext.Ajax 对ajax的支持
- [转载]ExtJs4 笔记(10) Ext.tab.Panel 选项卡
- Bootstrap基本插件学习笔记之Tooltip提示工具(18)
- ExtJs4 笔记(11) Ext.ListView、Ext.view.View 数据视图
- ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
- ExtJs4 笔记 Ext.ListView、Ext.view.View 数据视图
- ext给grid加toolTip提示(转自http://blog.sina.com.cn/s/blog_5a5d07e60100n7l3.html)
- [转载]ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏