搜索
查看: 1694|回复: 0

用shinyJS包来丰富网页应用

[复制链接]

634

主题

1182

帖子

4030

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4030
发表于 2017-5-2 16:41:01 | 显示全部楼层 |阅读模式
shiny本身是希望人们不需要学习html/css/js,但是我觉得这不可能。
不过可以用R包它们包装一下,比如shinyJS,就是一个例子,不需要接触JS的底层代码,只需要用几个函数就好啦~
作者的博客对shinyJS的介绍很赞,我就不翻译了,反正很容易看懂,重要的就是实践而已
http://deanattali.com/2015/04/23/shinyjs-r-package/
需要熟练使用几个函数如下:
[AppleScript] 纯文本查看 复制代码
show/hide/toggle - display or hide an element. There are arguments that control the animation as well, though animation is off by default.

hidden - initialize a Shiny tag as invisible (can be shown later with a call to show)

enable/disable/toggleState - enable or disable an input element, such as a button or a text input.

info - show a message to the user (using JavaScript’s alert under the hood)

html - change the text/HTML of an element (using JavaScript’s innerHTML under the hood)

onclick - run R code when an element is clicked. Was originally developed with the sole purpose of running a shinyjs function when an element is clicked, though any R code can be used.

addClass/removeClass/toggleClass - add or remove a CSS class from an element

inlineCSS - easily add inline CSS to a Shiny app

logjs - print a message to the JavaScript console (mainly used for debugging purposes)


总结一下:
就是要搞清楚UI和SERVER端分别用什么,如何互动即可。
shinyjs::inlineCSS(list(.big = "font-size: 2em"))可以用来对网页添加样式,然后就可以用toggleClass("myapp", "big", input$big)来切换样式,如果input$big这个checkbox被选中了,就切换到big这个样式。
如果是一个按钮,就可以用toggleState("submit", !is.null(input$name) && input$name != "")来控制,只有当input$name这个输入框里面被用户输入了字符,这个按钮才能被启动。

还有:
[AppleScript] 纯文本查看 复制代码
p("Timestamp: ",
          span(id = "time", date()),
          a(id = "update", "Update", href = "#")
        )
创造一个区域来接收用户点击,根据用户点击的信号来更新:
[AppleScript] 纯文本查看 复制代码
shinyjs::onclick("update", shinyjs::html("time", date())) 


还有可以在UI端创造隐藏界面,通过点击来使之显现:
[AppleScript] 纯文本查看 复制代码
    a(id = "toggleAdvanced", "Show/hide advanced info", href = "#"),
        shinyjs::hidden(
          div(id = "advanced",
              numericInput("age", "Age", 30),
              textInput("company", "Company", "")
          )

默认两个控件是被shinyjs::hidden隐藏的,当toggleAdvanced被点击的时候,就可以显现啦:
[AppleScript] 纯文本查看 复制代码
 shinyjs::onclick("toggleAdvanced",
                     shinyjs::toggle(id = "advanced", anim = TRUE))  







你这个问题很复杂,需要打赏,请点击 http://www.bio-info-trainee.com/donate 进行打赏,谢谢
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|生信技能树 ( 粤ICP备15016384号  

GMT+8, 2019-8-22 22:39 , Processed in 0.032111 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.