闪亮的仪表板:通过单击信息框跳转到应用程序中的特定元素

shiny dashboard: jump to specific element in app by clicking infoBox

在我闪亮的应用程序中,我想添加一个选项,让用户跳转到应用程序中的特定元素(一个 table、一个情节,只要有 id 的任何东西),当前或不同 tab,通过单击 infoBox(或我想要的任何其他对象)。

我的解决方案是用 div 包围 infoBox 并添加 href=#id_of_element 属性。不幸的是,此解决方案仅适用于具有额外 "data-toggle" = "tab" 属性的 tabs(它也不会将打开的 tab 更改为 active),但这不是我想要的。

我的问题是:如何添加提到的选项以及为什么此解决方案不起作用?这是我想做的一个小例子:

UI

library(shiny)
library(shinydashboard)

shinyUI(
  dashboardPage(
    skin = "blue",
     dashboardHeader(title = "Example"),
    dashboardSidebar(
      sidebarMenu(id = "sidebarmenu",
              menuItem("Tab1", icon = icon("line-chart"),
                       menuSubItem("SubTab1", tabName = "sub1", icon = icon("bar-chart")),
                          menuSubItem("SubTab2", tabName = "sub2", icon = icon("database"))),
              menuItem("Tab2", tabName = "tab2", icon = icon("users"))
      )
    ),
    dashboardBody(
      tabItems(
       tabItem(tabName = "sub1",
          tags$div(href="#s2t2",
                   infoBox(value = "Go to table 2 in SubTab2 (not working)",title = "Click me")),
          tags$div(href="#shiny-tab-tab2", "data-toggle" = "tab",
                   infoBox(value = "Go to Tab2 (this works)",title = "Click me"))
        ),
        tabItem(tabName = "sub2",
               tableOutput("s2t1"),
               tableOutput("s2t2")
                ),
        tabItem(tabName = "tab2",
                tableOutput("t2t1"),
                tableOutput("t2t2")
        )
      )
    )
  )
)

服务器:

 shinyServer(function(input, output,session) {
  output$s2t1<- renderTable(mtcars)
  output$s2t2<- renderTable(mtcars)
  output$t2t1<- renderTable(mtcars)
  output$t2t2<- renderTable(mtcars)
} )

我找到了答案:

$(document).ready(function() {
    $("#div1").click(function() {
       $(".sidebar-menu a[href=\'#shiny-tab-tab2\']").tab("show");
setTimeout(function(){
        var top = $("#t2t2").position().top;
        $(window).scrollTop( top );
        }, 300);
    });
});

其中 div1div 大约 infoBox