分享

extjs基础-Tooltips与QuickTips

 KILLKISS 2010-08-23

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>  就可以看到下面的效果:

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约