R 闪亮:slickR select 事件
R Shiny: slickR select event
slickR package 有一个 focusOnSelect
选项 - 单击轮播中的图像时,它会突出显示。如何访问选择事件以在 R Shiny 中使用以触发其他操作?具体来说,我想点击一张图片并让它更新带有图片名称的文本框。
要使用下面的示例,请将 3 张图片(image1.jpg、image2.jpg、image3.jpg)放在与应用程序相同的目录中。
library(shiny)
ui <- shiny::basicPage(
slickROutput("my_slick",width='100%',height='200px')
)
server <- function(input, output) {
output$my_slick <- renderSlickR({
my_images <- c("image1.jpg", "image2.jpg", "image3.jpg")
slickR(
my_images,
slideId = 'slick_images',
width='90%'
)
})
}
shinyApp(ui, server)
是你想要的吗?
library(shiny)
library(slickR)
my_images <- c("image1.png", "image2.png", "image3.png")
ui <- shiny::basicPage(
slickROutput("my_slick",width='100%',height='200px'),
tags$p(id="textbox"),
tags$script('var my_images = ["image1.png","image2.png","image3.png"];
$("#my_slick").on("click", function(e){
var slideClicked = $(this).find(".slick-active").attr("data-slick-index");
document.getElementById("textbox").innerHTML = "Selected image: " + my_images[slideClicked];
});')
)
server <- function(input, output) {
output$my_slick <- renderSlickR({
slickR(
my_images,
slideId = 'slick_images',
width='90%'
)
})
}
shinyApp(ui, server)
如果想在Shiny中获取选中图片的名称,在脚本中添加一行:
tags$script('var my_images = ["image1.png","image2.png","image3.png"];
$("#my_slick").on("click", function(e){
var slideClicked = $(this).find(".slick-active").attr("data-slick-index");
Shiny.setInputValue("selectedImage", my_images[slideClicked]);
document.getElementById("textbox").innerHTML = "Selected image: " + my_images[slideClicked];
});')
则所选图像的名称在input$selectedImage
。
编辑
这是 OP 在评论中要求改进的脚本:
tags$script('var my_images = ["image1.png","image2.png","image3.png"];
var binary = true;
$("#my_slick").on("click", function(e){
if(e.target.localName == "img"){
if(binary){
var slideClicked = $(this).find(".slick-active").attr("data-slick-index");
Shiny.setInputValue("selectedImage", my_images[slideClicked]);
document.getElementById("textbox").innerHTML = "Selected image: " + my_images[slideClicked];
}else{
document.getElementById("textbox").innerHTML = "";
}
binary = false;
}else{
document.getElementById("textbox").innerHTML = "";
binary = true;
}
});')
slickR package 有一个 focusOnSelect
选项 - 单击轮播中的图像时,它会突出显示。如何访问选择事件以在 R Shiny 中使用以触发其他操作?具体来说,我想点击一张图片并让它更新带有图片名称的文本框。
要使用下面的示例,请将 3 张图片(image1.jpg、image2.jpg、image3.jpg)放在与应用程序相同的目录中。
library(shiny)
ui <- shiny::basicPage(
slickROutput("my_slick",width='100%',height='200px')
)
server <- function(input, output) {
output$my_slick <- renderSlickR({
my_images <- c("image1.jpg", "image2.jpg", "image3.jpg")
slickR(
my_images,
slideId = 'slick_images',
width='90%'
)
})
}
shinyApp(ui, server)
是你想要的吗?
library(shiny)
library(slickR)
my_images <- c("image1.png", "image2.png", "image3.png")
ui <- shiny::basicPage(
slickROutput("my_slick",width='100%',height='200px'),
tags$p(id="textbox"),
tags$script('var my_images = ["image1.png","image2.png","image3.png"];
$("#my_slick").on("click", function(e){
var slideClicked = $(this).find(".slick-active").attr("data-slick-index");
document.getElementById("textbox").innerHTML = "Selected image: " + my_images[slideClicked];
});')
)
server <- function(input, output) {
output$my_slick <- renderSlickR({
slickR(
my_images,
slideId = 'slick_images',
width='90%'
)
})
}
shinyApp(ui, server)
如果想在Shiny中获取选中图片的名称,在脚本中添加一行:
tags$script('var my_images = ["image1.png","image2.png","image3.png"];
$("#my_slick").on("click", function(e){
var slideClicked = $(this).find(".slick-active").attr("data-slick-index");
Shiny.setInputValue("selectedImage", my_images[slideClicked]);
document.getElementById("textbox").innerHTML = "Selected image: " + my_images[slideClicked];
});')
则所选图像的名称在input$selectedImage
。
编辑
这是 OP 在评论中要求改进的脚本:
tags$script('var my_images = ["image1.png","image2.png","image3.png"];
var binary = true;
$("#my_slick").on("click", function(e){
if(e.target.localName == "img"){
if(binary){
var slideClicked = $(this).find(".slick-active").attr("data-slick-index");
Shiny.setInputValue("selectedImage", my_images[slideClicked]);
document.getElementById("textbox").innerHTML = "Selected image: " + my_images[slideClicked];
}else{
document.getElementById("textbox").innerHTML = "";
}
binary = false;
}else{
document.getElementById("textbox").innerHTML = "";
binary = true;
}
});')