您的位置：首页 > Web前端 > HTML

Shiny应用基础（2）：HTML元素产生方法

2015-07-28 21:17 573 查看

学习Shiny和编辑调试Shiny程序你得养成查看HTML源代码的习惯。在前面的例子中你可能已经发现：写Shiny程序其实就是用“R语言的方式”编写网页。“R语言的方式”，就是函数的方式。Shiny把HTML很多页面元素代码的产生过程“包装”成了特定的函数，我们只需要调用这些函数就能产生固定模式的HTML代码。

事实上，shiny中能够使用的很多HTML相关的函数都不是shiny包自身提供的，本节介绍的函数全部来自htmltools包，shiny通过export方法包含到了它的包环境中，可以直接使用。如果需要查看这些函数的源代码，你得在htmltools中查找。

本节先介绍shiny/htmltools中产生HTML基本元素的方法/函数。

1 HTML()函数

这个函数就是paste函数的变形，它在htmltools包中的代码是这样的：

HTML <- function(text, ...) {
htmlText <- c(text, as.character(list(...)))
htmlText <- paste(htmlText, collapse=" ")
attr(htmlText, "html") <- TRUE
class(htmlText) <- c("html", "character")
htmlText
}

为了得到整洁的HTML代码，我先把paste函数的collapse参数改为“\n”，重新从源代码安装htmltools包。

它的作用很简单，直接把我们键盘敲入的内容连接成字符串，放到HTML文件body标签内，比如下面的shiny代码：

shinyApp(
ui = HTML(
'\n',
'<div style="width: 600px; float:center; margin: 0 auto;">',
'<h1>这是主标题</h1>',
'<h2>这是副标题</h2>',
'<p>这是内容段落</p>',
'</div>',
'<hr/>',
'\n'
),
server = function(input, output, session) {}
)

程序运行后产生页面的HTML代码的body标签内的内容是：

<div style="width: 600px; float:center; margin: 0 auto;">
<h1>这是主标题</h1>
<h2>这是副标题</h2>
<p>这是内容段落</p>
</div>
<hr/>

如果你熟悉HTML代码编写，可以考虑用这种方法产生所需要的网页内容。

2 常用HTML标签函数

除了使用HTML函数直接输入HTML代码外，htmltools含提供了常用HTML标签生成函数，shiny中可以直接使用，这些函数包括：

a br code div em h1 h2 h3 h4 h5 h6 hr img p pre span strong

使用这些函数的好处是你不必担心忘记哪些标签需要成对使用：

shinyApp(
ui = div(
h1("这是主标题"),
h2('这是副标题'),
p('这是内容段落'),
hr()
),
server = function(input, output, session) {}
)

运行后在body内产生下面的HTML代码：

<div>
<h1>这是主标题</h1>
<h2>这是副标题</h2>
<p>这是内容段落</p>
<hr/>
</div>

3 标签列表tags

不要想当然地使用你认为应该能用的HTML标签函数。如果你在上面的代码hr()前添加：

li("列表项目1"),
li("列表项目2"),

你会得到错误信息：没有"li"这个函数。解决办法很简单，方法之一是在上面的div函数内嵌套使用HTML函数即可，你可以自己试试。

下面介绍另外一种更为通用的方法：使用tags列表对象。如果我们把li当成tags的列表元素进行使用，程序就可以正确运行：

shinyApp(
ui = div(
h1("这是主标题"),
h2('这是副标题'),
p('这是内容段落'),
tags$li("列表项目1"),
tags$li("列表项目2"),
hr()
),
server = function(input, output, session) {}
)

tags列表的方法可以应用到所有的HTML5标签，甚至还可以自定义标签类型。

更重要的是，tags列表不仅仅可以改变body中的内容，还可以用来修改HTML文件中的其他部分：

shinyApp(
ui = list(
div(class='divclass',
h1('这是主标题'),
h2('这是副标题'),
p('这是内容段落'),
tags$li('列表项目1'),
tags$li('列表项目2'),
tags$script(src='幻灯片播放脚本.js')
),
hr(),
tags$head(
tags$title('页面标题'),
tags$style(
rel='stylesheet',
'h1 {color: red; text-align:center;}',
'.divclass {width: 600px; float:center; margin: 0 auto;}'
)
)
),
server = function(input, output, session) {}
)

运行后得到下面的HTML源代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="application/shiny-singletons"></script>
<script type="application/html-dependencies">json2[2014.02.04];jquery[1.11.0];shiny[0.12.1]</script>
<script src="shared/json2-min.js"></script>
<script src="shared/jquery.min.js"></script>
<link href="shared/shiny.css" rel="stylesheet" />
<script src="shared/shiny.min.js"></script>
<title>页面标题</title>
<style rel="stylesheet">
h1 {color: red; text-align:center;}
.divclass {width: 600px; float:center; margin: 0 auto;}
</style>
</head>
<body>
<div class="divclass">
<h1>这是主标题</h1>
<h2>这是副标题</h2>
<p>这是内容段落</p>
<li>列表项目1</li>
<li>列表项目2</li>
<script src="幻灯片播放脚本.js"></script>
</div>
<hr/>
</body>
</html>

仔细看看你会发现：

前面的标签函数其实是tags标签列表的特例
列表元素tags$head的内容被放置到了head部分，而其他内容则被放到了body内
列表元素的参数中，有名参数被转成HTML标签的属性，而无名参数则被当成便签的内容

很显然，使用tags列表可以随时方便地引入我们需要的任何内容，包括样式表和脚本文件。

Author: ZGUANG@LZU
Created: 2015-07-28 二 21:15
Emacs 24.3.1 (Org mode 8.2.1)
Validate

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航