提取闪亮仪表板的活动选项卡的名称答案

【问题标题】：Extract Name of Active Tab of Shiny Dashboard提取闪亮仪表板的活动选项卡的名称
【发布时间】：2020-07-24 01:22:05
【问题描述】：

我想提取活动标签名。我已经自定义了侧边栏，它不返回选定（或活动）选项卡名称。因此我不能使用这个方法：sidebarmenu 中的id 参数，然后使用input$id in server 调用它。因此我想用javascript来解决它。我使用 JS $('.tab-content').find('.active').attr('data-value') 尝试过这个，但它不能正常工作。

library(shiny)
# devtools::install_github("MarkEdmondson1234/gentelellaShiny")
library(gentelellaShiny)
library(shinyWidgets)

options(shiny.jquery.version=1)

shinyApp(
  ui = gentelellaPageCustom(
    title = "Shiny Gentelella",
    navbar = gentelellaNavbar(
      navbarItems = notif(
        id = "menunotif",
        icon = icon("envelope-o"),
        status = "primary",
        expanded = FALSE,
        lapply(X = 1:5, FUN = function(i) {
          notifItem(
            title = "John Doe",
            date = "3 min ago",
            img = paste0("https://image.flaticon.com/icons/svg/163/16382", i,".svg"),
            "Film festivals used to be do-or-die moments
       for movie makers. They were where..."
          )
        })
      )
    ),
    sidebar = gentelellaSidebar(
      uiOutput("profile"),
      sidebarDate(),
      sidebarMenu(
        sidebarItem(
          "Tab 1",
          tabName = "tab1", 
          icon = tags$i(class = "fas fa-chart-bar"), 
          badgeName = "new",
          badgeStatus = "danger"
        ),
        sidebarItem(
          "Tab 2",
          tabName = "tab2", 
          icon = tags$i(class = "fas fa-info")
        )
      )
    ),
    body = gentelellaBody(
      tabItems(
        tabItem(
          tabName = "tab1",
          fluidRow(
            column(
              width = 4,
              align = "center",
              sliderInput(
                "obs",
                "Number of observations:",
                min = 0,
                max = 1000,
                value = 500
              )
            ),
            column(
              width = 8,
              align = "center",
              plotOutput("distPlot")
            )
          )
        ),
        tabItem(
          tabName = "tab2",
          jumbotron(
            title = "Hello, world!",
            "This is a simple hero unit, a simple jumbotron-style
        component for calling extra attention to featured
        content or information."
          )
        )
      )
    ),
    footer = gentelellaFooter()
  ),
  server = function(input, output, session) {
    output$distPlot <- renderPlot({
      hist(rnorm(input$obs))
    })

    counter <- reactiveValues(connect = 0)


    output$profile <- renderUI({
      sidebarProfile(
        name = input$name,
        img = "https://image.flaticon.com/icons/svg/236/236831.svg"
      )
    })
  }
)

【问题讨论】：

你应该做return $('li.active>a').attr('data-value');，但你会得到NULL，因为代码是在开始时执行的，应用程序还没有准备好。
谢谢。如果它在加载应用程序时返回 NULL，我很好。但是，当我单击任何其他选项卡时，它应该返回该选项卡的名称。如果您有任何其他替代解决方案，我将不胜感激。
没有看到您的自定义侧边栏就很难回复。可以发一下代码吗？
当然，我编辑了帖子并添加了代码。感谢期待！

标签： shiny shinydashboard

【解决方案1】：

这是 JavaScript 代码：

js <- '
$(document).ready(function(){
  $("a[data-toggle=tab]").on("show.bs.tab", function(e){
    Shiny.setInputValue("activeTab", $(this).attr("data-value"));
  });
});
'

将其包含在 UI 中：

body = gentelellaBody(
  tags$head(
    tags$script(HTML(js))
  ),
  tabItems(
    ......

现在活动标签的名称由input[["activeTab"]]给出：

observe({
  print(input[["activeTab"]])
})

在启动时是NULL。你可以改用这个 JS 代码：

js <- '
$(document).on("shiny:connected", function(){
  Shiny.setInputValue("activeTab", $("li.active>a").attr("data-value"));
  $("a[data-toggle=tab]").on("show.bs.tab", function(e){
    Shiny.setInputValue("activeTab", $(this).attr("data-value"));
  });
});
'

现在input[["activeTab"]] 在启动时仍然是NULL，但它会立即切换到第一个活动选项卡的名称。

【讨论】：

太棒了。你是明星！非常感谢您的慷慨