主页 / coding / 问题 / 77033037
Accepted
TarJae
Asked: 2023-09-03 23:42:52 +0800 CST

如何在shinyjqui中将第七种颜色添加到orderInput

  • 772

该包orderInput()中的函数shinyjqui利用六个预定义的 Bootstrap 按钮类来设置其显示的项目的样式。可以使用参数指定这些样式item_class。有关更多详细信息，请参阅文档。

我尝试添加其他类（该orderInput()函数），该函数似乎被设计为仅接受六个预定义的 Bootstrap 按钮类（default、primary、success、info、warning、danger）。

我这可能吗？

library(shiny)
library(shinyjqui)

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML("
            .grey { background-color: grey; color: white; }
           ")
    )
  ),
  
  uiOutput("custom_orderInput")
)

server <- function(input, output, session) {
  
  output$custom_orderInput <- renderUI({
    
    tagList(
      orderInput('default', 'default', items = 1:3, item_class = 'default'),
      orderInput('primary', 'primary', items = 1:3, item_class = 'primary'),
      orderInput('success', 'success', items = 1:3, item_class = 'success'),
      orderInput('info', 'info', items = 1:3, item_class = 'info'),
      orderInput('warning', 'warning', items = 1:3, item_class = 'warning'),
      orderInput('danger', 'danger', items = 1:3, item_class = 'danger'),
      orderInput('grey', 'grey', items = 7:9, item_class = 'grey')
    )
    
  })
  
}

shinyApp(ui, server)

2 个回答

  1. Best Answer

    更新：实施了@Stéphane Laurent 的建议：

    更改.grey > button为#grey > .btn 删除library(shinyjs)和useShinyjs() 并增加 50 至 75

    shinyjqui 的 orderInput() 函数在设计时考虑了 Bootstrap 按钮类。如果该函数本身不支持自定义类，您可能需要应用一些技巧来解决这个问题。

    您已正确定义 .grey 类，但如果 orderInput() 不直接支持自定义类，一种方法是在 Shiny 创建渲染的 HTML 元素后使用 JavaScript 修改它们的 class 属性。

    也许您可以尝试以下解决方法来解决您的问题：

    包含一个shinyjs运行自定义 JS 的函数。运行一个小的 JS 脚本，在渲染后将自定义类添加到所需的元素。现在您可以修改现有代码来实现此目的：

    library(shiny)
library(shinyjqui)

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML("
            .grey { background-color: grey; color: white; }
           ")
    )
  ),
  
  uiOutput("custom_orderInput"),
  
  # Add a JS script to add the 'grey' class to the appropriate elements
  tags$script(
    HTML("
         $(document).on('shiny:connected', function(event) {
           setTimeout(function(){
             $('#grey > .btn').addClass('grey');
           }, 75);
         });
         ")
  )
)

server <- function(input, output, session) {
  
  output$custom_orderInput <- renderUI({
    
    tagList(
      orderInput('default', 'default', items = 1:3, item_class = 'default'),
      orderInput('primary', 'primary', items = 1:3, item_class = 'primary'),
      orderInput('success', 'success', items = 1:3, item_class = 'success'),
      orderInput('info', 'info', items = 1:3, item_class = 'info'),
      orderInput('warning', 'warning', items = 1:3, item_class = 'warning'),
      orderInput('danger', 'danger', items = 1:3, item_class = 'danger'),
      orderInput('grey', 'grey', items = 7:9, item_class = 'default') # Use 'default' as a placeholder
    )
    
  })
  
}

shinyApp(ui, server)

    这种方式利用shinyjs包来集成自定义JS。Shiny 应用程序连接后，JavaScript 会等待一小段时间（本例中为 50 毫秒，但您可以根据需要进行调整），然后将 .grey 类添加到父级内的按钮元素.grey。我们还将 item_class 设置为“default”作为占位符，该占位符将被我们的 JS 覆盖。

    • 2

  2. @0xe1λ7r 的回答很好。也就是说，您可以避免使用setTimeoutwhich 意味着选择延迟，而使用setIntervalandclearInterval代替：

        HTML("
         $(document).on('shiny:connected', function(event) {
            var interval = setInterval(function() {
              var $itemGroup = $('#grey > .btn');
              if($itemGroup.length) {
                $itemGroup.addClass('grey');
                clearInterval(interval);
              }
            }, 10);
         });
   ")

    使用此代码，在闪亮连接后每 10 毫秒检查一次项目组是否存在，一旦检测到，就会添加新类，然后销毁代码。

    • 2

相关问题