haf*_*aff 9 javascript r r-markdown flexdashboard
我想在单击右箭头(演示样式)时使flexdashboard / storyboard上的项目符号项逐渐显示。如何做到这一点?我正在猜测一些Javascript,但不知道从哪里开始。从Rmd导出的Ioslides可以选择增量项目符号,但是我希望能够在每个幻灯片的基础上进行,并且无论如何我都希望Flexdashboard / storyboard具有更大的灵活性。
查看此MWE:
---
title: "How to increment?"
output:
flexdashboard::flex_dashboard:
storyboard: true
---
### Slide 1
```{r}
hist(rnorm(100))
```
***
- I want these bullets
- to appear
- incrementally
### Slide 2
```{r}
hist(runif(100))
```
***
- I want these bullets
- to appear
- all at once
- when this slide
- comes up
Run Code Online (Sandbox Code Playgroud)
对我有用的解决方案是下拉到knitr并使用原始html输出的指令。Rest 是一个有点丑陋的 javascript。(并不是说 javascript 很丑陋。只是我使用了丑陋的方式来实现预期的结果。肯定有一种更干净的方式来做同样的事情。)
请注意,这是最小的示例 - 该解决方案当前处理整个文档的 onclick 事件,而不考虑其他任何事情。因此,如果您决定走这条路,您将不得不处理诸如从第二张幻灯片返回等情况。
---
title: "How to increment?"
output:
flexdashboard::flex_dashboard:
storyboard: true
---
### Slide 1
```{r}
hist(rnorm(100))
```
***
```{r}
knitr::raw_html("<ul>")
knitr::raw_html("<li id='test1' style='display:none'> I want these bullets </li>")
knitr::raw_html("<li id='test2' style='display:none'> to appear </li>")
knitr::raw_html("<li id='test3' style='display:none'> incrementally </li>")
knitr::raw_html("</ul>")
```
```{js}
displayed = 0;
display = function() {
displayed++;
id = "test" + displayed;
el = document.getElementById(id);
el.style.display = "list-item";
}
document.onclick=display
```
### Slide 2
```{r}
hist(runif(100))
```
***
- I want these bullets
- to appear
- all at once
- when this slide
- comes up
Run Code Online (Sandbox Code Playgroud)