javascript - Shiny 如何阻止用户访问选项卡？

Question

我需要阻止用户访问其他选项卡，直到完成某些操作。在这个可重现的示例中，我想阻止用户访问 Tab 2，直到他按下按钮。

这是应用程序的外观:

这是应用程序的代码:

library(shiny)

ui <- shinyUI(navbarPage("",
                         tabPanel(h1("Tab1"), value = "nav1",
                                  mainPanel(
                                            br(),
                                            h2("The user must press this button to access the other tab."),
                                            br(),
                                            shiny::actionButton('button', 'press the button')
                                  )
                         ),
                         tabPanel(h1("Tab2"),
                                  value = "nav2",

                                  h3('Block access until user presses button')
                         )
)
)

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


})

# Run the application
shinyApp(ui = ui, server = server)

我希望用户能够看到 Tab2 存在，但在他们按下按钮之前使其不可点击。

有什么想法吗？

Answer 1

1. 无需使用任何服务器端处理。现代 Web 应用程序开发概念之一是前端和后端分离。如果您可以在前端完成，则不要使用服务器来完成这项工作。
2. conditionalPanel 是一个更好的解决方案，但用户仍然可以单击选项卡按钮，只是给他们一个空白页面。

这是一个更好的解决方案，让我们使用一些 js 来禁用选项卡按钮，除非用户单击操作按钮。用户可以看到选项卡按钮，但在开始时它是灰色且不可点击的:

library(shiny)

ui <- shinyUI(navbarPage(
  "",
  tabPanel(
    h1("Tab1"), 
    value = "nav1",
    mainPanel(
      br(),
      h2("The user must press this button to access the other tab."),
      br(),
      shiny::actionButton('button', 'press the button', onclick = "$(tab).removeClass('disabled')")
    )
  ),
  tabPanel(
    h1("Tab2"),
    value = "nav2",
    uiOutput("tab2contents")
  ),
  tags$script(
    '
    var tab = $(\'a[data-value="nav2"]\').parent().addClass("disabled");
    $(function(){
      $(tab.parent()).on("click", "li.disabled", function(e) {
        e.preventDefault();
        return false;
      });
    });
    '
  )
))    

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

})

# Run the application
shinyApp(ui = ui, server = server)