R Shiny：使用 navbarPage 和 shinyBS 的 bsModal答案

【问题标题】：R Shiny: Use navbarPage with bsModal by shinyBSR Shiny：使用 navbarPage 和 shinyBS 的 bsModal
【发布时间】：2016-07-31 13:08:54
【问题描述】：

我正在尝试在 navbarPage 中添加一个 tabPanel，以便当您单击它时会打开一个模式窗口而不是一个新选项卡。下面的 sn-p 无效，因为 tabPanel 没有 id 参数。

library(shiny)
library(shinyBS)
shinyUI(fluidPage(
    navbarPage("Sample App", id = "main_menu", 
        tabPanel("Open Modal", id = "moda")),
    bsModal("modal1", "Example", "moda", p("This is a modal"))
)

如果我从浏览器编辑生成的 HTML 代码，我可以通过更改行来实现这一点

<a href="#tab-9741-5" data-toggle="tab" data-value="Open Modal">Open Modal</a>

与

<a href="#" data-toggle="modal" data-target="#modal1">Open Modal</a>

在<li> 元素上。

知道如何执行此操作，或者至少如何覆盖闪亮生成的 html？

【问题讨论】：

既然您并没有真正使用 tabPanel，为什么不直接使用链接。如果您喜欢使用 CSS，您可以将其设置为类似于标签的样式（只需检查标签标题的 CSS 样式并将其用于您的链接）
我知道 tabPanel 在这里实际上没用，但我不确定如何直接使用 navbarPage 内的链接，因为它只允许 tabPanel 对象。

标签： r shiny shinybs

【解决方案1】：

一种解决方案是使用 Javascript 重写选项卡标题的属性。下面的JS代码找到标签标题链接，并重写了它的属性。

library(shiny)

jsStr <- '$(document).ready(function(){
  $("a[data-value=\'OpenModal\']").attr({
    "href":"#", 
    "data-toggle":"modal",
    "data-target":"#modal1"
  });
})
' 

ui <- shinyUI(fluidPage(
  tags$head(tags$script(HTML(jsStr))),
  navbarPage("title",
    tabPanel("OpenModal")
  ),
  bsModal("modal1", "Example", "moda", p("This is a modal"))
))

【讨论】：