Question

不确定为什么knitr在代码块之后不能识别</div>。我正在尝试在HTML页面中使用JQuery Tabs并且有一个代码块来为每个选项卡创建一个googlevis图表或ggplot图表，但是在图表knitr无法识别</div>之后。如您所见，knitr下面的结果无法识别第一个选项卡的结束</div>和第二个选项卡的开头。

代码：

<head>
<meta charset="utf-8">

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="jstree/dist/themes/default/style.min.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="jstree/dist/jstree.min.js"></script>

<script>
$(function() { $( "#tabs" ).tabs(); });
$(function () { $('#tree').jstree({ "plugins" : [ "wholerow" ]}); });
</script>
</head>

<style>
title { 
  margin-left: auto; 
  margin-right: auto; 
}

#container {
  width: 1320px;
  margin: 0 auto;
  text-align: left;
  float: left;
}

#tabs {
  width: 1020px;
  float: right;
  box-shadow: 10px 10px 5px #888888;
  border: 5px inset;
  border-top-color: #98bf21;
  border-right-color: #98bf80;
  border-bottom-color: #98bf21;
  border-left-color: #98bf80;
}

#tree {
  width: 240px;
  float: left;
  overflow: auto;
  box-shadow: 10px 10px 5px #888888;
  border: 5px inset;
  padding:3px;
  border-top-color: #98bf21;
  border-right-color: #98bf80;
  border-bottom-color: #98bf21;
  border-left-color: #98bf80;
}
</style>

<div id="container">
  <div id="tree">
    <ul id="treeData" style="display: none;">
      <li id="id1" title="Look, a tool tip!">item1 with key and tooltip
      <li id="id3" class="folder">Folder with some children
        <ul>
          <li id="id3.1">Sub-item 3.1
            <ul>
              <li id="id3.1.1">Sub-item 3.1.1
              <li id="id3.1.2">Sub-item 3.1.2
            </ul>
          <li id="id3.2">Sub-item 3.2
            <ul>
              <li id="id3.2.1">Sub-item 3.2.1
              <li id="id3.2.2">Sub-item 3.2.2
            </ul>
        </ul>
    </ul>
  </div>

  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Tab 1</a></li>
      <li><a href="#tabs-2">Tab 2</a></li>
      <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
```{r chart1, echo=FALSE, results='asis'}
suppressPackageStartupMessages(library(googleVis))
suppressPackageStartupMessages(library(ggplot2))
op <- options(gvis.plot.tag='chart')
dat <- data.frame(Room=c("Room 1","Room 2","Room 3"),
Language=c("English", "German", "French"),start=as.POSIXct(c("2014-03-14 14:00",
"2014-03-14 15:00","2014-03-14 14:30")),end=as.POSIXct(c("2014-03-14 5:00","2014-03-14 16:00","2014-03-14 15:30")))
R <- gvisTimeline(data=dat,rowlabel="Room", barlabel="Language",start="start", end="end")
plot(R)
```
    </div>

    <div id="tabs-2">
tab 2!
    </div>

    <div id="tabs-3">
tab 3!
    </div>
  </div>
</div>

结果： enter image description here

Answer 1

不知道它是否适合你的额外图书馆的情况，但是我在rmd里面用jquery标签出现了类似的问题，用knitr制作。

我只是把ul / li tab结构作为一个衬里;标签有效。

在这种情况下，我将jquery下载到文件夹，因为我需要离线。

在下面的示例代码中，您可以将其作为复制/粘贴进行测试。

<link rel="stylesheet" href="js/jquery-ui.structure.min.css">
<link rel="stylesheet" href="js/jquery-ui.theme.min.css" />
<link rel="stylesheet" href="js/jquery-ui.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(function() {

    $( "#accordion" ).accordion();
    $( "#tabs" ).tabs();
});
</script>


<div id="tabs">
  <ul><li><a href='#tabs-1'>Tarea 1</a></li><li><a href='#tabs-2'>Tarea 2. Ampliación del dataset</a></li><li><a href='#tabs-3'>Tarea 3.  </a></li><li><a href='#tabs-4'>Conclusiones</a></li><li><a href='#tabs-5'>Notas</a></li></ul>
  <div id="tabs-1">
    the bla bla
  </div>
  <div id="tabs-2">

```{r , echo=FALSE, warning=FALSE,message=FALSE}
datosMetadata <-  c(1,2)
datosMetadata
```

  </div>
  <div id="tabs-3">

  ```{r , echo=FALSE, warning=FALSE,message=FALSE}
    # Simple Scatterplot
    attach(mtcars)
    plot(wt, mpg, main="Scatterplot Example",xlab="Car Weight ", ylab="Miles Per Gallon ", pch=19)
   ```
  </div>
  <div id="tabs-4">

  </div>
  <div id="tabs-5">

  </div>
</div>

重要的代码部分（如果它完成了一个衬里，如果没有一个衬里，它会逃脱一些HTML）。

...

<div id="tabs">
  <ul><li><a href='#tabs-1'>Tarea 1</a></li><li><a href='#tabs-2'>Tarea 2. Ampliación del dataset</a></li><li><a href='#tabs-3'>Tarea 3.  </a></li><li><a href='#tabs-4'>Conclusiones</a></li><li><a href='#tabs-5'>Notas</a></li></ul>

...

希望它有所帮助！

knitr问题识别关闭JQuery UI Tab

1 个答案: