自訂按鈕切換Tab標籤頁

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 版本

1.2 預期效果

FVS 的 Tab 組件 自帶的「Tab欄按鈕」有不同的樣式範本可供選擇，但在實際製作程式中，仍然存在部分場景無法滿足。

所以本文將介紹如何使用 JavaScript 事件去實現一些自訂的需求。預期效果如下圖所示：

1.3 實現思路

1）使用 標題組件 作為按鈕，給標題組件新增 JavaScript 類型的點選事件，結合 showCardByIndex API設定 Tab 組件展示對應的標籤頁。

2）透過設定組件的顯示隱藏 ，實現按鈕選中與未選中的背景差別。

2.1 建立範本

1）點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板。如下圖所示：

2）根據實際需要自訂視覺化看板名稱、畫布大小、範本樣式，點選「建立看板」。如下圖所示：

2.2 設定 Tab 組件

1）點選範本左上角的「其他>Tab」，即可向畫布中新增一個 Tab 組件。如下圖所示：

2）點選 Tab 組件右上角的「+」按鈕重新整理增兩個標籤頁。如下圖所示：

3）向 3 個標籤頁中分別拖入圖表組件並調整組件位置和大小。以 標籤1 為例，如下圖所示：

4）選中右側 Tab 列表中的 Tab 組件，取消勾選「顯示切頁按鈕」。如下圖所示：

2.3 設定標題組件

1）新增 3 個標題組件，標題內容分別設定為「標籤頁1、標籤頁2、標籤頁3」。以 「標籤頁1」 標題組件為例，如下圖所示：

2）分別新增三個圖片組件，組件名稱分別設定為「標籤頁1選中背景、標籤頁2選中背景、標籤頁3選中背景」。以「標籤頁1選中背景」圖片組件為例，如下圖所示：

3）為三個圖片組件設定合適的圖片作為標籤頁的選中背景。以「標籤頁1選中背景」圖片組件為例，如下圖所示：

4）將「標籤頁1」標題組件和「標籤頁1選中背景」圖片組件、「標籤頁2」標題組件和「標籤頁2選中背景」圖片組件、「標籤頁3」標題組件和「標籤頁3選中背景」圖片組件依次組合。以「標籤頁1」標題組件和「標籤頁1選中背景」圖片組件組合為例，如下圖所示：

5）點選範本左下角的「組件圖層」按鈕，調整三個分組內的層級關係，標題組件在上，圖片組件在下。如下圖所示：

6）為實現預設選中「標籤頁1」的效果，需將「標籤頁2選中背景」和「標籤頁3選中背景」設定為隱藏。如下圖所示；

2.4 設定滑鼠點選事件

2.4.1 JavaScript 執行動作

1）選中「標籤頁1」標題組件，點選「交互>新增事件>滑鼠點選」，選擇 JavaScript ，輸入 JavaScript 腳本。如下圖所示：

JavaScript 腳本如下所示：

duchamp.getWidgetByName("Tab1_頁面1").showCardByIndex(0); //設定 Tab1_頁面1 展示第 1 個標籤頁

2）另外兩個標題組件同理設定即可，只需修改對應 Tab 頁的索引。

• 「標籤頁2」標題組件 JavaScript 腳本如下：

duchamp.getWidgetByName("Tab1_頁面1").showCardByIndex(1);

• 「T標籤頁3」標題組件 JavaScript 腳本如下：

duchamp.getWidgetByName("Tab1_頁面1").showCardByIndex(2);

2.4.2  顯示/隱藏 執行動作

1）選中「標籤頁1」標題組件，點選「交互>新增執行動作」，選擇「顯示/隱藏」，設定「標籤頁1選中背景」顯示，「標籤頁2顯示背景」、「標籤頁3顯示背景」隱藏。如下圖所示：

注：V2.3.0 之前版本需要使用 API 實現組件的顯示隱藏。

2）另外兩個標題同理設定即可，只需修改顯示隱藏的目標物件，此處不再贅述。

2.6 效果預覽

2.6.1 PC 端

儲存範本，預覽效果如 1.2 節所示。

2.6.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

範例一僅示範了手動切換的效果。

但有些時候，使用者希望它是可以自動輪播，且能手動切換的，此時可以透過給 Tab 組件新增「標籤切換事件」透過 JavaScript 程式碼實現。

3.1 複製貼上頁面

選中範本左下角的「頁面1」，右鍵複製貼上頁面。如下圖所示：

3.2 Tab 組件新增標籤切換事件

1）選中新頁面中右側 Tab 列表中的 Tab 組件，點選「交互>輪播設定」，勾選「開啟自動輪播」，將輪播間隔設定為 3000 毫秒。如下圖所示：

2）點選「交互事件>新增事件>標籤切換」，選擇「JavaScript」，輸入 JavaScript 執行腳本。如下圖所示：

 JavaScript 執行腳本如下所示：

var a=duchamp.getWidgetByName('Tab1_頁面1').getShowIndex(); //獲取 Tab 當前展示的標籤頁索引
//根據索引判斷Tab頁，進而設定要隱藏或顯示的組件
if(a===0){ 
    duchamp.getWidgetByName("標籤頁1選中背景").setVisible(true);
    duchamp.getWidgetByName("標籤頁2選中背景").setVisible(false);
    duchamp.getWidgetByName("標籤頁3選中背景").setVisible(false);
}
if(a===1){
    duchamp.getWidgetByName("標籤頁2選中背景").setVisible(true);
    duchamp.getWidgetByName("標籤頁1選中背景").setVisible(false);
    duchamp.getWidgetByName("標籤頁3選中背景").setVisible(false);
}
if(a===2){
    duchamp.getWidgetByName("標籤頁3選中背景").setVisible(true);
    duchamp.getWidgetByName("標籤頁1選中背景").setVisible(false);
    duchamp.getWidgetByName("標籤頁2選中背景").setVisible(false);
}

3.3 效果預覽

3.3.1 PC 端

儲存範本，預覽效果如下圖所示：

3.3.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

點選下載範本：自訂按鈕切換Tab標籤頁.fvs