Javascript 闪亮：使用隐藏标签启动应用程序，无延迟

我想建立一个应用程序和一些标签将对用户隐藏，直到他键入正确的密码。我知道如何使用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)

库（闪亮）；图书馆（shinyjs）
这个怎么样

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",uiOutput("tab2Content")),
                           tabPanel("tab3 with a lot of stuff in it", uiOutput("tab3Content"))))
server <- function(input, output, session) {
  output$tab2Content <- renderUI({
    req(input$pass == "password")
    tagList(
      br(), 
      h4("this is tab2")
    )
  })
  output$tab3Content <- renderUI({
    req(input$pass == "password")
    tagList(
      br(), 
      h4("this is tab3")
    )
  })}
shinyApp(ui, server)

库（闪亮）；图书馆（shinyjs）
ui您可以将javascript与
extendShinyjs（）
一起使用，以隐藏页面加载时需要的选项卡：

Javascript代码：

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

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)

R代码：

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

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)

这样做的缺点是，在取消隐藏选项卡后，选项卡的格式似乎已关闭。
我解决了这个问题，创建了一个新函数（位于UI定义之上），将
style=“display:none；”
包含在右侧的li标记上：

tabsethidepanels<-function(tag, indexes = NULL) {
  if (class(tag) == "shiny.tag" && tag$name == "div" && tag$attribs$class == "tabbable") {
    if (is.null(indexes)) indexes<-seq_along(tag$children[[1]]$children[[1]])
    for (i in indexes) tag$children[[1]]$children[[1]][[i]]$attribs<-c(tag$children[[1]]$children[[1]][[i]]$attribs, list(style="display:none;"))
    tag
  } else stop("tag must be a tabsetPanel!", call. = F)
}

“索引”字段仅用于选择要隐藏的正确选项卡：

<div class="tabbable">
  <ul class="nav nav-tabs shiny-tab-input" id="mytab" data-tabsetid="2818">
    <li style="display:none;">
      <a href="#tab-2818-1" data-toggle="tab" data-value="tab1">tab1</a>
    </li>
    <li style="display:none;">
      <a href="#tab-2818-2" data-toggle="tab" data-value="tab2">tab2</a>
    </li>
    <li style="display:none;">
      <a href="#tab-2818-3" data-toggle="tab" data-value="tab3">tab3</a>
    </li>
    <li style="display:none;">
      <a href="#tab-2818-4" data-toggle="tab" data-value="tab4">tab4</a>
    </li>
    <li style="display:none;">
      <a href="#tab-2818-5" data-toggle="tab" data-value="tab5">tab5</a>
    </li>
    <li style="display:none;">
      <a href="#tab-2818-6" data-toggle="tab" data-value="tab6">tab6</a>
    </li>
    <li class="active">
      <a href="#tab-2818-7" data-toggle="tab" data-value="tab7-not2hide">tab7-not2hide</a>
    </li>
  </ul>
  <div class="tab-content" data-tabsetid="2818">
    <div class="tab-pane" data-value="tab1" id="tab-2818-1"></div>
    <div class="tab-pane" data-value="tab2" id="tab-2818-2"></div>
    <div class="tab-pane" data-value="tab3" id="tab-2818-3"></div>
    <div class="tab-pane" data-value="tab4" id="tab-2818-4"></div>
    <div class="tab-pane" data-value="tab5" id="tab-2818-5"></div>
    <div class="tab-pane" data-value="tab6" id="tab-2818-6"></div>
    <div class="tab-pane active" data-value="tab7-not2hide" id="tab-2818-7"></div>
  </div>
</div>



















记住选择一个不隐藏为活动的选项卡
selected=“tab7-not2hide”

如果您需要隐藏我建议的所有选项卡以创建一个“空白”选项卡面板，请选择他的一个作为活动选项卡并隐藏索引为NULL的所有选项卡。
我会选择
renderUI
（请参阅@BertilBaron的答案）或
appendTab
，因为隐藏选项卡时很容易绕过密码：


以下是如何通过
appendTab
实现所需的行为，避免使用基本的闪亮，无需额外的JS：

library(shiny)

ui <- fluidPage(navbarPage("hello", id = "hello",
  tabPanel(
    "home",
    br(),
    h3("this is home"),
    passwordInput("pass", "enter 'password' to see the tabs: "),
    actionButton("enter", "enter")
  )
))

server <- function(input, output, session) {
  observeEvent(input$enter, {
    if (input$pass == "password") {
      appendTab(inputId = "hello", tab = tabPanel("tab2", value = "tab2_val", br(), h4("this is tab2")))
      appendTab(inputId = "hello", tab = tabPanel("tab3 with a lot of stuff in it",value = "tab3_val", br(), h4("this is tab3")))
    }
  })
}

shinyApp(ui, server)

库（闪亮）
不幸的是，似乎没有一个很好的解决方案（）。正如在本期中提到的，一个想法可能是使用CSS，但这可能比它的worth@MikeH.这里只是对过程的一点评论：在输入密码之前隐藏选项卡是非常不安全的；“
可以由用户在每个常用浏览器中通过右键单击删除。最好在用户输入正确密码后使用
appendTab
创建选项卡。谢谢，它确实有效。但是，将所有选项卡传递到服务器脚本中会稍微破坏脚本的结构和可理解性。”app，这就是我在问题中最后一句话的原因。嗨@Mike H。谢谢你的回答。这种奇怪的事情发生了，就像在密码输入后标签的名称重新出现在顶部垂直对齐…与原始标签不同…如何纠正这一点？@agenis，它必须这样做
显示：无；
属性。我会更新我的答案是更好的（简单）javascript函数嗯，对我不起作用。它会立即隐藏它，但show函数似乎不起作用。三重检查everything@Danny如果没有看到代码，很难说问题出在哪里。我唯一的猜测是检查选择器，但我假设您已经检查过，当使用
标记$
时，代码应该是e> tags$head（tags$script（
而不是
tags$head（tags$style（
）。请查看我在问题下的评论。您最好使用
appendTab
@ismirsehegal，您是对的。当我不希望用户查看选项卡时，我仅将此代码用于“外观/样式”问题。如果编程人员具有“安全性”“我同意appendTab或uiOutput/renderUI是更好的答案的原因。谢谢。谢谢这个伟大的答案。我明白了，使用这个方法而不是接受的答案将是在安全性/隐藏方便性之间的选择