Question

slick javascript库（http://kenwheeler.github.io/slick/）给我留下了深刻印象，并希望将其合并到我的闪亮应用/光盘页面中。

我想使用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

      }

    };
  }
});

Answer 1

尝试使用TextViews：

进行尝试

对于依赖项，htmlwidgets_0.6文件看起来一样，我刚刚在yaml上面添加了jQuery：

slick

您可以获取here并将其放在dependencies: - name: jquery version: 3.1.0 src: htmlwidgets/lib script: - jquery-3.1.0.min.js - name: slick ...文件夹中。

在lib文件中，您需要更改slick.R函数的参数以添加选项并更改slick以转发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()应用中使用它：

shiny

使用htmlwidgets :: scaffoldWidget将外部js库合并到一个新包中，以进入一个闪亮的应用程序

1 个答案: