2016-12-14 24 views
9

मेरे चमकदार ऐप में मैं ऐप में एक विशिष्ट तत्व (एक टेबल, एक साजिश, आईडी के साथ बस कुछ भी) पर जाने के लिए एक विकल्प जोड़ना चाहता हूं, वर्तमान या अलग tab पर, infoBox (या कोई अन्य वस्तु जो मैं चाहता हूं) पर क्लिक करके।चमकदार डैशबोर्ड: जानकारी बॉक्स पर क्लिक करके ऐप में विशिष्ट तत्व पर जाएं बॉक्स

मेरा समाधान infoBoxdiv के साथ घिरा हुआ था और href=#id_of_element विशेषता जोड़ें। दुर्भाग्यवश यह समाधान केवल tabs के लिए अतिरिक्त "data-toggle" = "tab" विशेषता के साथ काम करता है (यह खोला tab से active में भी नहीं बदलता है), लेकिन यह वही नहीं है जो मैं चाहता हूं।

मेरा प्रश्न है: मैं उल्लिखित विकल्प कैसे जोड़ सकता हूं और यह समाधान क्यों काम नहीं कर रहा है? यहाँ एक छोटा सा उदाहरण है कि मैं क्या करना चाहते हैं:

यूआई

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

उत्तर

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

जहां div1div आसपास infoBox है

संबंधित मुद्दे