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基本元素的方法/函数。
为了得到整洁的HTML代码,我先把paste函数的collapse参数改为“\n”,重新从源代码安装htmltools包。
它的作用很简单,直接把我们键盘敲入的内容连接成字符串,放到HTML文件body标签内,比如下面的shiny代码:
程序运行后产生页面的HTML代码的body标签内的内容是:
如果你熟悉HTML代码编写,可以考虑用这种方法产生所需要的网页内容。
使用这些函数的好处是你不必担心忘记哪些标签需要成对使用:
运行后在body内产生下面的HTML代码:
你会得到错误信息:没有"li"这个函数。解决办法很简单,方法之一是在上面的div函数内嵌套使用HTML函数即可,你可以自己试试。
下面介绍另外一种更为通用的方法:使用tags列表对象。如果我们把li当成tags的列表元素进行使用,程序就可以正确运行:
tags列表的方法可以应用到所有的HTML5标签,甚至还可以自定义标签类型。
更重要的是,tags列表不仅仅可以改变body中的内容,还可以用来修改HTML文件中的其他部分:
运行后得到下面的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
事实上,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
相关文章推荐
- HTML入门
- innerHTML,innerText,outHTML的用法及区别详解
- 强制html元素不随窗口缩小而换行
- XHTML基础
- html 横线的代码
- Get和POST表单提交方式详解
- html布局方式:div和table
- html不常见问题汇总
- HTML表格布局实际使用详解
- HTML 表格(2)
- HTML 表格(1)
- 当html页面乱码需要修改编码时
- HTML图片和文字一行时的对齐方式
- html如何在两个button之间天加空格
- HTML 表格
- 【HTML学习】第四章 更丰富的内容标记方法
- html部分标签学习
- HTML中引号多层嵌套的问题
- 使用正则表达式匹配HTML 下各种<title>标签
- html 默认 版本