R 带有单独悬停下拉选择的闪亮组按钮 [英] R Shiny group buttons with individual hover dropdown selection

问题描述

我希望radioGroupbuttons 在悬停时为组按钮的每个成员显示一个下拉菜单.该按钮的左键单击功能已用于其他目的.我有以下代码使用 bspopover 在悬停时显示文本而不是下拉菜单.即使对于此处的纯文本，bspopover 也无法正常工作.任何解决此问题的建议将不胜感激.我需要为每个按钮 A B C 悬停下拉列表的解决方案可能与我在这里尝试使用 radioGroupButtons 和 bspopover 的解决方案不同.如果您有其他方法，请分享.谢谢！

库(闪亮)库(闪亮的小部件)js <-"$(文档).ready(函数(){$('#THE_INPUT_ID .radiobtn').each(function(i, $el){var 选择器 = '#select' + (i+1);$(这个).qtip({覆盖:真，内容: {文本:$(选择器)},位置: {我的:左上角"，在:右下角"},展示: {准备好:假},隐藏: {事件:'失焦'},事件:{模糊:函数(事件，API){api.elements.tooltip.hide();}},风格: {类:'qtip-blue qtip-rounded'}});});});"ui <-流体页面(标签$头(标签$链接(rel =样式表"，href =jquery.qtip.min.css")，标签$script(src = "jquery.qtip.min.js"),标签$脚本(HTML(js))),br(),单选按钮(inputId =THE_INPUT_ID"，个人=真，label = "做出选择:",选择 = c(A"、B"、C")),br()、br()、br()、逐字文本输出(选择 1")，逐字文本输出(选择 2")，逐字文本输出(selection3")，分区(样式=显示:无；"，选择输入(选择1"，label = "选择一种水果",选择= c(苹果"，香蕉")，选择 = 假),选择输入(选择2"，label = "选择一种水果",选择= c(柠檬"，橙色")，选择 = 假),选择输入(选择3"，label = "选择一种水果",选择= c(草莓"，菠萝")，选择 = 假)))服务器 <- 功能(输入，输出，会话){输出[[select1"]] <-renderPrint(input[[select1"]])输出[[selection2"]] <-renderPrint(input[[select2"]])输出[[selection3"]] <-renderPrint(input[[select3"]])}闪亮的应用程序(用户界面，服务器)

---

编辑

要观察悬停在哪个按钮上，请将此 show 选项添加到 events 选项:

 事件:{模糊:函数(事件，API){api.elements.tooltip.hide();},显示:函数(事件，API){Shiny.setInputValue('hovered', value);}}

那么悬停的按钮在input[[hovered"]]变量中.

I wish to make radioGroupbuttons show a dropdown menu for each member of the group buttons upon hover. The left click functionality of the button is already utilized for another purpose. I have the following code using a bspopover for showing text instead of the dropdown upon hover. The bspopover is not working correctly even for the plain text here. Any suggestions to fix this would be appreciated. The solution I need for hover dropdown for each button A B C could be different than what I have tried here with radioGroupButtons and bspopover.If you have an alternate way, please share. Thanks!

How to make Twitter Bootstrap menu dropdown on hover rather than click has a twitterbootstrap solution which looks relevant but I am not familiar with JS yet.

library(shiny)
library(shinyWidgets)
library(shinyBS)

  ui =
    fluidPage(
        radioGroupButtons(inputId = "somevalue1",individual=T,label = "Make a choice: ",choices = c("A", "B", "C")),
        verbatimTextOutput("value1")
      )
  server =
    function(input, output, session) {
      addPopover(session, "somevalue1", "Data", content = paste0("This wasn't easy"), trigger = 'hover')
      # wish to make the content above a dropdown selection, say between apple and banana for each choice A B C.
    }
  shinyApp(ui, server)

解决方案

Here is a way using the qTip2 JavaScript library.

In order to use it, you have to download the files jquery.qtip.min.css and jquery.qtip.min.js, and put these two files in the www subfolder of the Shiny app.

library(shiny)
library(shinyWidgets)

js <- "
$(document).ready(function(){

  $('#THE_INPUT_ID .radiobtn').each(function(i, $el){
    var selector = '#select' + (i+1);
    $(this).qtip({
      overwrite: true,
      content: {
        text: $(selector)
      },
      position: {
        my: 'top left',
        at: 'bottom right'
      },
      show: {
        ready: false
      },
      hide: {
        event: 'unfocus'
      },
      events: {
        blur: function(event, api) {
          api.elements.tooltip.hide();
        }
      },
      style: {
        classes: 'qtip-blue qtip-rounded'
      }
    });
  });

});
"

ui <- fluidPage(

  tags$head(
    tags$link(rel = "stylesheet", href = "jquery.qtip.min.css"),
    tags$script(src = "jquery.qtip.min.js"),
    tags$script(HTML(js))
  ),

  br(),

  radioGroupButtons(
    inputId = "THE_INPUT_ID",
    individual = TRUE,
    label = "Make a choice: ",
    choices = c("A", "B", "C")
  ),

  br(), br(), br(),

  verbatimTextOutput("selection1"),
  verbatimTextOutput("selection2"),
  verbatimTextOutput("selection3"),

  div(
    style = "display: none;",
    selectInput(
      "select1",
      label = "Select a fruit",
      choices = c("Apple", "Banana"),
      selectize = FALSE
    ),
    selectInput(
      "select2",
      label = "Select a fruit",
      choices = c("Lemon", "Orange"),
      selectize = FALSE
    ),
    selectInput(
      "select3",
      label = "Select a fruit",
      choices = c("Strawberry", "Pineapple"),
      selectize = FALSE
    )
  )

)

server <- function(input, output, session) {

  output[["selection1"]] <- renderPrint(input[["select1"]])
  output[["selection2"]] <- renderPrint(input[["select2"]])
  output[["selection3"]] <- renderPrint(input[["select3"]])

}

shinyApp(ui, server)

---

EDIT

To observe which button is hovered over, add this show option to the events option:

    events: {
      blur: function(event, api) {
        api.elements.tooltip.hide();
      },
      show: function(event, api) {
        Shiny.setInputValue('hovered', value);
      }
    }

Then the hovered button is in the input[["hovered"]] variable.

这篇关于R 带有单独悬停下拉选择的闪亮组按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！