ExtJS Tooltipst和QuickTips浮动信息 示例
编程技术 / houtizong 发布于 3年前 94
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>
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
