[Shiny]:在另一个tabPanel中添加指向另一个tabPanel的链接

时间:2016-04-04 20:36:09

标签: html r shiny

我正在尝试将“home”tabPanel上的链接放到我应用的所有其他tabPanel上。

这个想法如下:

ui = navbarPage("",
         tabPanel("home",
                  fluidPage(
                    fluidRow(box("this 1st box should lead me to tab1a")),
                    fluidRow(box("this 2nd box should lead me to tab1b")),
                    fluidRow(box("this 2nd box should lead me to tab2")))
            ),
         navbarMenu("tab1",
                    tabPanel("tab1a"),
                    tabPanel("tab1b")),
         tabPanel("tab2")
         )
shinyApp(ui, server=function(input, output) {})

我在Add link panel tabs in Shiny with various top level navigation bars看到了答案,但是我无法在我的代码上实现它,因为它处理的是html(我之前从未使用过,所以我不熟悉这些函数等)并且代码认为paneltabs具有相同的选项卡(不确定这是不是因为它在这里不起作用,如果它不起作用,因为我试图链接的选项卡在navbarpage或其他东西)。

任何人都可以帮助我或告诉我在哪里可以学习如何在我的例子中实现这一点吗?

1 个答案:

答案 0 :(得分:4)

这个答案纯粹是JavaScripted,但我觉得非常小。由于Shiny使用随机数字ID创建标签,并且不提供对其使用的ID的访问权限,因此可以在客户端进行。但是,不需要将JavaScript实现到其他场景中。 JavaScript部分仅用于复制/粘贴,触发命令很容易理解。

我做了什么?我安装了一个函数,找到与所需选项卡对应的Navbar链接,然后单击它。可以使用“onclick”属性将此实用程序添加到任何元素。没有特殊标签(例如没有“a”标签)。

下面的代码可以让您轻松自定义此解决方案以满足您的需求。

注意:我将原始代码与box一起使用,但它没有任何视觉效果。

代码:

library(shiny)
library(shinydashboard)

ui = shinyUI(

  navbarPage("Header",
    tabPanel("home",
      tags$head(tags$script(HTML('
        var fakeClick = function(tabName) {
          var dropdownList = document.getElementsByTagName("a");
          for (var i = 0; i < dropdownList.length; i++) {
            var link = dropdownList[i];
            if(link.getAttribute("data-value") == tabName) {
              link.click();
            };
          }
        };
      '))),
      fluidPage(
        fluidRow(box("this 1st box should lead me to tab1a", onclick = "fakeClick('tab1a')")),
        fluidRow(box("this 2nd box should lead me to tab1b", onclick = "fakeClick('tab1b')")),
        fluidRow(box("this 2nd box should lead me to tab2", onclick = "fakeClick('tab2')"))
      )
    ), 
    navbarMenu("tab1",
      tabPanel("tab1a", "Some Text inside Tab 1a."),
      tabPanel("tab1b", "Some Text inside Tab 1b.")
    ),

    tabPanel("tab2", "Some Text inside Tab 2.")
  )
)

server = function(input, output, session){}

runApp(shinyApp(ui, server), launch.browser = TRUE)

玩得开心!