Question

在我的闪亮应用程序中，我想添加一个选项，让用户通过点击跳转到应用程序中的特定元素（表格，情节，任何带有id的内容），当前或不同的tab在infoBox（或我想要的任何其他对象）。

我的解决方案是用infoBox包围div并添加href=#id_of_element属性。很遗憾，此解决方案仅适用于具有额外tabs属性的"data-toggle" = "tab"（它也不会将已打开的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")
        )
      )
    )
  )
)

SERVER：

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

Answer 1

我找到了答案：

$(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);
    });
});

其中div1 div位于infoBox

附近

闪亮的仪表板：通过单击infoBox跳转到应用程序中的特定元素

1 个答案: