ExtJs4 Ext.tip.ToolTip
来源:互联网 发布:网络直播培训机构红人 编辑:程序博客网 时间:2024/05/19 12:12
ExtJs4 Ext.tip.ToolTip 提示
转载:原文链接
一、基本提示 Ext.tip.ToolTip
1.最简单的提示
下面通过代码定义一个最简单的提示,首先在HTML加入一个div,我们要实现当鼠标移动到这个div上时,自动出现提示,如下是html内容:
[html]<div id="tip1" class="TipDiv">普通提示</div>
接着在js中添加如下代码:
[Js]
Ext.create('Ext.tip.ToolTip', { target: 'tip1', html: '最简单的提示' });
OK,第一个提示已经添加成功,我们来预览一下效果:
2.可关闭的提示
[html]
<div id="tip2" class="TipDiv">不自动隐藏</div>
[Js]
Ext.create('Ext.tip.ToolTip', { target: 'tip2', html: '请点击关闭按钮', title: '标题', autoHide: false, closable: true, draggable: true //可以允许被拖动 });
效果如下,鼠标移移出后提示不消失,单击叉即可关闭:
3.Ajax提示,提示的内容来自服务端
[html]
<div id="tip3" class="TipDiv"> Ajax提示</div>
[Js]
Ext.create('Ext.tip.ToolTip', { target: 'tip3', width: 200, autoLoad: { url: 'AjaxTipData', params: { data: "测试参数"} }, dismissDelay: 15000 //15秒后自动隐藏 });
在服务端通过MVC控制层action来返回提示内容,代码如下:
[c#]
public ContentResult AjaxTipData(string data) { return Content("<font color='red'>这是Ajax提示信息:</font><br>客户端参数:" + data); }
效果:
4.提示跟随鼠标移动
[html]
<div id="tip4" class="TipDiv">跟随鼠标</div>
[Js]
Ext.create('Ext.tip.ToolTip', { target: 'tip4', html: '跟随鼠标的提示', trackMouse: true // 跟随鼠标移动 });
效果:
5.带箭头的提示
[html]
<div id="tip6" class="TipDiv">指定提示方向</div>
[Js]
Ext.create('Ext.tip.ToolTip', { target: 'tip6', anchor: 'buttom', //指定箭头的指向 top,left,right width: 120, anchorOffset: 50, //指定箭头的位置 html: '带箭头的提示,并指定方向' });
效果:
5.图文并茂的提示内容
在提示内容中可以加入图片,超链接等以及如何html元素,还可以自定义提示标题:
[html]
<div id="tip7" class="TipDiv"> 高级自定义</div> <div style="display:none;"> <div id="tipContent"> <ul> <li>提示项1</li> <li>提示项2</li> <li>提示项3</li> <li>提示项4</li> </ul> <img src="http://www.cnblogs.com/Img/Ext/house.jpg" alt="图片" /> </div> </div>
[Js]
Ext.create('Ext.tip.ToolTip', { title: '<a href="#">链接式标题</a>', id: 'toolTip7', target: 'tip7', anchor: 'left', html: null, width: 415, autoHide: false, closable: true, contentEl: 'tipContent', //用id为tipContent的html标签内容作为提示信息 listeners: { 'render': function () { this.header.on('click', function (e) { e.stopEvent(); Ext.Msg.alert('提示', '标题被点击.'); Ext.getCmp('toolTip7').hide(); }, this, { delegate: 'a' }); } } });
效果:
二、快速提示 Ext.tip.QuickTip
快速提示通过在html上添加特定的属性就可以体现出来,比较方便,只需要在代码里面通过如下方式初始化:
[Js]
Ext.QuickTips.init();
下面看看使用方式:
[html]
<div id="tip5" class="TipDiv" data-qtip="用HTML属性表示的提示" data-qtitle="标题"> 快速提示</div> <div id="tip52" class="TipDiv" data-qtip="设置了宽度、位置的快速提示" data-qwidth="400" data-qalign="tl-br"> 快速提示2</div>
data-qtip:设置提示正文内容。
data-qtitle:设置提示的标题。
data-qwidth:设置提示的宽度。
data-qalign:表示用提示的一个基准点,对应到原件的哪个基准点。例如:tl-br表示用提示的左上角,对应到原件的右下角。
效果展示:
三、在extjs控件上使用提示
1.按钮上的快速提示
首先也要运行如下代码:
[Js]
Ext.QuickTips.init();
这样按钮配置项就可以使用“tooltip”了:
[Js]
Ext.create("Ext.Button", { renderTo: Ext.get("tipdiv"), text: "按钮上的快速提示", tooltip: "提示信息" });
效果展示:
2.按钮上的自定义提示
[Js]
//按钮上的自定义提示 Ext.create("Ext.Button", { renderTo: Ext.get("tipdiv"), text: "按钮上的自定义提示", id: "bt1" }); Ext.create('Ext.tip.ToolTip', { target: 'bt1', anchor: 'buttom', width: 120, anchorOffset: 50, html: '按钮上的自定义提示信息' });
效果展示:
作者:李盼(Lipan)
出处:[Lipan] (http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。
出处:[Lipan] (http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。
Copyright ©2016 lipan
0 0
- 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 提示
- Extjs学习 Ext.tip.ToolTip
- Ext.tip.ToolTip 气泡提示
- extjs4 tooltip
- extjs4.1 login tip
- Ext.form.ComboBox tip
- Extjs4.0中的Ext
- Extjs4.0 Ext.Class
- ExtJS4-Ext.Direct
- ExtJS4 Ext用法汇总
- Ext中Grid添加ToolTip
- 关于JavaScript函数的一些事——预解析
- Android依赖注入框架:ButterKnife 8.4.0新版本导入及使用详解
- Java 判断汉字以及大小写字母
- 7CollapsingToolbarLayout
- c语音基本数据类型(一)
- ExtJs4 Ext.tip.ToolTip
- Redis系列~命令(四)
- 浅析Java中的final关键字
- Codeforces Round #377 (Div. 2)D. Exams(二分+贪心)
- POJ 2433 枚举
- gvr sdk for unity 开发笔记 - GazeInputModule解读
- CodeForces 446A DZY Loves Sequences(DP)
- Android学习笔记之五-WebView的使用
- hadoop学习资源