闪亮:使用隐藏的标签页启动应用，无延迟 [英] shiny: start the app with hidden tabs, with NO delay

问题描述

我想构建一个应用程序，并且在用户键入正确的密码之前，某些选项卡将对用户隐藏.我知道如何使用shinyjs::hideTab:

I would like to build an application and some of the tabs will be hidden to the user until he types the right password. I know how to do this with 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秒钟，然后被隐藏起来.

However there is a little "thing". In my application, the hidden tabs have a lot of stuff, like widgets, uiOutputs, plots, images, file reading in global.R, etc. The consequence is that the loading time is higher and during this loading time of the application (before the hideTab instruction gets run) the user actually sees the hidden tab and can even click on them and see what's inside. They stay "visible" for like 1 second and then get hidden.

有没有一种方法可以在构建UI之前立即将其隐藏?我希望解决方案而不必将我的所有ui代码都放入server.R脚本中.

Is there a way to make them immediately hidden, before the UI gets built? I'd prefer a solution without having to put all my ui code into the server.R script...

谢谢

推荐答案

您可以将javascript与extendShinyjs()一起使用，以隐藏页面加载所需的标签:

You could use javascript with extendShinyjs() to hide the tabs you want on page load:

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()调用替换为:

---

Alternatively the CSS actually isn't too complicated. If you wanted to go that route you could simply replace the extendShinyjs() call in the above with:

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

缺点是，取消隐藏后，选项卡的格式似乎已关闭.

The downside to this is that the formatting of the tabs appears to be off after un-hiding them.

这篇关于闪亮:使用隐藏的标签页启动应用，无延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！