FVS頁面API

新增API getAllPages 

支援API this，可獲取當前的組件物件，獲取後可以使用組件的方法和屬性

支援API getAllWidgets，可獲取當前頁所有組件

FVS 統一範本分頁、表格組件分頁、Tab組件標籤頁相關 API 接口

詳情請參見本文 獲取頁、操作頁 相關內容

url 後綴參數 page=x ，x 從 0 開始

page=0 表示第一頁

url 後綴參數改為 page_number=x , x 從 1 開始

page_number=1 表示第一頁

範例1：獲取當前元件組件的實際值

this.getValue();

範例2：設定當前元件不可見

this.setVisible(false);

範例3：清空當前元件的值

this.reset();

-

範例1：點選標題組件，一鍵隱藏當前頁所有組件

duchamp.getAllWidgets().forEach(widget => {
widget.setVisible(false);
})

範例2：在 FVS 範本中，獲取當前頁面總共有多少組件，並彈窗顯示

var a = duchamp.getAllWidgets().length;
duchamp.Msg.alert({
      title: "提示" ,
       message:"當前頁面總共有組件："+ a +"個"
}
)

點選標題組件，獲取當前頁面總共有多少組件，並彈窗顯示

點選下載範本：獲取當前頁組件數量.fvs

範例：獲取標題組件

duchamp.getWidgetByName('標題組件1_頁面1');

-

範例1：觸發「組件1」重新整理

duchamp.getWidgetByName("組件1").refresh();

範例2：觸發「柱形圖」組件重新整理並將地區華北作為參數傳遞給柱形圖

duchamp.getWidgetByName("柱形圖").refresh({area:"華北"});

注：給同一組件傳多個參數時，寫法如下

duchamp.getWidgetByName("組件").refresh({a:"參數值",b:"參數值"});

點選標題組件，觸發「柱形圖」組件重新整理並將地區華北作為參數傳遞給柱形圖

點選可下載範本：refresh重新整理組件.fvs

注：在組合地圖中使用時，需傳遞參數：areaMap、pointMap 或 lineMap

範例1：觸發「組件1」的所有點選事件

duchamp.getWidgetByName("組件1").trigger();

範例2：在組合地圖中

觸發「區域地圖」

duchamp.getWidgetByName("組合地圖1_頁面3").trigger("areaMap");

觸發「點地圖」

duchamp.getWidgetByName("組合地圖1_頁面3").trigger("pointMap");

觸發「流向地圖」

duchamp.getWidgetByName("組合地圖1_頁面3").trigger("lineMap");

-

範例：給標題組件新增點選 JavaScript 事件，觸發頁面全螢幕

duchamp.requestFullscreen();

-

範例：給標題組件新增點選 JavaScript 事件，關閉頁面全螢幕

duchamp.exitFullscreen();

-

每兩秒重新整理一次頁面

setInterval(() => {    duchamp.reload();  }, 2 * 1000);

V1.7.2 版本之前的插件，只能透過範本的「範本>頁面載入結束事件」寫 JavaScript 程式碼實現

V1.7.2 及之後版本，可透過「範本定時重新整理」功能設定，詳情請參見：FVS範本定時重新整理

切換按鈕的三種狀態（預設為 always）：

• always：永遠顯示

• hover：滑鼠懸浮時顯示

• never：從不顯示
  

可新增以下程式碼在範本的「載入結束事件」中

範例1：設定切換按鈕永遠顯示

duchamp.setPageButtonDisplayPolicy("always");

範例2：設定切換按鈕隱藏，滑鼠懸浮時顯示

duchamp.setPageButtonDisplayPolicy("hover");

範例3：設定切換按鈕從不顯示

duchamp.setPageButtonDisplayPolicy("never");

無需獲取多個參數元件分別指派，使用該API即可實現全局參數聯動，對所有分頁生效

範例：點選標題組件，將「華北」作為參數值，傳遞給範本內所有使用了參數 area 的組件

duchamp.linkageGlobal({area:"華北"})

注：傳遞多個參數時，寫法如下

duchamp.linkageGlobal({a:"參數值",b:"參數值"});

點選下載範本：參數全局聯動API範例.fvs

多分頁範本開啟自動切換頁面時，暫停頁面自動切換

