注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

我的博客

 
 
 

日志

 
 
关于我

风流茶说合,酒是色媒人,古往今来,浪涛依旧,我辈今朝,叱咤风云,

网易考拉推荐

Ext.ToolTip和Ext.QuickTips  

2010-03-18 11:53:52|  分类: ext |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的。

QuickTips代码示例:只需要加入Ext.QuickTips.init(); 就可以在html页面中使用。html页面 可以通过:

<input type="button" value="OK" ext:qtitle="Test" ext:qtip="Test Content!">

我们可以看到下面的效果:

Ext.ToolTip和Ext.QuickTips - 大将军 - 我的博客

你也可以自定义这些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> 就可以看到下面的效果:

Ext.ToolTip和Ext.QuickTips - 大将军 - 我的博客

可以通过ToolTip设置图层自动ajax加载页面,代码:

new Ext.ToolTip({

     target: 'ajax-tip',

     width: 200,

     autoLoad: {url: 'test/1.jsp'},

 });

在html页面中加入:<a id=ajax-tip href="">ajaxtip</a>  就可以看到下面的效果:

Ext.ToolTip和Ext.QuickTips - 大将军 - 我的博客

打开的层可以关闭,代码:

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

Ext.ToolTip和Ext.QuickTips - 大将军 - 我的博客

打开的层随鼠标移动,代码:

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

 Ext.ToolTip和Ext.QuickTips - 大将军 - 我的博客

  评论这张
 
阅读(1794)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017