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>
就可以看到下面的效果:
转自:
http://www.yangxinyong.com/blog/entry/2008_08_20_42_extjsjc-TooltipsyQuickTips.html
分享到:
相关推荐
ext精髓,Extjs如何与数据库交互,可以很快的叫你EXT一些知识
ExtJS与.NET结合开发实例ExtJS与.NET结合开发实例
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
extjs资料extjs资料extjs资料extjs资料extjs资料
xtJs已经升级到了5.0了,目前可能多数应用还在使用ExtJs 3.系列。 从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从...
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
extjs实现简单的树状结构级联Ext onReady function { Ext QuickTips init ; Ext BLANK IMAGE URL "extjs resources images default s gif"; var mytree new Ext tree TreePanel { el : "...
extjs与系统切分模块设计 extjs与系统切分模块设计 extjs与系统切分模块设计
ExtJS3.0 源码分析与开发实例宝典
ExtJs框架与API,讲解详细,功能强大。
EXTJS并不是一门技术,而是很多技术的综合提,所以要很好的去看extjs,然后运用这门技术去开发新的项目
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...
Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码
EXTJS, 图形EXTJS, 图形EXTJS, 图形EXTJS, 图形EXTJS, 图形EXTJS, 图形
• adapter目录中放置的是ExtJS的核心代码与底层库 (如jquery和prototype)的适配器,ExtJS是可以做 到动态切换底层库的,关键就在这里了。 • air包含了ExtJS以air进行改进的代码库,还有以该 代码库实现的任务...
这是一个extjs与.net结合开发的实例,主要实现了grid的分页显示,数据的添删改查,以及动态添加数据字段的功能,对于学习extjs的人有非常好的帮助
包含各种类型的extjs小图标,Extjs4小图标
EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0
一 Extjs 基础 EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) ...
extjs电子书,extjs电子书,extjs电子书,extjs电子书