在闪亮的仪表板中隐藏元素（框/选项卡）答案

【问题标题】：Hide an element (box/tabs) in shiny dashboard在闪亮的仪表板中隐藏元素（框/选项卡）
【发布时间】：2016-01-06 18:46:03
【问题描述】：

我有一个闪亮的仪表板，它的登录页面上只有一个文本框。用户输入显示相关数据的电子邮件 ID。这工作正常。但是，我需要一个框/选项卡面板，它会在用户到达页面时向用户致意，并在用户开始在文本输入中输入文本（电子邮件 ID）时消失。这可能吗？

output$introbox=renderUI(box(h3("Welcome to the page. Please enter your email id to proceed")),
                                conditionalPanel(condition=input.emailid=="")

该框在登陆页面时显示，但在输入文本时不会消失。

感谢任何帮助。谢谢

【问题讨论】：

我不完全明白你想要什么，但是看看shinyjs::toggle（或shinyjs::hide和shinyjs::show），也许会有帮助

标签： r shiny shinydashboard shinyjs

【解决方案1】：

奥斯卡的回答是正确的。但它实际上并没有使用shinyjs，它手动包含了所有的JavaScript。您可以使用他的答案，但这里是使用 shinyjs 重写他的答案

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <-dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
  ),
  dashboardBody(
    useShinyjs(),
    div(id = "greetbox-outer",
      box( id ="greetbox",
           width  = 12, 
           height = "100%",
           solidHeader = TRUE, 
           status = "info",
           div(id="greeting", "Greeting here") 
      )
    ),
    box( id ="box",
         width  = 12, 
         height = "100%",
         solidHeader = TRUE, 
         status = "success",

         textInput("txtbx","Enter text: ")
    )
      )
    )

server <- shinyServer(function(input, output, session) {
  observeEvent(input$txtbx,{
    if (input$txtbx == "") return(NULL)
    hide(id = "greetbox-outer", anim = TRUE)
    print(input$txtbx)
  })
})

shinyApp(ui = ui, server = server)

【讨论】：

如何将其扩展到服务器选项，我想为特定用户隐藏选项？

【解决方案2】：

我遇到了类似的问题，我的问题是 box()：如果我将 box() 更改为 div()，那么显示/隐藏选项就完美了。

这个解决方案更简单，但不像修改标签那么优雅。只需将您的 box() 包装在 div() 上，如下所示：

div(id = box1, box(...))
div(id = box2, box(...))

然后，您使用 div 的 id 调用显示/隐藏。

【讨论】：

谢谢！小而重要的细节！没有它，框的一部分可能仍会显示！

【解决方案3】：

是的，这是可能的，因为 daattali 建议 shinyjs 可以帮助您完成一些标准的 Javascript 任务。

如果你想隐藏 shinydashboard box 元素，你必须（据我所知）使用一些像这样的自定义 Javascript：

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <-dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
  ),
  dashboardBody(
    tags$head(
      tags$script(
        HTML("
        Shiny.addCustomMessageHandler ('hide',function (selector) {
          $(selector).parent().slideUp();
        });"
        )
      )
    ),
    box( id ="greetbox",
         width  = 12, 
         height = "100%",
         solidHeader = TRUE, 
         status = "info",
         div(id="greeting", "Greeting here") 
    ),
    box( id ="box",
         width  = 12, 
         height = "100%",
         solidHeader = TRUE, 
         status = "success",

         textInput("txtbx","Enter text: ")
    )
  )
)

server <- shinyServer(function(input, output, session) {
  observeEvent(input$txtbx,{
    if (input$txtbx == "") return(NULL)
    session$sendCustomMessage (type="hide", "#greetbox")
    print(input$txtbx)
  })
})

shinyApp(ui = ui, server = server)

框的 html 布局如下所示：

<div class="box box-solid box-info">
    <div class="box-body" id="greetbox">
        <!-- Box content here -->
    </div>
</div>

由于我们想要隐藏整个盒子，我们必须将父元素隐藏到盒子函数中设置的 id，因此使用 jQuery sn-p。

【讨论】：

很好的答案，虽然你自己做所有的javascript。我添加了另一个基于你的答案，只是用 shinyjs 替换了 javascript