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>