光滑的
javascript库(
http://kenwheeler.github.io/slick/)给我留下了深刻的印象,并希望将它融入我的闪亮应用程序/ flexboard页面.
我想使用R中的htmlwidgets包合并slick js库,所以已经开始尝试创建一个包,如在线文档(http://www.htmlwidgets.org/develop_intro.html)中所建议的那样,通过执行以下操作…
devtools::create("slick")
setwd("slick")
htmlwidgets::scaffoldWidget("slick")
我从https://github.com/kenwheeler/slick/archive/1.6.0.zip下载了js库
并将其放入包的结构中,以便我有一个看起来有点像这样的文件结构.
R/ | slick.R inst/ |-- htmlwidgets/ | |-- slick.js | |-- slick.yaml | |-- lib/ | | |-- slick-1.6.0/ | | | |-- slick/ | | | | |-- slick.min.js | | | | |-- slick.js | | | | |-- slick.css | | | | |-- slick-theme.css
我的slick.yaml文件看起来像这样……
dependencies:
- name: slick
version: 1.6.0
src: htmlwidgets/lib/slick-1.6.0
script:
- slick/slick.min.js
- slick/slick.js
stylesheet:
- slick/slick.css
- slick/slick-theme.css
但我真的很困惑如何调整inst / htmlwidget / slick.js文件和R / slick.R文件的方式可以采用网址向量并在闪亮的应用程序中显示它们.这样做的原因是,它似乎与提供的示例不匹配类似的输入数据概念.
为了重现性并使用包中示例中提供的相同URL,我提供了一个占位符img url的向量,我想将其用作内容.对于旋转木马中的每个图像.
image_vec <- paste0("http://placehold.it/350x300?text=",seq(1:9))
也许我可能需要使用这样的东西？…
lapply(image_vec,function(y){div(img(src=y))})
一如既往,对此的任何帮助都将非常感激.
编辑
我的新slick.yaml文件看起来如下……在@ NicE的回答后…我错过了什么？
dependencies:
- name: jquery
version: 3.1.0
src: htmlwidgets/lib
script:
- jquery-3.1.0.min.js
- name: slick
version: 1.6.0
src: htmlwidgets/lib/slick-1.6.0
script:
- slick/slick.min.js
- slick/slick.js
stylesheet:
- slick/slick.css
- slick/slick-theme.css
现在我的文件结构如下所示：
R/ | slick.R inst/ |-- htmlwidgets/ | |-- slick.js | |-- slick.yaml | |-- lib/ | | |-- jquery-3.1.0.min.js | | |-- slick-1.6.0/ | | | |-- slick/ | | | | |-- slick.min.js | | | | |-- slick.js | | | | |-- slick.css | | | | |-- slick-theme.css
我的/inst/htmlwidgets/slick.js如下所示
HTMLWidgets.widget({
name: 'slick',type: 'output',factory: function(el,width,height) {
// TODO: define shared variables for this instance
// create new slick object witht the given id?
var sl = new slick(el.id);
return {
renderValue: function(x) {
//add class to the div and center it
el.setAttribute("class",x.class);
el.style.margin = "auto";
//add images to the div
content='';
for(var image in x.message)
{
content += '<div><img src="' + x.message[image] + '"/></div>';
}
el.innerHTML = content;
//initialize the slider.
$(document).ready(function(){
$("."+x.class).slick(x.options);
});
},resize: function(width,height) {
// TODO: code to re-render the widget with a new size
}
};
}
});
解决方法
这是一次使用htmlwidgets_0.6的尝试：
对于依赖项,yaml文件看起来是一样的,我刚刚在slick上面添加了jQuery：
dependencies:
- name: jquery
version: 3.1.0
src: htmlwidgets/lib
script:
- jquery-3.1.0.min.js
- name: slick ...
在slick.R文件中,您需要更改slick函数的参数以添加选项并更改x以将所有参数转发到JS代码：
slick <- function(message,class="slick_slider",options = list(),width = NULL,height = NULL) {
# forward options using x
x = list(
message = message,class = class,options = options
)
...
在slick.js中,您主要需要更改renderValue以将图像/内容添加到div并显示轮播：
renderValue: function(x) {
//add class to the div and center it
el.setAttribute("class",x.class)
el.style.margin = "auto";
//add images to the div
content='';
for(var image in x.message)
{
content += '<div><img src="' + x.message[image] + '"/></div>';
}
el.innerHTML = content;
//initialize the slider.
$(document).ready(function(){
$("."+x.class).slick(x.options);
});
}
一旦使用devtools :: install()安装它,就可以在闪亮的应用程序中使用它：
library(shiny)
library(htmlwidgets)
library(slick)
server <- function(input,output) {
output$test_slick <- renderSlick({
slick(paste0("http://placehold.it/350x300?text=",1:9),options=list(dots=TRUE,autoplay=TRUE))
})
}
ui <- fluidPage(
tags$style(HTML("body {background-color: #2682d5}")),slickOutput('test_slick',width="350px",height="300px")
)
shinyApp(ui = ui,server = server)
