- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我对 slick
javascript 库 ( http://kenwheeler.github.io/slick/ ) 印象深刻,并想将其合并到我 Shiny 的应用程序/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
文件我真的很困惑网址矢量并将它们显示在 Shiny 的应用程序中。这样做的原因是它似乎与提供的示例中的输入数据概念不匹配。
为了可重复性并使用包中示例中提供的相同 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 ...
可以得到here并将其放入 lib
文件夹中。
在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()
安装后,您可以在 shiny
应用中使用它:
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)
关于javascript - 使用 htmlwidgets::scaffoldWidget 将外部 js 库合并为一个新包以进入 Shiny 的应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38563958/
我正在学习构建单页应用程序 (SPA) 所需的所有技术。总而言之,我想将我的应用程序实现为单独的层,其中前端仅使用 API Web 服务(json 通过 socket.io)与后端通信。前端基本上是
当我看到存储在我的数据库中的日期时。 这是 正常 。日期和时间就是这样。 但是当我运行 get 请求来获取数据时。 此格式与存储在数据库 中的格式不同。为什么会发生这种情况? 最佳答案 我认为您可以将
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我正在尝试使用backbone.js 实现一些代码 和 hogan.js (http://twitter.github.com/hogan.js/) Hogan.js was developed ag
我正在使用 Backbone.js、Node.js 和 Express.js 制作一个 Web 应用程序,并且想要添加用户功能(登录、注销、配置文件、显示内容与该用户相关)。我打算使用 Passpor
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
我尝试在 NodeJS 中加载数据,然后将其传递给 ExpressJS 以在浏览器中呈现 d3 图表。 我知道我可以通过这种方式加载数据 - https://github.com/mbostock/q
在 node.js 中,我似乎遇到了相同的 3 个文件名来描述应用程序的主要入口点: 使用 express-generator 包时,会创建一个 app.js 文件作为生成应用的主要入口点。 通过 n
最近,我有机会观看了 john papa 关于构建单页应用程序的精彩类(class)。我会喜欢的。它涉及服务器端和客户端应用程序的方方面面。 我更喜欢客户端。在他的实现过程中,papa先生在客户端有类
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我是一个图形新手,需要帮助了解各种 javascript 2D 库的功能。 . . 我从 Pixi.js 中得到了什么,而我没有从 Konva 等基于 Canvas 的库中得到什么? 我从 Konva
我正在尝试将一些 LESS 代码(通过 ember-cli-less)构建到 CSS 文件中。 1) https://almsaeedstudio.com/ AdminLTE LESS 文件2) Bo
尝试查看 Express Passport 中所有登录用户的所有 session ,并希望能够查看当前登录的用户。最好和最快的方法是什么? 我在想也许我可以在登录时执行此操作并将用户模型数据库“在线”
我有一个 React 应用程序,但我需要在组件加载完成后运行一些客户端 js。一旦渲染函数完成并加载,运行与 DOM 交互的 js 的最佳方式是什么,例如 $('div').mixItUp() 。对
请告诉我如何使用bodyparser.raw()将文件上传到express.js服务器 客户端 // ... onFilePicked(file) { const url = 'upload/a
我正在尝试从 Grunt 迁移到 Gulp。这个项目在 Grunt 下运行得很好,所以我一定是在 Gulp 中做错了什么。 除脚本外,所有其他任务均有效。我现在厌倦了添加和注释部分。 我不断收到与意外
我正在尝试更改我的网站名称。找不到可以设置标题或应用程序名称的位置。 最佳答案 您可以在 config/ 目录中创建任何文件,例如 config/app.js 包含如下内容: module.expor
经过多年的服务器端 PHP/MySQL 开发,我正在尝试探索用于构建现代 Web 应用程序的新技术。 我正在尝试对所有 JavaScript 内容进行排序,如果我理解得很好,一个有效的解决方案可以是服
我是 Nodejs 的新手。我在 route 目录中有一个 app.js 和一个 index.js。我有一个 app.use(multer....)。我还定义了 app.post('filter-re
我正在使用 angular-seed用于构建我的应用程序的模板。最初,我将所有 JavaScript 代码放入一个文件 main.js。该文件包含我的模块声明、 Controller 、指令、过滤器和
我是一名优秀的程序员,十分优秀!