R Shiny 应用程序中特定部分的选项卡之间的内部 link

Question

我想 link 另一个 tabPanel 在 R Shiny 应用程序中的特定内容。我已经找到了很多关于如何分别完成它的一半的建议：有一些解决方案如何使用 anchor 标签到 link 到内容 within一个 tabPanel...

... 然后将 link 指向 另一个 tabPanel:

Creating Internal Links - Defining Application Navigation by David Ruvolo

但是，我需要两者的结合：link 将视图切换到特定位置的另一个 tabPanel。在这个应用程序中，，有两个 tabPanels，其中第一个 (Home) 在点击它时包含一些文本，应用程序应该重定向到 ID 为 [=19= 的部分] 在 Tab2.

library(shiny)

ui = shinyUI(
  navbarPage("Header",
             tabPanel("Home",
                      fluidPage(
                        "bring me to the desired point in Tab2")),
             tabPanel("Tab2",
                      "Some Text inside Tab 2.",
                      div("This is a long div to visualize the redirection",
                        style = "background-color: gray;
                                height: 1000px;
                                width: 100px;"),
                      div(id = "visitme",
                          "This is the part where the redirection shall land."),
                      div("Another long div",
                          style = "background-color: gray;
                                  height: 500px;
                                  width: 100px;"))))

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

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

Answer 1

使用作为起点，他们的 JavaScript 通过给定 ID 的第二个参数和一个滚动到它的命令 (document.getElementById(anchorName).scrollIntoView()) 进行扩展，允许移动切换到给定 tabPanel 内的某个部分。

library(shiny)

ui = shinyUI(
  navbarPage("Header",
             tabPanel("Home",
                      tags$head(tags$script(HTML('
                        var fakeClick = function(tabName, anchorName) {
                          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();
                              document.getElementById(anchorName).scrollIntoView({
                                behavior: "smooth"
                                });
                            };
                          }
                        };
                                                 '))),
                      fluidPage(
                        span("bring me to end of tab2",
                             onclick = "fakeClick('Tab2', 'visitme')"))),
             tabPanel("Tab2",
                      "Some Text inside Tab 2.",
                      div("This is a long div to visualize the redirection",
                        style = "background-color: gray;
                                height: 1000px;
                                width: 100px;"),
                      div(id = "visitme",
                          "This is the part where the redirection shall land."),
                      div("Another long div",
                          style = "background-color: gray;
                                  height: 1000px;
                                  width: 100px;"))))

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

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

R Shiny 应用程序中特定部分的选项卡之间的内部 link

Internal link between tabs to specific section in R Shiny app

r

shiny