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

问题描述

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

 库（发光）
库（shinyWidgets）
 
 js<-" 
 $ {document）.ready（function（）{
 
 $（'＃THE_INPUT_ID .radiobtn'）。each（function（i，$ el）{
 var选择器= '#select'+（i + 1）; 
 $（this）.qtip（{
 overwrite：true，
 content：{
 text：$（selector）
}，
位置：{
我：左上方，
在：右下方 
}，
节目：{
就绪：false 
}，
隐藏：{
事件：'unfocus'
}，
事件：{
 blur：function（event，api）{ 
 api.elements.tooltip.hide（）; 
} 
}，
样式：{
类：'qtip-blue qtip-rounded'
 } 
}）; 
}）; 
 
}）； 
" 
 
 ui<-fluidPage（
 
 tags $ head（
 tags $ link（rel =" stylesheet" ;, href =" jquery.qtip.min .css），
标签$ script（src = jquery.qtip.min.js），
标签$ script（HTML（js））
），
 
 br（），
 
 radioGroupButtons（
 inputId = THE_INPUT_ID，
 personal = TRUE，
 label =进行选择： ;，
选择= 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 t;，
标签=选择水果，
选择= c（柠檬，橙色），
 selectize =否
），
 selectInput（
 select3，
标签=选择水果，
选择= c（草莓，菠萝），
 selectize = FALSE 
）
）
 
）
 
服务器<-功能（输入，输出，会话）{
 
 output [[ selection1]] ＜-renderPrint（input [[ select1]]）
 output [[ selection2]] ＜-renderPrint（input [[ select2]] ]）
 output [[ selection3]]<-renderPrint（input [[ select3]]）
 
} 
 
 ShinyApp（ui ，服务器）
  

---

EDIT

观察将鼠标悬停在哪个按钮上，请将此显示选项添加到事件选项：

 事件：{
 blur：function（event， api）{
 api.elements.tooltip.hide（）; 
}，
 show：function（event，api）{
 Shiny.setInputValue（'hovered'，value）; 
} 
} 
  

然后将悬停的按钮放在输入中[ [悬停]] 变量。

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屋！