在 flexdashboard 中单击时更改第二个标签集 [英] Change second tabset on click in flexdashboard

问题描述

我正在开发一个独立的 flexdashboard 项目，我想知道当用户单击一个标签集中的新标签时是否有可能，它也会更改为第二个标签集中的新标签.

例如，当您单击下面的图表 B1"时，我还想将第二列中的视图更改为图表 B2".而点击图表A2"会变回图表A1"等等.

---书名:《无题》输出:flexdashboard::flex_dashboard:方向:列垂直布局:填充---```{r 设置，包括 = FALSE}图书馆(弹性仪表板)``列 {.tabset}-----------------------------------------------------------------------### 图表 A1### 图表 B1列 {.tabset}-----------------------------------------------------------------------### 图表 A2### 图表 B2

注意，这是 首次发布在 RStudio 社区，但没有收到任何回复.

解决方案

这可以用 JavaScript 实现.幸运的是，Knitr 支持嵌入式 Javascript.我首先是R程序员，所以这不一定是最简洁的实现，但确实达到了正确的效果.

 ---书名:《无题》输出:flexdashboard::flex_dashboard:方向:列垂直布局:填充---```{r 设置，包括 = FALSE}图书馆(弹性仪表板)``列 {.tabset}-----------------------------------------------------------------------### 图表 A1图表 A1 很棒### 图表 B1图B1很棒列 {.tabset}-----------------------------------------------------------------------### 图表 A2图表 A2 很棒### 图表 B2图 B2 很棒```{js}//一旦文档完全加载document.addEventListener("DOMContentLoaded", function(){//选择标签window.a1Tab = document.querySelector("#column > ul > li:nth-child(1)");window.b1Tab = document.querySelector("#column > ul > li:nth-child(2)");window.a2Tab = document.querySelector("#column-1 > ul > li:nth-child(1)");window.b2Tab = document.querySelector("#column-1 > ul > li:nth-child(2)");//选择面板内容window.a1Panel = document.getElementById('chart-a1');window.b1Panel = document.getElementById('chart-b1');window.a2Panel = document.getElementById('chart-a2');window.b2Panel = document.getElementById('chart-b2');//如果我们点击 B1，打开 B2，关闭 A2b1Tab.addEventListener('点击', function(){a2Tab.classList.remove('active');a2Tab.children[0].setAttribute('aria-expanded', true);a2Panel.classList.remove('active');b2Tab.classList.add('active');b2Tab.children[0].setAttribute('aria-expanded', true);b2Panel.classList.add('active');}， 错误的);//如果我们点击 B2，打开 B1，关闭 A1b2Tab.addEventListener('点击', function(){a1Tab.classList.remove('active');a1Tab.children[0].setAttribute('aria-expanded', true);a1Panel.classList.remove('active');b1Tab.classList.add('active');b1Tab.children[0].setAttribute('aria-expanded', true);b1Panel.classList.add('active');}， 错误的);//如果我们点击 A1，打开 A2，关闭 B2a1Tab.addEventListener('点击', function(){b2Tab.classList.remove('active');b2Tab.children[0].setAttribute('aria-expanded', true);b2Panel.classList.remove('active');a2Tab.classList.add('active');a2Tab.children[0].setAttribute('aria-expanded', true);a2Panel.classList.add('active');}， 错误的);//如果我们点击 A2，打开 A1，关闭 B1a2Tab.addEventListener('点击', function(){b1Tab.classList.remove('active');b1Tab.children[0].setAttribute('aria-expanded', true);b1Panel.classList.remove('active');a1Tab.classList.add('active');a1Tab.children[0].setAttribute('aria-expanded', true);a1Panel.classList.add('active');}， 错误的);});``

对于无限数量的选项卡，假设第一列和第二列中的选项卡数量始终相同.同样的免责声明，这不一定是最简洁的实现，但达到了预期的效果.

<预><代码>---书名:《无题》输出:flexdashboard::flex_dashboard:方向:列垂直布局:填充---```{r 设置，包括 = FALSE}图书馆(弹性仪表板)``列 {.tabset}-----------------------------------------------------------------------### 图表 A1图表 A1 很棒### 图表 B1图B1很棒### 图表 C1图表 C1 很棒### 图表 D1图表 D1 很棒列 {.tabset}-----------------------------------------------------------------------### 图表 A2图表 A2 很棒### 图表 B2图 B2 很棒### 图表 C2图表 C2 很棒### 图表 D2图表 D2 很棒```{js}//一旦文档完全加载document.addEventListener("DOMContentLoaded", function(){//选择标签window.col1Tabs = document.querySelector("#column > ul");window.col2Tabs = document.querySelector("#column-1 > ul");//选择面板内容window.col1Panels = document.querySelector("#column > div");window.col2Panels = document.querySelector("#column-1 > div");//使选项卡处于活动状态的函数window.handleTab = 函数(tabIndex){for(i=0;i

对于以后可能会发现此问题的任何人，在 Github 问题.

I'm working on a self-contained flexdashboard project and I'm wondering if it's possible when a user clicks to a new tab in one tabset, it changes to a new tab on a second tabset as well.

So for example, when you click on "Chart B1" below, I would also like to change view to "Chart B2" in the second column. And clicking on "Chart A2" would change back to "Chart A1", etc. etc.

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Column {.tabset}
-----------------------------------------------------------------------

### Chart A1

### Chart B1

Column {.tabset}
-----------------------------------------------------------------------

### Chart A2

### Chart B2

Note, this was first posted on RStudio Community, but did not receive any responses.

解决方案

