javascript - Shiny :使用隐藏标签启动应用程序，没有延迟

Question

我想构建一个应用程序，并且某些选项卡将对用户隐藏，直到他输入正确的密码。我知道如何使用 shinyjs::hideTab :

library(shiny);library(shinyjs)
ui <- fluidPage(useShinyjs(),
  navbarPage("hello", id="hello",
             tabPanel("home", br(), h3("this is home"),passwordInput("pass", "enter 'password' to see the tabs: "),actionButton("enter", "enter")),
             tabPanel("tab2", br(), h4("this is tab2")),
             tabPanel("tab3 with a lot of stuff in it", br(), h4("this is tab3"))))
server <- function(input, output, session) {
  hideTab("hello", "tab2"); hideTab("hello", "tab3 with a lot of stuff in it")
  observeEvent(input$enter, {
    if (input$pass == "password"){showTab("hello", "tab2"); showTab("hello", "tab3 with a lot of stuff in it")}})}
shinyApp(ui, server)

然而，有一点“事情”。在我的应用程序中，隐藏的选项卡有很多东西，如小部件、uiOutputs、绘图、图像、global.R 中的文件读取等。结果是加载时间更长，并且在应用程序的这段加载时间内(之前hideTab 指令运行)用户实际上看到了隐藏的选项卡，甚至可以单击它们并查看里面的内容。它们会保持“可见”状态 1 秒钟，然后隐藏起来。

在构建 UI 之前，有没有办法让它们立即隐藏？我更喜欢一个解决方案，而不必将我所有的 ui 代码都放入 server.R 脚本中......

谢谢

Answer 1

您可以将 javascript 与 extendShinyjs() 一起使用在页面加载时隐藏您想要的选项卡:

Javascript 代码:

shinyjs.init = function(){
  $('#hello li a[data-value="tab3_val"]').hide();
  $('#hello li a[data-value="tab2_val"]').hide();
}

R码:

ui <- fluidPage(useShinyjs(),
                #Added this js
                extendShinyjs(script = path_to_javascript_file),
                navbarPage("hello", id="hello",
                           tabPanel("home", br(), h3("this is home"),passwordInput("pass", "enter 'password' to see the tabs: "),actionButton("enter", "enter")),
                           tabPanel("tab2", value = "tab2_val", br(), h4("this is tab2")),
                           tabPanel("tab3 with a lot of stuff in it", value = "tab3_val", br(), h4("this is tab3"))))

server <- function(input, output, session) {

  observeEvent(input$enter, {
    if (input$pass == "password"){
      show(selector = '#hello li a[data-value="tab3_val"]')
      show(selector = '#hello li a[data-value="tab2_val"]')
      }})}
shinyApp(ui, server)

或者，CSS 实际上并不太复杂。如果你想走那条路，你可以简单地替换 extendShinyjs()在上面调用:

tags$head(tags$style(HTML("#hello li a[data-value = 'tab2_val'], #hello li a[data-value = 'tab3_val'] {
                             display: none;
 }")))

这样做的缺点是选项卡的格式在取消隐藏后似乎已关闭。