超級連結改變顏色

1.1 預期效果

• 點選變色：點選超連結時，超連結正文變色，表示這個超連結已經被點過，效果如下圖所示：

• 懸浮變色，離開恢復：滑鼠懸浮在超連結正文上方時，正文變色，滑鼠指標離開正文，顏色恢復到超連結原來的藍色。

1.2 實現思路

• 普通報表：預覽方式頁面設定下新增「載入結束」事件。

• 決策報表：報表塊新增「初始化」事件。

2.1 普通報表

以什麼方式預覽報表，就在對應的預覽方式設定頁面下新增「載入結束」事件，如下圖所示：

1）點選變色 JavaScript 程式碼如下：

注：以下程式碼中的 .fh.tac.bw.pl2.sel.b1 為儲存格元素的類名，若此類名不生效，使用者可使用 F12 鍵重新獲取儲存格元素的類名取代 .fh.tac.bw.pl2.sel.b1 部分。

$('.linkspan').mousedown(function(){$(this).css('color','red');}); //滑鼠點選 

2）懸浮變色，離開恢復 JavaScript 程式碼如下：

注：以下程式碼中的 .fh.tac.bw.pl2.sel.b1 為儲存格元素的類名，若此類名不生效，使用者可使用 F12 鍵重新獲取儲存格元素的類名取代 .fh.tac.bw.pl2.sel.b1 部分。

$('.linkspan').mouseover(function(){$(this).css('color','red');}); //滑鼠移上
$('.linkspan').mouseleave(function(){$(this).css('color','blue');}); //滑鼠離開

注：不支援行動端預覽。

2.2 決策報表

注：僅支援決策報表的舊自適應。

給超連結所在報表塊新增「初始化」事件，如下圖所示：

1）點選變色 JavaScript 程式碼如下：

注：以下程式碼中的 .fh.bw.pl2.sel.b1為儲存格元素的類名，若此類名不生效，使用者可使用 F12 鍵重新獲取儲存格元素的類名取代 .fh.bw.pl2.sel.b1 部分。

setTimeout(function() {
$("span.linkspan").bind("click",function() {$(this).css("color", "red");})
}, 100); //點選變色

2）懸浮變色，離開恢復 JavaScript 程式碼如下：

注：以下程式碼中的 .fh.bw.pl2.sel.b1為儲存格元素的類名，若此類名不生效，使用者可使用 F12 鍵重新獲取儲存格元素的類名取代 .fh.bw.pl2.sel.b1 部分。

setTimeout(function() {
$("span.linkspan").mouseover(function() {$(this).css("color", "red");}) //懸浮變色
$("span.linkspan").mouseleave(function() {$(this).css("color", "blue");}) //離開恢復
}, 100);

注：不支援行動端預覽。

點選下載已完成範本：

普通報表滑鼠懸浮變色.cpt普通報表滑鼠點選變色.cpt
決策報表滑鼠懸浮變色.frm決策報表滑鼠點選變色.frm