Jos*_*ien 5 javascript jquery r shiny
打电话给numericInput(),像这样:
numericInput("obs", "Observations:", 10, min = 1, max = 100)
Run Code Online (Sandbox Code Playgroud)
像这样构造HTML代码:
<div class="form-group shiny-input-container">
<label for="obs">Observations:</label>
<input id="obs" type="number" class="form-control" value="10" min="1" max="100"/>
</div>
Run Code Online (Sandbox Code Playgroud)
然后,据推测,在浏览器中,HTML doc的标题中包含的一个脚本提供的JavaScript代码会找到该<input>元素并使用下面显示的交互式窗口小部件呈现它:
但是,我很难过,找出找到该<input>元素然后触发生成相应小部件的代码的位置.它是在Shiny自己的JavaScript中,还是借助于Bootstrap或jQuery UI或其他随附闪亮的插件?
JavaScript代码在哪里提供上面描绘的小部件并将其与HTML <input>元素相关联?从我所涉及的代码中,我可以如何自己学习?
更多可能只是有用的细节
脚本的这一部分"shiny.js"找到<input>感兴趣的元素,并提供可以获取和设置窗口小部件值的方法.它(我可以看到)并不提供小部件本身.
var numberInputBinding = {};
$.extend(numberInputBinding, textInputBinding, {
find: function(scope) {
return $(scope).find('input[type="number"]');
},
getValue: function(el) {
var numberVal = $(el).val();
if (/^\s*$/.test(numberVal)) // Return null if all whitespace
return null;
else if (!isNaN(numberVal)) // If valid Javascript number string, coerce to number
return +numberVal;
else
return numberVal; // If other string like "1e6", send it unchanged
},
setValue: function(el, value) {
el.value = value;
[... snip ...]
}
});
inputBindings.register(numberInputBinding, 'shiny.numberInput');
Run Code Online (Sandbox Code Playgroud)
这里是闪亮生成的HTML文件的<head>一部分的副本,它导致了小部件.它引用的脚本大多可以在这里找到numericInput
<!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.2];bootstrap[3.3.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>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="shared/bootstrap/js/bootstrap.min.js"></script>
<script src="shared/bootstrap/shim/html5shiv.min.js"></script>
<script src="shared/bootstrap/shim/respond.min.js"></script>
<title>Hello Shiny!</title>
</head>
Run Code Online (Sandbox Code Playgroud)
这是一个错误的假设,使我很难弄清楚:
然后,据推测,在浏览器中,HTML 文档标头中包含的脚本之一提供的JavaScript 代码会找到该元素并使用下面显示的交互式小部件来呈现它:
事实上,正如 @epascarello 指出的那样,现代浏览器本身支持<input type="number">. (有关这一事实的更多文档,以及通过将 JavaScript 合并到这些现代 Web 浏览器中而启用的功能的长列表,请参阅“Web 设计者的 HTML”的第 4 章。)
| 归档时间: |
|
| 查看次数: |
173 次 |
| 最近记录: |