ExtJS Tooltipst和QuickTips浮动信息 示例

ExtJS  Tooltipst和QuickTips浮动信息 示例

Tooltipst 示例:

Ext.onReady(function() {

 var temp = new Ext.Panel({
    renderTo : document.body,
    // id : 'ajax-tip',
    layout : "table",
    layoutConfig : {
     columns : 1
    },
    items : [{
       xtype : 'panel',
       id : 'tip1',
       html : 'Label 1'

      }, {
       xtype : 'panel',
       id : 'ajax-tip',
       html : 'Label 2'

      }, {
       xtype : 'panel',
       id : 'tip2',
       html : 'Label 3'

      }, {
       xtype : 'panel',
       id : 'track-tip',
       html : 'Label 4'

      }]
   });
 new Ext.ToolTip({
    target : 'tip1',
    html : 'A very simple tooltip'
   });
 new Ext.ToolTip({
  target : 'ajax-tip',
  width : 200,
  autoLoad : {
   url : '../../../index.jsp'
  },
  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();

});

 

QuickTips 示例:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<body >例子:<br>
<a href="http://extjs.com" ext:qtip="ExtJS官方网站">ExtJS</a>
<input type="text" ext:qtip="请填写 ..."></input>

<script type="text/javascript" charset="utf-8">
    Ext.onReady(function(){
        Ext.QuickTips.init();
    });       
</script>
</body>
</html>

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