This can be implemented with JavaScript. Luckily, Knitr supports embedded Javascript. I am an R programmer foremost, so this may not necessarily be the most concise implementation, but it does achieve the correct effect.

    ---
    title: "Untitled"
    output: 
      flexdashboard::flex_dashboard:
        orientation: columns
        vertical_layout: fill
    ---

    ```{r setup, include=FALSE}
    library(flexdashboard)
    ```

    Column {.tabset}
    -----------------------------------------------------------------------

    ### Chart A1
    Chart A1 is Great

    ### Chart B1
    Chart B1 is Great

    Column {.tabset}
    -----------------------------------------------------------------------

    ### Chart A2
    Chart A2 is Great

    ### Chart B2
    Chart B2 is Great

    ```{js}
    // Once the Document Has Fully Loaded
    document.addEventListener("DOMContentLoaded", function(){
      // Select The Tabs
      window.a1Tab = document.querySelector("#column > ul > li:nth-child(1)");
      window.b1Tab = document.querySelector("#column > ul > li:nth-child(2)");
      window.a2Tab = document.querySelector("#column-1 > ul > li:nth-child(1)");
      window.b2Tab = document.querySelector("#column-1 > ul > li:nth-child(2)");

      // Select the Panel Content
      window.a1Panel = document.getElementById('chart-a1');
      window.b1Panel = document.getElementById('chart-b1');
      window.a2Panel = document.getElementById('chart-a2');
      window.b2Panel = document.getElementById('chart-b2');

      // If We Click on B1, Open B2, Close A2
      b1Tab.addEventListener('click', function(){
        a2Tab.classList.remove('active');
        a2Tab.children[0].setAttribute('aria-expanded', true);
        a2Panel.classList.remove('active');

        b2Tab.classList.add('active');
        b2Tab.children[0].setAttribute('aria-expanded', true);
        b2Panel.classList.add('active');
      }, false);

      // If We Click on B2, Open B1, Close A1
      b2Tab.addEventListener('click', function(){
        a1Tab.classList.remove('active');
        a1Tab.children[0].setAttribute('aria-expanded', true);
        a1Panel.classList.remove('active');

        b1Tab.classList.add('active');
        b1Tab.children[0].setAttribute('aria-expanded', true);
        b1Panel.classList.add('active');
      }, false);

      // If We Click on A1, Open A2, Close B2
      a1Tab.addEventListener('click', function(){
        b2Tab.classList.remove('active');
        b2Tab.children[0].setAttribute('aria-expanded', true);
        b2Panel.classList.remove('active');

        a2Tab.classList.add('active');
        a2Tab.children[0].setAttribute('aria-expanded', true);
        a2Panel.classList.add('active');
      }, false);

      // If We Click on A2, Open A1, Close B1
      a2Tab.addEventListener('click', function(){
        b1Tab.classList.remove('active');
        b1Tab.children[0].setAttribute('aria-expanded', true);
        b1Panel.classList.remove('active');

        a1Tab.classList.add('active');
        a1Tab.children[0].setAttribute('aria-expanded', true);
        a1Panel.classList.add('active');
      }, false);
    });

    ```

Edit: For an unlimited number of tabs, assuming that you will always have the same number of tabs in the first and second column. Same disclaimer, this is not necessarily the most concise implementation, but achieves the desired effect.

    ---
    title: "Untitled"
    output: 
      flexdashboard::flex_dashboard:
        orientation: columns
        vertical_layout: fill
    ---

    ```{r setup, include=FALSE}
    library(flexdashboard)
    ```

    Column {.tabset}
    -----------------------------------------------------------------------

    ### Chart A1
    Chart A1 is Great

    ### Chart B1
    Chart B1 is Great

    ### Chart C1
    Chart C1 is Great

    ### Chart D1
    Chart D1 is Great

    Column {.tabset}
    -----------------------------------------------------------------------

    ### Chart A2
    Chart A2 is Great

    ### Chart B2
    Chart B2 is Great

    ### Chart C2
    Chart C2 is Great

    ### Chart D2
    Chart D2 is Great

    ```{js}
    // Once the Document Has Fully Loaded
    document.addEventListener("DOMContentLoaded", function(){
      // Select The Tabs
      window.col1Tabs = document.querySelector("#column > ul");
      window.col2Tabs = document.querySelector("#column-1 > ul");

      // Select the Panel Content
      window.col1Panels = document.querySelector("#column > div");
      window.col2Panels = document.querySelector("#column-1 > div");

      // Function to Make Tabs Active
      window.handleTab = function(tabIndex){
        for(i=0;i<col1Tabs.childElementCount;i++){
          col1Tabs.children[i].classList.remove('active');
          col2Tabs.children[i].classList.remove('active');
          col1Panels.children[i].classList.remove('active');
          col2Panels.children[i].classList.remove('active');
        }
        col1Tabs.children[tabIndex].classList.add('active');
        col2Tabs.children[tabIndex].classList.add('active');
        col1Panels.children[tabIndex].classList.add('active');
        col2Panels.children[tabIndex].classList.add('active');
      }

      // For All Tabs, Add Event Listener
      for(i=0;i<col1Tabs.childElementCount;i++){
        col1Tabs.children[i].setAttribute('onclick', 'handleTab(' + i + ');');
        col2Tabs.children[i].setAttribute('onclick', 'handleTab(' + i + ');');
      }

    });

    ```

Edit: For anyone who may find this question later, a JQuery implementation with more flexibility was added to the Github Issue.

这篇关于在 flexdashboard 中单击时更改第二个标签集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！