使用shinyjs和flexdashbord动态显示/隐藏输入

时间:2017-01-04 15:42:04

标签: javascript r shiny shinyjs flexdashboard

单击选项卡时,尝试更新 flexdashboard 中的补充工具栏。无法让它发挥作用。

---
title: "Test Sidebar"
output: 
  flexdashboard::flex_dashboard:
     orientation: rows
 runtime: shiny
---

```{r setup}
library(flexdashboard)
library(shiny)
library(shinyjs)
useShinyjs(rmd = TRUE)
```
Sidebar {.sidebar data-width=250}
=======================================================================

```{r}
div(id = "one", selectInput("input1",label= "Show Always",choices=c("a","b","c")))    
div(id = "two",selectInput("input2",label = "Show only on Tab 1", choices=c("d","e","f")))
```

<!-- Update the sidebar based on the tab chosen. Generated HTML code shown for tabs-->

Tab 1 <!-- <a href="#section-tab-1" aria-expanded="true" data-toggle="tab"> -->
=======================================================================
```{r}
useShinyjs(rmd = TRUE)
shinyjs::onclick("#section-tab-2",shinyjs::hide(id = "two"))
shinyjs::onclick("#section-tab-1",shinyjs::show(id = "two"))
```

Tab 2 <!-- <a href="#section-tab-2" aria-expanded="true" data-toggle="tab"> -->
=======================================================================
```{r}
useShinyjs(rmd = TRUE)
actionButton("hideSlider", "Hide Input Two")
observeEvent(input$hideSlider, {
     shinyjs::toggle(id = "two", anim = TRUE)
    })
```

使用actionButton()和observerEvent()可以正常工作。任何建议赞赏。

1 个答案:

答案 0 :(得分:3)

一些评论:

  • 您只需拨打useShinyjs()一次,无需在每个代码块中调用

  • onclick()获取元素的ID。不是选择者 - ID。这意味着您拨打onclick("element")而不是onclick("#element")

  • 如果您查看由信息中心生成的HTML,您会发现没有ID为&#34; section-tab-2&#34;的元素,那么您&#39 ;努力做好工作

  • 在常规闪亮的应用中,当我使用tabsetPanel()时,我执行的操作方式是使用所选标​​签的值。每当选择一个标签时,都会有一个输入值,可以为您提供所选内容的值。我还没有广泛使用flexdashboard,所以我不确定是否有类似的方法来获取flexdashboard中所选标签的值。