2015-07-29 3 views
2

Я хочу, чтобы при запуске приложения вкладка tab2 = деактивирована, и будет активирована, как только я нажму кнопку на первой вкладке tab1, , я попробовал с shinyjs и с помощью свойств CSS, но я Не могу сделать это.активировать tabpanel с другого tabpanel

спасибо за вашу помощь Alex

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

Вы хотите, чтобы вторая вкладка не была нажата, и как только вы нажмете «Открыть панель tab2», затем сделайте вторую вкладку нажатой и переключитесь на нее? –

+0

да, что я хочу делать, любые идеи? –

ответ

8

Вам нужно немного 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 = ...).

+0

Большое спасибо, он отлично работает, у меня есть другой вопрос, если у вас есть время, конечно: у меня есть блестящее приложение, которое обновляет обычно. все объяснение: runGitHub («ghatfan99/dynamicQuery»), если вы можете мне помочь, это будет большой помощью для моего проекта. спасибо –

+0

Извините, у меня нет времени, чтобы помочь с этим. Для более сложных случаев, которые не являются просто вопросами SO, я занимаюсь консультационной работой за плату –

+0

Здравствуйте, датали, спасибо за ответ, можете ли вы рассказать мне, как вы согласитесь с этим, объясняя странное поведение моего приложения? –