复选框组中的ShinyBS Modal [英] shinyBS Modal within checkbox group

问题描述

我使用shinyBS::bsModal()在此处放置UI元素的说明.当我在复选框的标题后面放置bsButton()时，它会很好用.

I use shinyBS::bsModal() to place explanations of the UI elements there. It works great when I place a bsButton() behind the title of the checkbox.

现在，我要将其放置在复选框选项的后面. 第一个提示可能是此答案，其中相同工具提示已完成(但我的修改不起作用).

Now I want to place it behind the checkbox options. A first hint could be this answer where the same for a tooltip is done (but my modification do not work).

最小示例:

library(shiny)
library(shinyBS)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      checkboxGroupInput("qualdim",  
                         tags$span("Chekboxoptions",   
                             bsButton("modalbt", "?", style = "inverse", size = "extra-small")),

                         c("Option_1" = "Option_1", 
                           "Option_2" = "Option_2"))
    ),

    mainPanel(
      bsModal("modalExample", "Modal", "modalbt", size = "large",
           verbatimTextOutput("helptext")))
  )
)

server <- function(input, output) {
  output$helptext <- renderText({"I can trigger a shinyBS::bsModal() from here, but I want to place two buttons behind `Option_1` and     `Option_2`" })
}

shinyApp(ui = ui, server = server)

推荐答案

bsModal可以在任何地方使用，只是将按钮ID用作触发器.因此，您唯一需要做的就是在checkboxGroup中获得合适的按钮.从上一个链接的问题/答案"中，您已经具有在组输入中获取bsButton的功能. (只需删除已分配工具提示的行.此处不需要.)

The bsModal works anywhere and just takes the button id as a trigger. So the only thing you need to do is to get a suitable button inside the checkboxGroup. From the previous Question/Answer you linked, you already have the function to get a bsButton inside the group input. (Just erase the line where the tooltip has been assigned. This is not needed here.)

下面的代码现在基本上是复制粘贴.我刚刚添加了一些额外的bsButton设置，例如大小，样式和ID(这一点很重要！在带有工具提示的链接问题中不重要！)，这样您可以更像您将使用bsButton.

The code below basically is copy paste now. I just added some extra bsButton settings like size, style and id (this one is important! was not important in the linked question with the tooltips!), such that you can use the function more like you would use bsButton.

library(shiny)
library(shinyBS)

makeCheckboxButton <- function(checkboxValue, buttonId, buttonLabel, size = "default", style = "default"){
    size <- switch(size, `extra-small` = "btn-xs", small = "btn-sm", 
        large = "btn-lg", "default")
    style <- paste0("btn-", style)

    tags$script(HTML(paste0("
          $(document).ready(function() {
            var inputElements = document.getElementsByTagName('input');
            for(var i = 0; i < inputElements.length; i++){
              var input = inputElements[i];

              if(input.getAttribute('value') == '", checkboxValue, "'){

                var button = document.createElement('button');
                button.setAttribute('id', '", buttonId, "');
                button.setAttribute('type', 'button');
                button.setAttribute('class', '", paste("btn action-button", style , size), "');
                button.appendChild(document.createTextNode('", buttonLabel, "'));

                input.parentElement.parentElement.appendChild(button);
             };
            }
          });
        ")))
}

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      checkboxGroupInput("qualdim", label = "Chekboxoptions", choices = c("Option_1", "Option_2")),
      makeCheckboxButton("Option_1", "modalbt", "?", size = "extra-small", style = "inverse")
    ),

    mainPanel(
      bsModal("modalExample", "Modal", "modalbt", size = "large",
           verbatimTextOutput("helptext")))
  )
)

server <- function(input, output) {
  output$helptext <- renderText({"I can trigger a shinyBS::bsModal() from here, but I want to place two buttons behind `Option_1` and     `Option_2`" })
}

shinyApp(ui = ui, server = server)

这篇关于复选框组中的ShinyBS Modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！