navlistPanel:在闪亮的应用程序中按顺序使标签处于活动状态

本文介绍了navlistPanel:在闪亮的应用程序中按顺序使标签处于活动状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I am trying to write a shiny app in which the tabs are active sequentially. For example, the user can only move to the second tab after he's completed a task on the first tab. In that case, the first tab will have a green checkmark added (for example) and the second tab will become active. (And the same for the next tabs.)

例如，以下是 ui.R 和 server.R 文件:

As an example, here are the ui.R and server.R files:

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 文件中的逻辑，因为我看不到用户将如何修改这样的身份证.

I understand that I should be adding "id" in "navlistPanel" and "tabPanel" but I'm not sure about the logic I should include in the server.R file since I don't see how the user will modify such id.

我搜索了闪亮的 google 群组、这里的主题，并阅读了条件面板……但这并不是我真正想要的.非常感谢任何帮助/教程或阅读建议！

I've searched the shiny google group, threads here, and read on Conditional Panels.. but that's not really what I'm looking for. Any help/tutorial or reading suggestion is much appreciated!

推荐答案

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

Here's an example. All but the first nav links are disabled when the page loads. I've added 'Done' buttons to each section. When you press a Done button, the next nav link becomes enabled.

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))