【问题标题】:navlistPanel: Make tabs sequentially active in shiny appnavlistPanel:在闪亮的应用程序中按顺序激活选项卡
【发布时间】:2014-08-22 20:33:14
【问题描述】:

我正在尝试编写一个闪亮的应用程序,其中选项卡按顺序处于活动状态。例如, 用户只有在完成第一个选项卡上的任务后才能移动到第二个选项卡。在这种情况下,第一个选项卡将添加一个绿色复选标记(例如),第二个选项卡将变为活动状态。 (下一个标签也是如此。)

例如,这里是 ui.R 和 server.R 文件:

shinyUI(fluidPage(  
   titlePanel("New Project"), 
   navlistPanel(selected="Data Upload",
   tabPanel("Data Upload",           
         textInput("aInSummary", label = h5("Please type a"), 
                   value = "Enter value...")
         ),   
   tabPanel("Data Check",
         textInput("bInDataCheck", label = h5("Please type b"), 
                   value = "Enter value...")             
         ),   
   tabPanel("Dry Run",
         textInput("cInDryRun", label = h5("Please type c"), 
                   value = "Enter value...")            
        ),                 
   tabPanel("Output"),
   "-----",
   tabPanel("Help-FAQ")
   )
))


shinyServer(function(input, output,server) {
})

我知道我应该在“navlistPanel”和“tabPanel”中添加“id”,但我不确定我应该在 server.R 文件中包含的逻辑,因为我看不到用户将如何修改这样的身份证。

我已经搜索了闪亮的 google 组、此处的线程,并阅读了 Conditional Panels.. 但这并不是我真正想要的。 非常感谢任何帮助/教程或阅读建议!

【问题讨论】:

    标签: r tabs shiny


    【解决方案1】:

    这是一个例子。页面加载时,除第一个导航链接外的所有链接均被禁用。我在每个部分都添加了“完成”按钮。当您按下完成按钮时,下一个导航链接将启用。

     ui <- fluidPage(  
       tags$head(tags$script("
            window.onload = function() {
                $('#mynavlist a:contains(\"Data Check\")').parent().addClass('disabled');
                $('#mynavlist a:contains(\"Dry Run\")').parent().addClass('disabled');
                $('#mynavlist a:contains(\"Output\")').parent().addClass('disabled');
            };
    
            Shiny.addCustomMessageHandler('activeNavs', function(nav_label) {
                $('#mynavlist a:contains(\"' + nav_label + '\")').parent().removeClass('disabled');
            });
       ")),
       titlePanel("New Project"), 
       navlistPanel(selected="Data Upload", id='mynavlist',
       tabPanel("Data Upload",           
             textInput("aInSummary", label = h5("Please type a"), 
                       value = "Enter value..."),
             br(),
             actionButton('data_upload_done', 'Done')
             ),   
       tabPanel("Data Check",
             textInput("bInDataCheck", label = h5("Please type b"), 
                       value = "Enter value..."),
             br(),
             actionButton('data_check_done', 'Done')
             ),   
       tabPanel("Dry Run",
             textInput("cInDryRun", label = h5("Please type c"), 
                       value = "Enter value..."),
             br(),
             actionButton('dry_run_done', 'Done')
            ),                 
       tabPanel("Output"),
       "-----",
       tabPanel("Help-FAQ")
       )
    )
    
    
    server <- function(input, output,session) {
    
        observe({
            if (input$data_upload_done > 0) {
                session$sendCustomMessage('activeNavs', 'Data Check')
            }
        })
    
        observe({
            if (input$data_check_done > 0) {
                session$sendCustomMessage('activeNavs', 'Dry Run')
            }
        })
    
        observe({
            if (input$dry_run_done > 0) {
                session$sendCustomMessage('activeNavs', 'Output')
            }
        })
    }
    
    runApp(list(ui=ui, server=server))
    

    【讨论】:

    • 非常感谢!这太棒了!最后一个问题,单击“完成”按钮后如何添加复选标记图标?我添加了 tabPanel("Data Check", icon=img(src="checkmark.png"), textInput...) 但它似乎不起作用。非常感谢!
    • 抱歉,这部分我没有答案。
    • 好的。再次感谢您!
    猜你喜欢
    • 2012-01-06
    • 2013-07-04
    • 2015-12-14
    • 2016-03-22
    • 2023-03-20
    • 2021-04-08
    • 1970-01-01
    • 2020-03-14
    • 1970-01-01
    相关资源
    最近更新 更多