активировать панель вкладок из другой панели вкладок

Я хочу, чтобы при запуске приложения панель вкладок 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){
}
))

person Hazem HASAN    schedule 29.07.2015    source источник
comment
Вы хотите, чтобы вторая вкладка не была интерактивной, и после того, как вы нажмете кнопку «Просмотр панели tab2», сделайте вторую вкладку интерактивной и переключитесь на нее?   -  person DeanAttali    schedule 30.07.2015
comment
да, это то, чем я хочу заниматься. Есть идеи?   -  person Hazem HASAN    schedule 30.07.2015


Ответы (3)


Небольшие пояснения по аргументам value, id и value, работающие от представителя @ DeanAttali:

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)

person R_Pseudo    schedule 25.06.2020

Для этого вам понадобится немного 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 = ...).

person DeanAttali    schedule 30.07.2015
comment
Большое спасибо, он работает отлично, у меня есть еще один вопрос, если у вас, конечно, есть время: у меня есть блестящее приложение, которое обновляет нормально. все объяснения на: runGitHub (ghatfan99 / dynamicQuery), если вы можете мне помочь, это будет большим подспорьем для моего проекта. Благодарность - person Hazem HASAN; 30.07.2015
comment
извините, у меня нет времени, чтобы помочь с этим. Для более сложных случаев, которые не являются просто вопросами SO, я выполняю консультационную работу за определенную плату. - person DeanAttali; 30.07.2015
comment
Привет, даатали, спасибо за ответ, не могли бы вы сказать мне, как вы хотите это сделать, с объяснением странного поведения моего приложения? - person Hazem HASAN; 03.08.2015
comment
привет @HazemHASAN, вы можете связаться со мной по адресу deanattali.com/contact, если хотите поговорить об этом :) - person DeanAttali; 03.08.2015
comment
@DeanAttali, у меня это не работает. Я пробовал поместить console.logs в функции JS, но ничего не вижу. Однако внутри R observeEvent распознает нажатие кнопки, а оценка js возвращает среду. Что именно здесь представляет собой объект js? - person Yu Chen; 01.10.2017
comment
Я просто попробовал это с последней блестящей версией, и все сработало. js экспортируется из пакета shinyjs (он же shinyjs::js$ - person DeanAttali; 01.10.2017
comment
Это не работает, если имя вкладки (аргумент name для функции disableTab) содержит пробелы. Я попытался изменить код JS, чтобы добавить кавычки вокруг имени, но я получаю ошибки от shinyjs по поводу синтаксического анализа кода JS, поэтому я не уверен, что делать в этом случае. - person donshikin; 27.12.2018
comment
ОК разобрался - просто нужно было поместить JS-код в отдельный файл и указать имя в селекторе CSS. Также добавлено частичное сопоставление атрибутов в CSS для большей гибкости (некоторые из моих имен вкладок на самом деле динамические, они являются элементами textOutput (), отображаемыми Shiny, и их проще всего выбрать по идентификатору вывода Shiny) - person donshikin; 27.12.2018

Глядя на это 5 лет спустя, мне пришлось внести это изменение в код Дина, чтобы он заработал:

extendShinyjs(text = jscode)

становится

extendShinyjs(text = jscode, functions = c('disableTab','enableTab'))
person Billy    schedule 30.12.2020