增加Tooltips浮动信息

2008-07-24 15:45:04.0     浏览:787     来源:中国IT实验室
关键词:  ExtJs     Tooltips  

ExtJs证实了其十分强大的界面定制能力,其中的提供的ToolTips功能比HTML里的如下语句定制性更强,完全可以代替如下功能 Some Text


ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的,其中Ext.ToolTip的定制功能很强,具体效果可以参考,具体配置代码如下, /*
* Ext JS Library 2.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
new Ext.ToolTip({
target: 'tip1',
html: 'A very simple tooltip'
});
new Ext.ToolTip({
target: 'ajax-tip',
width: 200,
autoLoad: {url: 'ajax-tip.html'},
dismissDelay: 15000 // auto hide after 15 seconds
});
new Ext.ToolTip({
target: 'tip2',
html: 'Click the X to close me',
title: 'My Tip Title',
autoHide: false,
closable: true,
draggable:true
});
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
});
Ext.QuickTips.init();
});


但是Ext.ToolTip的缺点也是很明显的,他需要在配置中写入提示内容文本,这样如果想在表格中引用,给表格中的某一列增加浮动提示这种情况就很不方便,代码也会十分混乱。(当然有高手是可以通过函数解决这个问题的,请高手指点)。ExtJs2.0增加了一个扩展组件就是Ext.QuickTips实际上正好解决这个问题,支持在超文本中定义浮动提示的内容,这样用ASP.NET的数据绑定组件引用起来十分方便,界面也比HTML中的那个缺省的样式好看,唯一的缺点是QuickTips的定制没有ToolTip那么灵活,像上面展示的支持拖拽,鼠标点击关闭,AJAX都不好实现,但总比没有强。下面我就说说,这个QuickTips怎么具体配置,

[第1页]   [第2页]   [下一页]