duchamp.pauseRollPlay();

點選下載範本：JS實現暫停繼續頁面切換.fvs

多分頁範本開啟自動切換頁面時，暫停頁面自動切換後，繼續頁面自動切換

duchamp.continueRollPlay();

點選下載範本：JS實現暫停繼續頁面切換.fvs

根據頁索引或頁名稱獲取頁

page_number：頁索引，從 1 開始的正整數

name：頁名稱，字串

{

visible:可見性

options:跳轉的頁面物件

name:頁面名稱

number:頁面索引，從 1 開始的正整數

}

範例1：在 FVS 範本中，獲取「頁面1」

duchamp.getPage("頁面1");

範例2：在 FVS 範本中，「表格1」組件設定了分頁，獲取「表格1」組件的分頁1

duchamp.getWidgetByName('表格1').getPage(1);

範例3：在 FVS 範本中，獲取「Tab1」組件第一個標籤頁

duchamp.getWidgetByName('Tab1').getPage(1);

-

-

{

visible:可見性

options:跳轉的頁面物件

name:頁面名稱

number:頁面索引，從 1 開始的正整數

}

範例1：在 FVS 範本中，獲取當前頁的上一頁

duchamp.getPreviousPage();

範例2：在 FVS 範本中，「表格1」組件設定了分頁，獲取「表格1」組件當前頁的上一頁

duchamp.getWidgetByName('表格1').getPreviousPage();

範例3：在 FVS 範本中，獲取「Tab1」組件當前頁的上一頁

duchamp.getWidgetByName('Tab1').getPreviousPage();

-

{

visible:可見性

options:跳轉的頁面物件

name:頁面名稱

number:頁面索引，從 1 開始的正整數

}

範例1：在 FVS 範本中，獲取當前頁的下一頁

duchamp.getNextPage();

範例2：在 FVS 範本中，「表格1」組件設定了分頁，獲取「表格1」組件當前頁的下一頁

duchamp.getWidgetByName('表格1').getNextPage();

範例3：在 FVS 範本中，獲取「Tab1」組件當前頁的下一頁

duchamp.getWidgetByName('Tab1').getNextPage();

-

{

visible:可見性

options:跳轉的頁面物件

name:頁面名稱

number:頁面索引，從 1 開始的正整數

}

範例1：在 FVS 範本中，獲取範本的第一頁

duchamp.getFirstPage();

範例2：在 FVS 範本中，「表格1」組件設定了分頁，獲取「表格1」組件第一頁

duchamp.getWidgetByName('表格1').getFirstPage();

範例3：在 FVS 範本中，獲取「Tab1」組件第一頁

duchamp.getWidgetByName('Tab1').getFirstPage();

-

{

visible:可見性

options:跳轉的頁面物件

name:頁面名稱

number:頁面索引，從 1 開始的正整數

}

範例1：在 FVS 範本中，獲取範本的最後一頁

duchamp.getLastPage();

範例2：在 FVS 範本中，「表格1」組件設定了分頁，獲取「表格1」組件最後一頁

duchamp.getWidgetByName('表格1').getLastPage();

範例3：在 FVS 範本中，獲取「Tab1」組件最後一頁

duchamp.getWidgetByName('Tab1').getLastPage();

-

{

visible:可見性

options:跳轉的頁面物件

name:頁面名稱

number:頁面索引，從 1 開始的正整數

}

範例1：在 FVS 範本中，獲取範本展示的當前頁

duchamp.getCurrentPage();

範例2：在 FVS 範本中，「表格1」組件設定了分頁，獲取「表格1」組件當前頁

duchamp.getWidgetByName('表格1').getCurrentPage();

範例3：在 FVS 範本中，獲取「Tab1」組件當前頁

duchamp.getWidgetByName('Tab1').getCurrentPage();

-

頁面陣列，x 從 0 開始，0 表示第一頁

注：這裏與頁面索引不一樣，頁面索引從 1 開始

範例1：在 FVS 範本中，獲取範本總共有多少頁，並彈窗顯示

var a = duchamp.getAllPages().length;
duchamp.Msg.alert({
      title: "提示" ,
       message:"當前範本總頁數為："+ a
}
)

