将JavaScript代码链接到R窗口小部件

摘要：我想在R中调整JavaScript库（即OwlCarousel2），更准确地说是在R中。到目前为止，我已经完成了几个步骤，但是我找不到在HTML结构末尾（就在正文末尾之前）附加必要的JS脚本的方法

---

OwlCarousel2

是一个库，允许创建卡片并使其滑动。有关更多详细信息，请参阅

到目前为止我所做的：

• 首先，我检查了我是否只能用HTML、CSS和JS重现这个库的预期行为，如下所示

• 然后我试着用R来适应这个。基本上，我创建了嵌入原始HTML的函数，我将JS和CSS放在

  www

  中，然后运行应用程序以确保它工作正常。它做到了：卡片被展示，并且有幻灯片的行为。但这有点混乱，所以我决定把它变成一个包，这样我（和其他人）可以更容易地重用它

• 为了将其转换为一个包，我使用了两个来源：

• 软件包附带的文件名

  {palaude}

• 这是关于R和Javascript的

我做了三个函数：

owl\u carousel\u item（）

来创建卡片，

owl\u carousel（）

来使用类

slider owl carousel

将卡片嵌入

div

，以及

html\u dependency\u owlcarousel（）

来包含依赖项

html_dependency_owlcarousel <- function() {
  htmltools::htmlDependency(
    name = "owl.carousel",
    version = "2.3.4",
    package = "shinymisc",
    src = "htmlwidgets/owl_carousel",
    script = c("owl.carousel.min.js", "owl.carousel.js"),
    stylesheet = c("owl.carousel.min.css", "style.css"),
    all_files = FALSE
  )
}

owl_carousel <- function(id, ...) {

  tag <- htmltools::tags$div(
    id = id,
    class = "slider owl-carousel",
    ...
  )

  htmltools::tagList(
    tag,
    html_dependency_owlcarousel()
  )
}

owl_carousel_item <- function(title, subtitle, content = NULL, button_text = NULL, width = "300px") {

  if (!is.null(button_text))
    button <- shiny::tags$div(class = "btn", value = button_text)
  else
    button <- NULL

  shiny::tags$div(
    class = "card",
    style = paste0("width: ", width),
    shiny::tags$div(class = "img"),
    shiny::tags$div(
      class = "content",
      shiny::tags$div(class = "title", title),
      shiny::tags$div(class = "sub-title", subtitle),
      shiny::tags$p(content),
      button
    )
  )

}

请记住，这些选项应该可以通过函数

owl_carousel（）

进行编辑（因此仅将其粘贴在

owl_carousel（）

中的

tag

末尾是不够的）

我知道这一定不是很清楚，所以这是我到目前为止所做的

注意：这应该没有其他小部件那么难。这里没有

*输出

或

渲染*

函数，没有数据，只有一个嵌入框并使其滑动的函数

编辑：一些代码来测试它是否工作（它应该显示两张卡和一个动画）：

库（闪亮）
图书馆（整版）
ui解决方案是将
owl_carousel.js
移动到
inst/htmlwidgets
中，并修改
renderValue
函数以包含提供的
jQuery
代码

renderValue:function（x）{
//TODO:呈现小部件的代码，例如。
el.innerHTML=x.message；
$（“.slider”）.owlCarousel({
循环：对，
自动播放：对，
自动播放超时：2000，//2000ms=2s；
自动播放暂停：对，
})
}

并将
owl_carousel
函数的返回值更改为：

owl_carousel可能会在标签列表中添加一个
htmltools:：tags$script（'ur jquery code here'）
。谢谢，这适用于
shinny:：fluidPage
，但不适用于其他布局，例如
fullPage:：fullPage
，因为脚本在HTML结构中似乎“太高”。此外，将javascript链接到包中的函数似乎不是一种干净的方法。您能提供一个MWE以便我测试它吗。也谢谢你做得更好，所以如果你等着内容被加载，我可能已经知道如何在“经典”的环境下工作了。在这里，我的问题是因为它是一个R包，并且结构非常不同。因此，我无法生成MWE。但是，你可以下载我在帖子中链接的回购协议，以了解我的真实情况。这是行不通的。我在帖子中添加了一个示例，以便轻松测试代码是否有效。在本例中，应用修改后，没有错误，但什么都不是displayed@bretauvjquery没有找到
owlCarousel
函数会导致错误，可能是
fullPage
使用的jquery版本与
owlCarousel
fullPage使用的jquery版本之间存在冲突。它在打印小部件和
shinny:：fluidPage
事实上，我必须在浏览器中打开它。但是，css样式没有应用（与以前不同）。你能做一个回购的叉子，这样我就可以得到你所拥有的东西吗？
$(".slider").owlCarousel({
    loop: true,
    autoplay: true,
    autoplayTimeout: 2000, //2000ms = 2s;
    autoplayHoverPause: true,
  });

library(shiny)
library(fullPage)

ui <- fullPage(
  menu = c("Section 1" = "section1"),
  pageSection(
    menu = "section1",
    owl_carousel(
      id = "test",
      owl_carousel_item(
        title = "test1",
        subtitle = "subtitle1",
        content = "this is a test"
      ),
      owl_carousel_item(
        title = "test2", 
        subtitle = "subtitle2", 
        content = "this is a test", 
        button_text = "button to click"
      )
    )
  )
)

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

shinyApp(ui, server)