我想在启动应用程序时选项卡面板tab2 =已停用, 点击第一个标签面板标签1中的按钮后激活 我尝试使用shinyjs和CSS属性,但我不能这样做。
感谢您的帮助 亚历
library(shiny)
library(shinyjs)
runApp(list(
ui = bootstrapPage(
tabsetPanel(
tabPanel(title = "tab1", id="tab1",
br(),
actionButton("click", label = "View tab2 panel")),
tabPanel(title = "tab2", id="tab2")
)
),
server = function(input, output, session){
}
))
答案 0 :(得分:10)
你需要一些javascript才能做到这一点。这是使用shinyjs的解决方案。我还包括了一些css,以便在禁用选项卡时明确说明
jscode <- "
shinyjs.disableTab = function(name) {
var tab = $('.nav li a[data-value=' + name + ']');
tab.bind('click.tab', function(e) {
e.preventDefault();
return false;
});
tab.addClass('disabled');
}
shinyjs.enableTab = function(name) {
var tab = $('.nav li a[data-value=' + name + ']');
tab.unbind('click.tab');
tab.removeClass('disabled');
}
"
css <- "
.nav li a.disabled {
background-color: #aaa !important;
color: #333 !important;
cursor: not-allowed !important;
border-color: #aaa !important;
}"
library(shiny)
library(shinyjs)
runApp(list(
ui = fluidPage(
useShinyjs(),
extendShinyjs(text = jscode),
inlineCSS(css),
tabsetPanel(
id = "navbar",
tabPanel(title = "tab1", id = "tab1",
br(),
actionButton("btn", label = "View tab2 panel")),
tabPanel(title = "tab2", id = "tab2")
)
),
server = function(input, output, session) {
# disable tab2 on page load
js$disableTab("tab2")
observeEvent(input$btn, {
# enable tab2 when clicking the button
js$enableTab("tab2")
# switch to tab2
updateTabsetPanel(session, "navbar", "tab2")
})
}
))
您也可以将javascript放在单独的文件中,并使用extendShinyjs(file = ...)
代替extendShinyjs(text = ...)
。
答案 1 :(得分:3)
回顾 5 年后,我不得不对 Dean 的代码进行更改以使其正常工作:
extendShinyjs(text = jscode)
变成
extendShinyjs(text = jscode, functions = c('disableTab','enableTab'))
答案 2 :(得分:1)
@DeanAttali的代表对参数value
,id
和value
进行了一些小的说明:
library("shiny")
library("shinyjs")
require("V8") ## req for shinyjs::extendShinyjs()
## JavaScript snipit that dis/enables the ABILITY to click the tab (without changing aesthetics)
app_jscode <-
"shinyjs.disableTab = function(name) {
var tab = $('.nav li a[data-value=' + name + ']');
tab.bind('click.tab', function(e) {
e.preventDefault();
return false;
});
tab.addClass('disabled');
}
shinyjs.enableTab = function(name) {
var tab = $('.nav li a[data-value=' + name + ']');
tab.unbind('click.tab');
tab.removeClass('disabled');
}"
## css snipit that makes it LOOK like we are/n't able click the tab (with outchanging functionality)
app_css <-
".nav li a.disabled {
background-color: #aaa !important;
color: #333 !important;
cursor: not-allowed !important;
border-color: #aaa !important;
}"
ui = fluidPage(
shinyjs::useShinyjs(),
shinyjs::extendShinyjs(text = app_jscode),
shinyjs::inlineCSS(app_css),
navbarPage(title = "Navbar title!", id = "navbarid",
tabPanel(title = "tab1", ## id and value args not needed
br(),
p("in tab 1."),
actionButton("btn", label = "toggle locked tabs")),
tabPanel(title = "tab2", ## id and value args not needed
p("in tab 2."))
)
)
server = function(input, output, session) {
## Sisable tab2 on page load
js$disableTab("tab2")
observeEvent(input$btn, {
## Enable tab2 when clicking the button
shinyjs::js$enableTab("tab2") ## On a tab's title
## Switch to tab2
updateNavbarPage(session, "navbarid", "tab2") ## On navbar's id, tab's title
#### Taking it further:
## Also disable tab1 as a selection
shinyjs::js$disableTab("tab1")
})
}
shinyApp(ui = ui, server = server)