bảng điều khiển sáng bóng: chuyển đến phần tử cụ thể trong ứng dụng bằng cách nhấp vào infoBox

Question

Trong ứng dụng sáng bóng của tôi, tôi muốn thêm tùy chọn cho phép người dùng chuyển đến phần tử cụ thể trong ứng dụng (bảng, cốt truyện, bất kỳ thứ gì có id), trên hiện tại hoặc khác nhau tab, bằng cách nhấp vào infoBox (hoặc bất kỳ đối tượng nào khác mà tôi muốn).

Giải pháp của tôi là bao quanh infoBox với div và thêm thuộc tính href=#id_of_element. Rất tiếc, giải pháp này chỉ hoạt động cho tabs với thuộc tính bổ sung "data-toggle" = "tab" (nó cũng không thay đổi được mở tab thành active), nhưng đó không phải là những gì tôi muốn.

Câu hỏi của tôi là: làm cách nào để thêm tùy chọn được đề cập và tại sao giải pháp này không hoạt động? Dưới đây là một ví dụ nhỏ những gì tôi muốn làm:

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

Tôi tìm thấy câu trả lời của tôi:

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

nơi div1 là div xung quanh infoBox