javascript - Shiny :使用shinyjs禁用tabPanel()

Question

我正在使用@SriPaladugu 提供的答案 here禁用 tabPanel()我注意到如果 tabPanel(title,...) 中存在空格，它就不起作用。 .他们编写了自己的 JavaScript 代码并使用了 shinyjs启用/禁用面板，但我不熟悉解决此问题的 JavaScript 代码。他们执行此操作的代码存储在对象 jscode 中。 ;如何修改代码以解决 tabPanel(title,...) 中的空格?

library(shiny)
library(shinyjs)

jscode <- "
shinyjs.disableTab = function(name) {
var tab = $('.nav li a[data-value=' + name + ']');
tab.bind('click.tab', function(e) {
e.preventDefault();
return false;
});
tab.addClass('disabled');
}

shinyjs.enableTab = function(name) {
var tab = $('.nav li a[data-value=' + name + ']');
tab.unbind('click.tab');
tab.removeClass('disabled');
}
"
css <- "
.nav li a.disabled {
background-color: #aaa !important;
color: #333 !important;
cursor: not-allowed !important;
border-color: #aaa !important;
}"



ui <- shinyUI(fluidPage(
  shinyjs::useShinyjs(),
  shinyjs::extendShinyjs(text = jscode, functions = c("disableTab","enableTab")),
  shinyjs::inlineCSS(css),
  navbarPage("Test",id="navbarPage",
             tabPanel("FirstTab", id = "first_tab",
                      sidebarLayout(
                        sidebarPanel(),
                        mainPanel()
                      )
             ),
             tabPanel("Secondtab", id = "second_tab",
                      sidebarLayout(
                        sidebarPanel(),
                        mainPanel()
                      )
             ),
             tabPanel("Third tab", id = "third_tab",
                      sidebarLayout(
                        sidebarPanel(),
                        mainPanel()
                      )
             )
             )
))

server <- shinyServer(function(input, output, session) {
  # disable tabs Exposure, Covariate, and Construct on page load
  shinyjs::js$disableTab("Secondtab")
  shinyjs::js$disableTab("Third tab")
})

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

Answer 1

我认为你可以简化你的代码，关注 this answer以及 shinyjs::disable() 的文档:

library(shiny)
library(shinyjs)

css <- "
.nav li a.disabled {
background-color: #aaa !important;
color: #333 !important;
cursor: not-allowed !important;
border-color: #aaa !important;
}"

ui <- shinyUI(fluidPage(
  shinyjs::useShinyjs(),
  shinyjs::inlineCSS(css),
  navbarPage("Test",id="navbarPage",
             tabPanel("FirstTab", id = "first_tab",
                      sidebarLayout(
                        sidebarPanel(),
                        mainPanel()
                      )
             ),
             tabPanel("Secondtab", id = "second_tab",
                      sidebarLayout(
                        sidebarPanel(),
                        mainPanel()
                      )
             ),
             tabPanel("Third tab", id = "third_tab",
                      sidebarLayout(
                        sidebarPanel(),
                        mainPanel()
                      )
             )
  )
))

server <- shinyServer(function(input, output, session) {
  # disable tabs Exposure, Covariate, and Construct on page load
  shinyjs::disable(selector = '.navbar-nav a[data-value="Secondtab"')
  shinyjs::disable(selector = '.navbar-nav a[data-value="Third tab"')
})

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

只为完成本回答，获取 data-value , 在浏览器中打开应用程序，按 Ctrl+Shift+C，将鼠标悬停在所需的选项卡上并检查其 data-value检查员中的论据。