复选框组中的ShinyBS Modal

一起

我曾经shinyBS::bsModal()在这里放置有关UI元素的说明。当我bsButton()在复选框标题后面放置一个时,它会很好用

现在,我想将其放在复选框选项的后面。第一个提示可能是这个答案,其中对工具提示进行了相同的操作(但我的修改不起作用)。

最小示例:

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)
罗德(K. Rohde)

bsModal工程的任何地方,只需要按钮标识作为触发。因此,您唯一需要做的就是在中找到合适的按钮checkboxGroup在您之前链接的“问题/答案”中,您已经具有获取bsButton组输入内容的功能。(只需删除已分配工具提示的行。此处不需要。)

下面的代码现在基本上是复制粘贴。我只是添加了一些额外的bsButton设置,例如大小,样式和id(这一点很重要!在与工具提示链接的问题中并不重要!),这样您就可以像使用一样使用该功能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)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

复选框组中的ShinyBS Modal

来自分类Dev

如果复选框组中的复选框被选中,则显示该组复选框

来自分类Dev

必需的复选框组

来自分类Dev

如果复选框组中未选中任何复选框,则显示错误

来自分类Dev

切换复选框组中的复选框

来自分类Dev

如果复选框组中未选中任何复选框,则显示错误

来自分类Dev

如何在 antd 复选框组中单独更新复选框

来自分类Dev

组中至少要选中3个复选框

来自分类Dev

在组中按类别选择所有复选框

来自分类Dev

VB-取消选中组框中的复选框

来自分类Dev

在Angular Watch中获取复选框组值

来自分类Dev

如何在PyQtGraph中实现复选框组

来自分类Dev

选择同一组中的多个复选框

来自分类Dev

在多个复选框组单击的 url 中附加参数

来自分类Dev

ag-Grid 中的组选择和复选框

来自分类Dev

如何仅从组复选框中的另一个复选框中选中所有其他复选框

来自分类Dev

从一组具有相同类名的复选框中获取当前复选框的值

来自分类Dev

从一组具有相同类名的复选框中获取当前复选框的值

来自分类Dev

AngularJS组复选框验证

来自分类Dev

jQuery组复选框问题

来自分类Dev

使CSS组复选框独立工作

来自分类Dev

ReactJS-托管复选框组

来自分类Dev

AngularJS:循环内的复选框组

来自分类Dev

XPage 复选框组样式

来自分类Dev

复选框组选择的动态限制

来自分类Dev

表格中的复选框

来自分类Dev

JavaScript中的复选框

来自分类Dev

LotusScript中的复选框

来自分类Dev

JS中的复选框