範例2：在 FVS 範本中，「表格1」組件設定了分頁，獲取「表格1」組件第二頁的名稱

duchamp.getWidgetByName('表格1').getAllPages()[1].getName();

範例3：在 FVS 範本中，獲取「Tab1」組件第一頁的索引

duchamp.getWidgetByName('Tab1').getAllPages()[0].getIndex();

點選下載範本：FVS獲取範本總頁數.fvs

頁面是否顯示，布林型

• true：顯示

• false：隱藏

範例1：在 FVS 範本中，隱藏範本「頁面1」

duchamp.getPage("頁面1").setVisible(false);

範例2：在 FVS 範本中，「表格1」組件設定了分頁，隱藏表格分頁1

duchamp.getWidgetByName('表格1').getPage(1).setVisible(false);

範例3：在 FVS 範本中，隱藏「Tab1」組件標籤頁1

duchamp.getWidgetByName('Tab1').getPage(1).setVisible(false);

點選下載範本：FVS設定頁面顯示或隱藏.fvs

頁面是否顯示，布林型

• true：顯示

• false：隱藏

範例1：在 FVS 範本中，獲取「頁面2」，傳回其顯示隱藏狀態並彈窗提示

var a = duchamp.getPage("頁面2").isVisible();
duchamp.Msg.alert({
      title: "提示" ,
       message:"頁面2顯隱狀態為 "+ a
}
)

範例2：在 FVS 範本中，「表格1」組件設定了分頁，獲取表格分頁2，傳回其顯隱狀態

duchamp.getWidgetByName('表格1').getPage(2).isVisible();

範例3：在 FVS 範本中，獲取「Tab1」組件標籤頁2，傳回其顯隱狀態

duchamp.getWidgetByName('Tab1').getPage(2).isVisible();

點選下載範本：FVS獲取頁面顯隱狀態.fvs

範例1：在 FVS 範本中，跳轉到下一頁

duchamp.getNextPage().goto();

範例2：在 FVS 範本中，「表格1」組件設定了分頁，跳轉表格下一頁

duchamp.getWidgetByName('表格1').getNextPage().goto();

範例3：在 FVS 範本中，跳轉「Tab1」組件下一頁

duchamp.getWidgetByName('Tab1').getNextPage().goto();

範例4：在 FVS 範本中，跳轉到下一頁並傳參

duchamp.getNextPage().goto({a:"參數a"});

傳遞多個參數寫法如下：

duchamp.getNextPage().goto({a:"參數a",b:"參數b"});

點選下載範本：FVS頁面跳轉.fvs

範例1：在 FVS 範本中，獲取當前頁面名稱並彈窗顯示

var name = duchamp.getCurrentPage().getName();
duchamp.Msg.alert({
      title: "提示" ,
      message:"當前頁面名稱為 "+ name
}
)

範例2：在 FVS 範本中，獲取「Tab1」組件當前頁面名稱並彈窗顯示

var name = duchamp.getWidgetByName('Tab1').getCurrentPage().getName();
duchamp.Msg.alert({
      title: "提示" ,
      message:"當前頁面名稱為 "+ name
}
)

注：表格組件分頁沒有名稱，若使用上述 JS ，回傳值為 undefined

點選下載範本：FVS獲取頁面名稱.fvs

範例1：在 FVS 範本中，獲取當前頁面索引並彈窗顯示

var number = duchamp.getCurrentPage().getIndex();
duchamp.Msg.alert({
      title: "提示" ,
      message:"當前頁面名稱為 "+ number
}
)

範例2：在 FVS 範本中，獲取「表格1」組件當前頁面索引並彈窗顯示

var number = duchamp.getWidgetByName('表格1').getCurrentPage().getIndex();
duchamp.Msg.alert({
      title: "提示" ,
      message:"表格當前頁面索引為 "+ number
}
)

範例3：在 FVS 範本中，獲取「Tab1」組件當前頁面索引並彈窗顯示

var number = duchamp.getWidgetByName('Tab1').getCurrentPage().getIndex();
duchamp.Msg.alert({
      title: "提示" ,
      message:"Tab當前頁面索引為 "+ number
}
)

點選下載範本：FVS獲取頁面索引.fvs