ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的。
QuickTips代码示例:只需要加入Ext.QuickTips.init(); 就可以在html页面中使用。html页面 可以通过:
<input type="button" value="OK" ext:qtitle="Test" ext:qtip="Test Content!">
我们可以看到下面的效果:
你也可以自定义这些QuickTips的属性:
Ext.apply(Ext.QuickTips.getQuickTip(), {
//maxWidth: 200,
//minWidth: 100,
//showDelay: 50,
//trackMouse: true,
//hideDelay: true,
//closable: true,
//autoHide: false,
//draggable: true,
dismissDelay: 0
});
Ext.ToolTip代码:
new Ext.ToolTip({
target: 'tip1',
html: 'test tooltip'
});
在html页面中加入:<a id=tip1 href="">11</a> 就可以看到下面的效果:
可以通过ToolTip设置图层自动ajax加载页面,代码:
new Ext.ToolTip({
target: 'ajax-tip',
width: 200,
autoLoad: {url: 'test/1.jsp'},
});
在html页面中加入:<a id=ajax-tip href="">ajaxtip</a> 就可以看到下面的效果:
打开的层可以关闭,代码:
new Ext.ToolTip({
target: 'close-tip',
html: 'test close',
title: 'test',
autoHide: false,
closable: true,
draggable:true
});
在html页面中加入:<a id='close-tip href="">'closetip</a> 就可以看到下面的效果:
打开的层随鼠标移动,代码:
new Ext.ToolTip({
target: 'track-tip',
title: 'Mouse Track',
width:200,
html: 'This tip will follow the mouse while it is over the element',
trackMouse:true,
dismissDelay: 15000
});
在html页面中加入:<a id=track-tip href="">tracktip</a> 就可以看到下面的效果:
相关推荐
实用的一个应用,主要介绍怎样应用tip显示提示信息
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
extjs资料extjs资料extjs资料extjs资料extjs资料
ExtJS tooltip功能组件实例
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...
xtJs已经升级到了5.0了,目前可能多数应用还在使用ExtJs 3.系列。 从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从...
EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0
extjs电子书,extjs电子书,extjs电子书,extjs电子书
extjs4 ComboBox 点击下拉框 出现grid效果 这里只实现了点击下拉框显示gird,点击其他地方grid自动消失
extJs3升级extjs4方案, extJs3升级extjs4需要修改大量代码
extjsapi,extjs文档,api手岫
包含各种类型的extjs小图标,Extjs4小图标
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS 希望对大家有帮助。
适合ExtJs开发人员extjs技术上手以及深入
一 Extjs 基础 EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) ...
里面包含Extjs 2.2和Extjs 3.2.1版本两个文件
开始ExtJS之旅的第一步是要获得开发包,可以从官方网站www.ExtJS.com下载,以保证获 得最新版本。其下载地址是http://www.ExtJS.com/download,下载成功后的开发包是ExtJS- 2.0.2.zip,有6.08MB大。不过不用担心,这...
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议