当前位置: 首页 > 工具软件 > Tip.js > 使用案例 >

Ext.tip.Tooltip 提示

徐唯
2023-12-01

1.最简单的提示

[html]

<div id="tip1" class="TipDiv">普通提示</div>

[js]

1 Ext.create('Ext.tip.ToolTip', {
2 target: 'tip1',
3 html: '最简单的提示'
4 });




2.可关闭的提示

[html]

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

[js]

1 Ext.create('Ext.tip.ToolTip', {
2 target: 'tip2',
3 html: '请点击关闭按钮',
4 title: '标题',
5 autoHide: false,
6 closable: true,
7 draggable: true //可以允许被拖动
8 });

 

 

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秒后自动隐藏
});

  

 

4.提示跟随鼠标移动

[html]

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

[js]

1 Ext.create('Ext.tip.ToolTip', {
2 target: 'tip4',
3 html: '跟随鼠标的提示',
4 trackMouse: true // 跟随鼠标移动
5 });

5.带箭头的提示

[html]

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



[js]

1 Ext.create('Ext.tip.ToolTip', {
2 target: 'tip6',
3 anchor: 'buttom', //指定箭头的指向 top,left,right
4 width: 120,
5 anchorOffset: 50, //指定箭头的位置
6 html: '带箭头的提示,并指定方向'
7 });

5.图文并茂的提示内容

[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' });
}
}
});




在extjs控件上使用提示


Ext.QuickTips.init();

Ext.create("Ext.Button", {
renderTo: Ext.get("tipdiv"),
text: "按钮上的快速提示",
tooltip: "提示信息"
});

 

 1 //按钮上的自定义提示
2 Ext.create("Ext.Button", {
3 renderTo: Ext.get("tipdiv"),
4 text: "按钮上的自定义提示",
5 id: "bt1"
6 });
7 Ext.create('Ext.tip.ToolTip', {
8 target: 'bt1',
9 anchor: 'buttom',
10 width: 120,
11 anchorOffset: 50,
12 html: '按钮上的自定义提示信息'
13 });


Grid 提示

 

Ext.getCmp('grid').getView().on('render', function (view) {
view.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: view.itemSelector,
trackMouse: true,
listeners: {
beforeshow: function updateTipBody(tip) {
tip.update('<b>时间:</b>' + view.getRecord(tip.triggerElement).get('inputtime') + '&nbsp;&nbsp;&nbsp;' + '<b>发布人:</b>' + view.getRecord(tip.triggerElement).get('Author') + '<br>' + '<br>' + '<b>标题:</b>"' + view.getRecord(tip.triggerElement).get('ArticleTitle') + '"<br>');
}
}
});
});








编辑器加载中...

转载于:https://www.cnblogs.com/sunjinpeng/archive/2011/12/16/2289737.html

 类似资料: