从另一个选项卡面板激活选项卡面板

Posted 2023-03-24

【中文标题】从另一个选项卡面板激活选项卡面板

【英文标题】：activate tabpanel from another tabpanel

【发布时间】：2015-10-20 14:22:17

【问题描述】：

当我启动应用程序时，我希望标签面板 tab2 = 停用， 一旦我单击第一个选项卡面板 tab1 中的按钮，将被激活， 我尝试使用 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)

))

【问题讨论】：

您希望第二个选项卡不可点击，一旦您点击“查看 tab2 面板”，然后让第二个选项卡可点击并切换到它？

是的，这就是我想做的，有什么想法吗？

【参考方案1】：

您需要一些 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 = ...)。

【讨论】：

非常感谢，它运行良好，如果你有时间，我还有另一个问题：我有一个闪亮的应用程序，女巫更新正常。所有的解释都在：runGitHub("ghatfan99/dynamicQuery") 如果你能帮助我，这将对我的项目有很大的帮助。谢谢

抱歉，我没有时间帮忙。对于不只是 SO 问题的更复杂的案例，我会付费进行咨询工作

您好 daatali，感谢您的回复，您能告诉我您希望如何与我的应用程序的奇怪行为解释匹配吗？

嗨@HazemHASAN，如果您想讨论这个问题，可以通过deanattali.com/contact与我联系：)

@DeanAttali 这对我不起作用。我尝试将 console.logs 放在 JS 函数中，但我没有看到任何注册。但是，在 R 内部，observeEvent 正在识别按钮按下，并且评估 js 返回一个环境。这里的js 对象到底是什么？

【参考方案2】：

5 年后再看这个，我不得不对 Dean 的代码进行修改以使其正常工作：

extendShinyjs(text = jscode)

变成

extendShinyjs(text = jscode, functions = c('disableTab','enableTab'))

【参考方案3】：

根据@DeanAttali 的代表对value、id 和value 的论点进行一些小的澄清：

library("shiny")
library("shinyjs")
library("V8") ## Required for shinyjs::extendShinyjs()

## JavaScript 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) 
  ## Disable 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)