r使用JavaScript的闪亮自定义卡程序 - 第二个标签不渲染

Question

我正在尝试使用Plain JavaScript在Shiny中构建自己的TABSETS功能。 这部分是我学习JavaScript和闪亮的内部工作以及创建功能的一种练习

。 a href =“ https://stackoverflow.com/a/62623395/3048453”>此答案但适用于shiny等），它在jsfiddle中有效（请参阅 https://jsfiddle.net/qavoeyju/ ），但是闪亮的示例不起作用。

Shiny不认识到第二个选项卡被激活，因此不会触发反应性元素，也不会创建图。

我该如何告诉Shiny也对第二页做出反应，或者如何以Shiny与它们配合使用的方式制作这些自定义标签？

js <- shiny::HTML('
<script>
const tabs = document.querySelectorAll(".tab");
const contents = document.querySelectorAll(".tab-content");

// "activate" the first content
contents[0].classList.add("show-content");
tabs[0].classList.add("active-nav");

tabs.forEach(tab => tab.addEventListener("click", function() {
  // remove active-nav and show-content classes
  tabs.forEach(tab => tab.classList.remove("active-nav"));
  contents.forEach(c => c.classList.remove("show-content"));
  
  // highlight the contents
  document.getElementById(tab.id).classList.add("active-nav");
  document.getElementById(tab.id + "-content").classList.add("show-content");
}));
</script>
')
css <- shiny::HTML(
'
<style>
ul {
  margin: 0;
  padding: 0;
}

.tab {
  display: inline-block;
  border: 1px solid lightgrey;
  padding: 10px;
  cursor: pointer;
}

.active-nav {
  background: lightgrey;
}

.tab-content {
  display: none;
  padding: 10px;
}

.show-content {
  display: block;
  background: lightgray;
}
</style>
'
)

ui <- div(
  tags$ul(
    tags$li(class = "tab", id = "tab1", "data-value" = "Tab 1 CAP", "Tab 1 CAP"),
    tags$li(class = "tab", id = "tab2", "data-value" = "Tab 2 CAP", "Tab 2 CAP")
  ),
  
  div(class="tab-content", id="tab1-content", "data-value" = "Tab 1 CAP",
      p("1 first tab"),
      plotOutput("plot1")
      ),
  
  div(class="tab-content", id="tab2-content", "data-value" = "Tab 2 CAP",
      p("2 second tab"),
      plotOutput("plot2")),
  
  css,
  js
)



server <- function(input, output, session) {
  output$plot1 <- renderPlot({
    plot(1:10, rnorm(10))
  })
  output$plot2 <- renderPlot({
    plot(1:100, rnorm(100))
  })
}

shinyApp(ui, server)

选项卡1-好

选项卡2-糟糕（绘图未渲染）

Answer 1

在您的选项卡内容上触发<代码>显示的事件。

library(shiny)
js <- shiny::HTML('
<script>
const tabs = document.querySelectorAll(".tab");
const contents = document.querySelectorAll(".tab-content");

// "activate" the first content
contents[0].classList.add("show-content");
tabs[0].classList.add("active-nav");

tabs.forEach(tab => tab.addEventListener("click", function() {
  // remove active-nav and show-content classes
  tabs.forEach(tab => tab.classList.remove("active-nav"));
  contents.forEach(c => c.classList.remove("show-content"));
  
  // highlight the contents
  document.getElementById(tab.id).classList.add("active-nav");
  let showEl = document.getElementById(tab.id + "-content")
  showEl.classList.add("show-content");
  $(showEl).trigger("shown");
}));
</script>
')
css <- shiny::HTML(
    '
<style>
ul {
  margin: 0;
  padding: 0;
}

.tab {
  display: inline-block;
  border: 1px solid lightgrey;
  padding: 10px;
  cursor: pointer;
}

.active-nav {
  background: lightgrey;
}

.tab-content {
  display: none;
  padding: 10px;
}

.show-content {
  display: block;
  background: lightgray;
}
</style>
'
)

ui <- div(
    tags$ul(
        tags$li(class = "tab", id = "tab1", "data-value" = "Tab 1 CAP", "Tab 1 CAP"),
        tags$li(class = "tab", id = "tab2", "data-value" = "Tab 2 CAP", "Tab 2 CAP")
    ),
    
    div(class="tab-content", id="tab1-content", "data-value" = "Tab 1 CAP",
        p("1 first tab"),
        plotOutput("plot1")
    ),
    
    div(class="tab-content", id="tab2-content", "data-value" = "Tab 2 CAP",
        p("2 second tab"),
        plotOutput("plot2")),
    
    css,
    js
)



server <- function(input, output, session) {
    output$plot1 <- renderPlot({
        plot(1:10, rnorm(10))
    })
    output$plot2 <- renderPlot({
        plot(1:100, rnorm(100))
    })
}

shinyApp(ui, server)

闪亮的绘图绑定到显示的事件。