Я хочу сделать ссылку на определенный контент другого tabPanel
в приложении R Shiny. Я нашел много советов о том, как сделать половину этого соответственно: есть решения, как использовать тег anchor
для ссылки на контент в пределах a tabPanel
...
... и на хво направить ссылку на ДругойtabPanel
:
Однако мне нужна комбинация обоих: ссылка, переключающая вид на другой tabPanel
в определенном месте. В этом приложении на примере Михасы есть два tabPanels
, где первый (Home
) содержит некоторый текст, при нажатии на который приложение должно перенаправить в раздел с идентификатором visitme
в 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)
Используя Ответ К. Роде в качестве отправной точки, их JavaScript был расширен вторым аргументом для данного идентификатора и командой, которая прокручивает его (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)