隐藏闪亮仪表板

时间:2015-10-08 23:49:18

标签: r shiny shinydashboard shinyjs

我有一个闪亮的仪表板,在着陆页上只有一个文本框。用户输入显示相关数据的emailid。这很好用。但是我需要一个盒子/选项卡面板,当用户开始在文本输入中输入文本(emailid)时,它会在到达页面时迎接用户并消失。这可能吗?

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

该框显示在页面的着陆上,但在输入文本时不会消失。

感谢任何帮助。感谢

3 个答案:

答案 0 :(得分:10)

奥斯卡的回答是正确的。但它实际上并不使用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) 

答案 1 :(得分:3)

是的,这是可能的,因为daattali sugested 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>

由于我们想要隐藏整个框,我们必须将父元素隐藏到box函数中设置的id,因此是jQuery片段。

答案 2 :(得分:1)

我遇到了类似的问题,而我的问题出在box()上:如果我将box()更改为div(),那么show / hide选项就可以正常工作了。

此解决方案更简单,但优雅却不如修改标签。只需将box()包裹在div()上,就像这样:

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

然后,您使用div的ID调用显示/隐藏。

相关问题