新寡妇村传奇_ToolTip 實(shí)現全介紹| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

ToolTip 實(shí)現全介紹

## ToolTip 實(shí)現全介紹
### ToolTip 是什么？
ToolTip , 常翻譯為提示框， 頁(yè)面的效果是鼠標移到到某個(gè)頁(yè)面元素時(shí)，彈出一個(gè)對話(huà)框顯示。 實(shí)現的效果如下：
![](/upload/picture/2022-09-27/upload_207eee008c07e88b498eb8f10d4e62c8.png)
在Ext JS的應用中，ToolTip 一般使用在：
Button按鈕： 用更多的文字解釋該按鈕的功能。
Grid 中的某列： 該列的內容較多，無(wú)法在頁(yè)面中完全顯示的時(shí)候， 會(huì )截斷， 多余部分使用 … 替代， 彈出一個(gè)提示框完整顯示該Cell包含的內容。
### ToolTip 的原生實(shí)現
其實(shí)ToolTip 使用原生的HTML + CSS 既可以實(shí)現，實(shí)現步驟如下：
定義 ToolTip 相關(guān)的頁(yè)面元素
```
鼠標移動(dòng)到這里顯示Tooltip  提示文本
```

這里定義了一個(gè)div, 內嵌了一個(gè) span ， span 就是用來(lái)顯示 ToolTip 的。 這兩個(gè)元素分別指定的樣式是 tooltip 和 tooltiptext
2. 定義樣式

```css
.tooltip {    
	position: relative;    
	display: inline-block;    
	border-bottom: 1px dotted black; 
}
.tooltip .tooltiptext {    
	visibility: hidden;    
	width: 120px;    
	background-color: black;    
	color: #fff;    
	text-align: center;    
	padding: 5px 0;    
	border-radius: 6px;     /* 定位 */    
	position: absolute;    
	z-index: 1;
}
.tooltip:hover .tooltiptext {
	visibility: visible;
}
```

tooltip 定義tooltip 整體樣式
.tooltip .tooltiptext 提示框的樣式， 默認隱藏
.tooltip:hover .tooltiptext ： 鼠標移動(dòng)到該區塊時(shí)， 顯示提示框的元素
顯示效果
以上顯示的效果如下：
![](/upload/picture/2022-09-27/upload_8297cf9c11516321c55094c95e3d9d5a.png)
在線(xiàn)演示地址： http://jsrun.net/273Kp/edit
### Ext JS的 ToolTip
兩種類(lèi)型的Tip
1.自行創(chuàng  )建的Tip對象 , 創(chuàng  )建Ext.tip.Tip 和 Ext.tip.ToolTip 的類(lèi)實(shí)例
2.快速Tip， QuickTip， 使用頁(yè)面元素或者是組件的屬性直接定義
### 1. Ext.tip.ToolTip 使用示例
Ext.tip.ToolTip 可以使用在一般HTML 元素上， 也可以使用在Ext JS組件上。舉例來(lái)說(shuō)：
使用在HTML 元素上
比如頁(yè)面中有一個(gè)id 是 div1 的元素
```html
Div 區塊
```

使用Ext JS增加ToolTip 的代碼如下：
			var tip = Ext.create('Ext.tip.ToolTip', {				target: 'div1',				html: '使用Ext.tip.ToolTip 定義的'			});

使用在Grid中
```javascript
var grid = Ext.create('Ext.grid.Panel', {
	store: [{
		id: '1',
		name: '劉備'
	}, {
		id: '2',
		name: '關(guān)羽'
	}, {
		id: '3',
		name: '張飛'
	}],
	columns: [
		{ text: '編號', width: 75, dataIndex: 'id' },
		{ text: '名字', flex: 1, dataIndex: 'name' }
	],
		height: 200,
		width: 400,
		renderTo: 'div3'
	});
	var view = grid.getView();
	var tip = Ext.create('Ext.tip.ToolTip', {
		target: view.el, //Grid對應視圖的頁(yè)面元素
		delegate: view.itemSelector, //根據每行顯示
		trackMouse: true,
		renderTo: Ext.getBody(),
		listeners: {
		beforeshow: function updateTipBody(tip) { //根據鼠標移動(dòng)的行顯示該行的Tip
		tip.update('你正在看 "' + view.getRecord(tip.triggerElement).get('name') +
		'"');
	}
	}
});
```

創(chuàng  )建Ext.tip.ToolTip 根據每行進(jìn)行顯示。
### 2. 快速Tip 顯示
以上提示框需要創(chuàng  )建Tip相關(guān)的類(lèi)， 但是類(lèi)似按鈕等組件， 如果每個(gè)按鈕都去創(chuàng  )建一個(gè)Tip 對象，勢必很麻煩，也比較耗費資源， 于是Ext JS提供了一個(gè)提示框的單例類(lèi)Ext.tip.QuickTip ， 并且可以通過(guò)Ext.tip.QuickTipManager 這個(gè)單例管理器進(jìn)行管理。
以按鈕為例， 實(shí)現步驟如下：
初始化QuickTip 的單例對象（必須， 不然沒(méi)有效果）
```
Ext.tip.QuickTipManager.init();
```
1
通過(guò) tooltip 屬性直接定義提示框內容：
 ```json
 {
  text: '帶ToolTip的按鈕',
  tooltip: '這是ToolTip'
  }
```

相比以上方式， 是不是簡(jiǎn)便很多。
此外， 如果是基于Cmd 的Ext JS的應用，可以在 Application.js 中直接通過(guò)quickTips: true, 的屬性開(kāi)啟QuickTip 的初始化。配置代碼類(lèi)似：
![](/upload/picture/2022-09-27/upload_929806390853fc881b36175f0147679d.png)
ToolTip 對應的類(lèi)
ToolTip 相關(guān)的類(lèi)
Ext.tip.Tip
– Ext.tip.ToolTip
— Ext.tip.QuickTip
QuickTip 管理的單例類(lèi)
Ext.tip.QuickTipManager
### 示例源碼
https://github.com/osxm/extjs_dev_ency/blob/main/demos/chp07/tooltip.html

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

ToolTip 實(shí)現全介紹

網(wǎng)站導航