extjs4 tooltip

最新推荐文章于 2022-08-10 00:07:16 发布

写经过验证的

最新推荐文章于 2022-08-10 00:07:16 发布

阅读量508

点赞数

分类专栏： extjs

extjs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、基本提示 Ext.tip.ToolTip

1.最简单的提示

下面通过代码定义一个最简单的提示，首先在HTML加入一个div，我们要实现当鼠标移动到这个div上时，自动出现提示，如下是html内容：

接着在js中添加如下代码：

Ext.create( 'Ext.tip.ToolTip' , {

target: 'tip1' ,

html: '最简单的提示'

});

OK,第一个提示已经添加成功，我们来预览一下效果：

2.可关闭的提示

[html]

< div id="tip2" class="TipDiv">不自动隐藏</ div >

[Js]

Ext.create( 'Ext.tip.ToolTip' , {

target: 'tip2' ,

html: '请点击关闭按钮' ,

title: '标题' ,

autoHide: false ,

closable: true ,

draggable: true //可以允许被拖动

});

效果如下，鼠标移移出后提示不消失，单击叉即可关闭：

3.Ajax提示，提示的内容来自服务端

[html]

< div id="tip3" class="TipDiv"> Ajax提示</ div >

[Js]

 
  Ext.create( 
  'Ext.tip.ToolTip' 
  , { 
 
      target:  
  'tip3' 
  , 
 
      width: 200, 
 
      autoLoad: { url:  
  'AjaxTipData' 
  , params: { data:  
  "测试参数" 
  } }, 
 
      dismissDelay: 15000          
  //15秒后自动隐藏 
 
  }); 
 
在服务端通过MVC控制层action来返回提示内容，代码如下：
 [c#]

public ContentResult AjaxTipData( string data)

{

return Content( "<font color='red'>这是Ajax提示信息：</font><br>客户端参数：" + data);

}

效果：

4.提示跟随鼠标移动

[html]

< div id="tip4" class="TipDiv">跟随鼠标</ div >

[Js]

Ext.create( 'Ext.tip.ToolTip' , {

target: 'tip4' ,

html: '跟随鼠标的提示' ,

trackMouse: true // 跟随鼠标移动

});

效果：

5.带箭头的提示

[html]

< div id="tip6" class="TipDiv">指定提示方向</ div >

[Js]

Ext.create( 'Ext.tip.ToolTip' , {

target: 'tip6' ,

anchor: 'buttom' , //指定箭头的指向 top,left,right

width: 120,

anchorOffset: 50, //指定箭头的位置

html: '带箭头的提示，并指定方向'

});

效果：

5.图文并茂的提示内容

在提示内容中可以加入图片，超链接等以及如何html元素，还可以自定义提示标题：

[html]

 
  < 
  div  
  id="tip7" class="TipDiv"> 高级自定义</ 
  div 
  > 
 
 
      < 
  div  
  style="display:none;"> 
 
 
          < 
  div  
  id="tipContent"> 
 
 
              < 
  ul 
  > 
 
 
                  < 
  li 
  >提示项1</ 
  li 
  > 
 
 
                  < 
  li 
  >提示项2</ 
  li 
  > 
 
 
                  < 
  li 
  >提示项3</ 
  li 
  > 
 
 
                  < 
  li 
  >提示项4</ 
  li 
  > 
 
 
              </ 
  ul 
  > 
 
 
              < 
  img  
  src=" 
  http://www.cnblogs.com/Img/Ext/house.jpg" alt="图片" /> 
 
 
          </ 
  div 
  > 
 
 
      </ 
  div 
  > 
 
 [Js] 

 
  Ext.create( 
  'Ext.tip.ToolTip' 
  , { 
 
      title:  
  '<a href="#">链接式标题</a>' 
  , 
 
      id:  
  'toolTip7' 
  , 
 
      target:  
  'tip7' 
  , 
 
      anchor:  
  'left' 
  , 
 
      html:  
  null 
  , 
 
      width: 415, 
 
      autoHide:  
  false 
  , 
 
      closable:  
  true 
  , 
 
      contentEl:  
  'tipContent' 
  ,     
  //用id为tipContent的html标签内容作为提示信息 
 
      listeners: { 
 
  'render' 
  :  
  function  
  () { 
 
  this 
  .header.on( 
  'click' 
  ,  
  function  
  (e) { 
 
                  e.stopEvent(); 
 
                  Ext.Msg.alert( 
  '提示' 
  ,  
  '标题被点击.' 
  ); 
 
                  Ext.getCmp( 
  'toolTip7' 
  ).hide(); 
 
              },  
  this 
  , { delegate:  
  'a'  
  }); 
 
          } 
 
      } 
 
  }); 
 
效果：
二、快速提示 Ext.tip.QuickTip快速提示通过在html上添加特定的属性就可以体现出来，比较方便，只需要在代码里面通过如下方式初始化：
 [Js]