JS修改內容提示框字體樣式

1.1 問題描述

儲存格的「儲存格屬性>其他>內容提示」下不能自訂文字大小顏色等，那麼如何實現下圖所示的自訂效果呢？

1.2 實現思路

儲存格屬性中的內容提示用的是 HTML 中的 title 屬性，不支援自訂，可以透過 JavaScript+CSS 顯示一個自訂樣式的 div，實現內容提示效果。

2.1 設計表格

1）建立一個普通報表，如下圖設計表格：

2）選中 A1 儲存格，在右側面板選擇「儲存格屬性>其他」，設定「內容提示」為：=$$$，如下圖所示：

2.2 新增事件

點選菜單欄「範本>範本web屬性>分頁預覽設定」，為該範本單獨設定，新增一個「載入結束事件」，如下圖所示：

JavaScript 程式碼如下：

var oldTitle = null;
$('td').bind('mouseover mouseout mousemove', function(event) {
var left = event.pageX;
var top = event.pageY;
var ele = event.target;
var title = ele.title;
var type = event.originalEvent.type;
if (type == 'mouseover') {
oldTitle = title;
ele.title = '';
console.log(title);
if (title.length != 0) {
var showEle = $('<div></div>', {
text: title,
class: 'showTitleBox'
}).css({
position: 'absolute',
top: top + 10,
left: left,
border: '1px solid #00cccc', // 邊框
borderRadius: '5px',    // 邊框圓角
background: "#00cccc",       // 背景色
fontFamily: 'SimHei',        // 字體
fontSize: '15px'             // 字體大小
})
showEle.appendTo('body');
}
} else if (type == 'mouseout') {
ele.title = oldTitle;
$('.showTitleBox').remove();
} else if (type == 'mousemove') {
$('.showTitleBox').css({
top: top + 10,
left: left
})
}
})
显示代码

注：實際使用時修改或增加對應的 CSS 屬性即可。

2.3 效果預覽

儲存報表，點選「分頁預覽」，效果如下圖所示：

注：不支援行動端。

點選下載範本：22-js修改內容提示框樣式.cpt

舊自適應下的決策報表需在程式碼外套層延遲函式。如下圖所示：

注：新版決策報表暫不支援。

JavaScript 程式碼如下：

setTimeout(function(){
var oldTitle = null;
$('td').bind('mouseover mouseout mousemove', function(event) {
var left = event.pageX;
var top = event.pageY;
var ele = event.target;
var title = ele.title;
var type = event.originalEvent.type;
if (type == 'mouseover') {
oldTitle = title;
ele.title = '';
console.log(title);
if (title.length != 0) {
var showEle = $('<div></div>', {
text: title,
class: 'showTitleBox'
}).css({
position: 'absolute',
top: top + 10,
left: left,
border: '1px solid #00cccc', // 邊框
borderRadius: '5px',    // 邊框圓角
background: "#00cccc",       // 背景色
fontFamily: 'SimHei',        // 字體
fontSize: '15px'             // 字體大小
})
showEle.appendTo('body');
}
} else if (type == 'mouseout') {
ele.title = oldTitle;
$('.showTitleBox').remove();
} else if (type == 'mousemove') {
$('.showTitleBox').css({
top: top + 10,
left: left
})
}
})
  },500)
显示代码