2016-12-14 48 views
9

W mojej błyszczącej aplikacji chcę dodać opcję pozwalającą użytkownikom przejść do określonego elementu w aplikacji (tabela, fabuła, po prostu wszystko z identyfikatorem), na bieżącym lub innym tab, klikając na infoBox (lub dowolny inny obiekt, który chcę).błyszczący pulpit nawigacyjny: przeskocz do określonego elementu w aplikacji, klikając przycisk infoBox

Moim rozwiązaniem było otoczyć infoBox za pomocą div i dodać atrybut href=#id_of_element. Niestety to rozwiązanie działa tylko dla tabs z dodatkowym atrybutem "data-toggle" = "tab" (nie zmienia również otwartego tab na active), ale nie tego chcę.

Moje pytanie brzmi: jak mogę dodać wspomnianą opcję i dlaczego to rozwiązanie nie działa? Oto mały przykład tego, co chcę zrobić:

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) 
}) 

Odpowiedz

1

znalazłem moją odpowiedź:

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

gdzie div1 jest div wokół infoBox