如何使用 actionButton 打开菜单子项

Posted 2023-03-29

【中文标题】如何使用 actionButton 打开菜单子项

【英文标题】：How to open a menu SubItem with an actionButton

【发布时间】：2021-12-16 12:06:53

【问题描述】：

我正在开发我的第一个闪亮的应用程序，我想在 mainPage 上放置一些按钮，以重定向到我创建的菜单 subItens。

我尝试使用菜单 subItens 链接执行此操作，但没有成功。所以，我复制了我用来做菜单 subItens 的代码，并将它放在 actionButton 代码中。它运作良好，但只是在第一次点击时。我需要重新加载页面以使按钮再次工作。

你们知道怎么解决吗？

这里是 menuSubItem 代码

sidebarMenu( id = "tabs",
          menuItem("Conjuntura", tabName = "conjuntura", icon = icon("chart-bar"),
                   menuSubItem("Visão Geral",
                               tabName = "visao_geral"),
                   menuSubItem("Atividade Econômica",
                               tabName = "atividade_economica"),
dashboardBody(
        tabItems(
          # tab visão geral
          tabItem(
            tabName = "visao_geral",
            mod_conj_titulo_ui("titulo_ui_1")
          ),
          # tab conjuntura
          tabItem(
            tabName = "atividade_economica",
            mod_conj_atividade_economica_ui("atividade_economica_ui_1"),
            mod_conj_atividade_economica_es_ui("atividade_economica_es_ui_1")
            )

这是按钮代码

actionButton(inputId = "atividade_economica", 
                 label = menuSubItem(html("<br>Atividade<br>Econômica"),
                                     tabName = "atividade_economica", 
                                     icon = icon("chart-line", class = "icon")),
                 class = "button"
                 )

我没有在服务器中放置任何东西来运行按钮。我认为这就是问题所在。

【问题讨论】：

请发布MRE，以便我们重现该问题并展示您如何使用actionButton。

【参考方案1】：

最简单的方法是依靠无论如何加载的bootstrap javascript 库来为您处理切换。因此，您只需在某处放置一个<a> 标记，该标记已正确设置了适当的data-toggle 和data-value 属性。

一些额外的 JavaScript 可以在菜单栏中正确突出显示选定的选项卡，从而使整个过程变得圆满：

library(shinydashboard)
library(shiny)

js <- HTML(paste("$(() => $('.mimic-menu').on('click', function() ",
                 "   const menu_item = $(this).data('value');",
                 "   const $parent = $('.sidebar-menu [data-value=\"' + menu_item + '\"]').closest('li');",
                 "   $('.sidebar-menu li').removeClass('active');",
                 "   $parent.addClass('active');",
                 "));", sep = "\n"))

header <- dashboardHeader()

sidebar <- dashboardSidebar(
   sidebarMenu(
      id = "tabs",
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", icon = icon("th"), tabName = "widgets", badgeLabel = "new",
               badgeColor = "green"),
      menuItem("Charts", icon = icon("bar-chart-o"),
               menuSubItem("Sub-item 1", tabName = "subitem1"),
               menuSubItem("Sub-item 2", tabName = "subitem2")
      )
   )
)
body <- dashboardBody(
   tags$head(tags$script(js)),
   tabItems(
      tabItem("dashboard",
              div(p("Dashboard tab content"))
      ),
      tabItem("widgets",
              "Widgets tab content",
              tags$a(href = "#shiny-tab-dashboard", `data-toggle` = "tab",
                     class = "btn btn-default mimic-menu",
                     `data-value` = "dashboard", "Click to go to dashboard")
      ),
      tabItem("subitem1",
              "Sub-item 1 tab content",
              tags$a(href = "#shiny-tab-dashboard", `data-toggle` = "tab",
                     class = "btn btn-default mimic-menu",
                     `data-value` = "dashboard", "Click to go to dashboard")
      ),
      tabItem("subitem2",
              "Sub-item 2 tab content",
              tags$a(href = "#shiny-tab-dashboard", `data-toggle` = "tab",
                     class = "btn btn-default mimic-menu",
                     `data-value` = "dashboard", "Click to go to dashboard")
      )
   )
)

shinyApp(
   ui = dashboardPage(header, sidebar, body),
   server = function(input, output)  
)

说明

我们需要做的就是使用<a>标签，它设置属性data-toggle = "tab"和data-value = <name of the tab we want to switch to>。 然后，bootstrap 会自动为我们进行切换。 但是，这会导致侧边栏中最后一个选择的菜单项突出显示的不干净状态，即使我们切换了选项卡也是如此。 因此，我们添加了一些自定义 JavaScript，它们会在点击自制链接时做出反应，以在侧边栏菜单中选择正确的项目。 为了使链接具有按钮的外观和感觉，我们添加了btn 和btn-default 类。 mimic-menu 类是功能性的，允许触发上述代码。

截图

【讨论】：

谢谢！不幸的是，它没有用。该按钮有效，但会打开一个空白链接。

好吧，如果没有一个最小的工作示例，就很难说清楚。我展示的示例至少可以在我的 PC 上运行。我将添加一个 gif 来显示。

感谢您的帮助。我在这方面真的很陌生，我还在学习如何做事。