转//ext_tip_tooltip_QuickTips



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.QuickTips.init();   必须的
Ext.apply(Ext.QuickTips.getQuickTip(),{...}); 是可选的,如果你想使用缺省配置,就完全可以省略掉这一段。

maxWidth   最大宽度 
minWidth    最小宽度
showDelay 延时显示(毫秒) 
trackMouse 随着鼠标移动 
hideDelay    延时自动隐藏 (缺省为true)
closable    显示关闭图标(但是这个图标显然只是一个样子,鼠标点击不到它!) 
autoHide   自动隐藏 (这个配置没用处,不管是真是假,都自动隐藏,实际需要用下面的dismissDelay来控制)
draggable   支持用鼠标拖动(实际上这个选项也不起作用,因为鼠标根本移动不到这里!) 
dismissDelay 这个才是最有用的选项,否则你完全可以省掉这段Ext.apply的配置。因为缺省情况下这个浮动提示是经过一段时间以后就自动隐藏。只有通过设置这个值为0来关闭自动隐藏浮动提示!
Ext.ToolTip
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>   就可以看到下面的效果:


你可能感兴趣的:(html,Ajax,jsp,ext)