流星:我如何转换HTML/HTML5代码以使用流星?
我已经下载了一个HTML5/JS应用程序,但我认为他们的代码不适用于Meteor。鉴于下面的例子,我在哪里或如何转换它,以便它可以与Meteor一起使用? (因为我的web应用程序的其余部分是建立在流星)流星:我如何转换HTML/HTML5代码以使用流星?
<template name="scratch">
<head>
<meta charset="utf-8" />
<title>scratch.js - Example 1</title>
<script type="text/javascript" src="assets/js/scratch.min.js"></script>
<script>
function callback(d) { d.container.style.backgroundImage = 'url(assets/images/demo1-end.gif)'; d.container.innerHTML = ''; }
function percent(p) { document.getElementById("counter").innerHTML = p; }
window.onload = function() {
createScratchCard({
"container":document.getElementById("scratchcard"),
"background":"assets/images/demo1-background.png",
"foreground":"assets/images/demo1-foreground.png",
"percent":85,
"coin":"assets/images/coin2.png",
"thickness":18,
"counter":"percent",
"callback":"callback"
});
}
</script>
<style>
body { text-align: center; }
#scratchcard { display: block; width: 180px; height: 180px; margin: 40px auto; }
</style>
</head>
<body>
<div id="scratchcard"></div>
<span id="counter">0</span><span>%</span>
</body>
</template>
我的建议给你se https://github.com/websanova/wScratchPad。
只需下载并在客户端/兼容性
添加缩小的版本,那么你可以这样做:
Template.templateName.onRendered(function() {
$('#scratchcard').wScratchPad({
size : 5, // The size of the brush/scratch.
bg : '#cacaca', // Background (image path or hex color).
fg : '#6699ff', // Foreground (image path or hex color).
realtime : true, // Calculates percentage in realitime.
cursor : 'crosshair' // Set cursor.
});
});
也有三个额外的回调中返回%,因此,您将能够更新。 ..
scratchDown : null, // Set scratchDown callback.
scratchUp : null, // Set scratchUp callback.
scratchMove : null, // Set scratcMove callback.
注:这取决于JQuery的
添加您
scratch.min.js
文件client/compatibility
special folder。将您的
style
CSS内容移动到CSS文件中。将您的
body
的内容也移动到一个HTML文件中,并在body
之内(如果您希望通过模板)。将您的
script
的内容移到JavaScript文件中(如果您希望通过相同的模板钩子)。如果您直接在
body
中移动了HTML内容,请将window.onload
替换为Meteor.startup()
钩子。如果您的HTML内容是模板的一部分,请改用Template.myTemplate.onRendered()
挂钩(假设您使用的是Blaze)。
这样做的最好方法是在3个文件中分隔视图,样式和控制器。
scratch.html
<template name="scratch">
<body>
<div id="scratchcard"></div>
<span id="counter">0</span><span>%</span>
</body>
</template>
scratch.css
body { text-align: center; }
#scratchcard { display: block; width: 180px; height: 180px; margin: 40px auto; }
scratch.js
function callback(d) {
d.container.style.backgroundImage = 'url(assets/images/demo1-end.gif)';
d.container.innerHTML = '';
}
function percent(p) {
document.getElementById("counter").innerHTML = p;
}
Template.scratch.onRendered(function(){
createScratchCard({
"container":document.getElementById("scratchcard"),
"background":"assets/images/demo1-background.png",
"foreground":"assets/images/demo1-foreground.png",
"percent":85,
"coin":"assets/images/coin2.png",
"thickness":18,
"counter":"percent",
"callback":"callback"
});
});
,并添加您的scratch.min.js文件中的客户机/兼容性
我尝试这样做,试图运行它,它只显示0%。但是,如果我运行这些文件它最初是如何与谷歌浏览器开发,它工作正常。请注意,当我通常从本地运行这个文件夹时,只是从文件夹打开,它的确如此... – Farhan
谢谢你...我想设置当某个%被抓到时,该站点将显示一个链接并也揭示整个图像......我在哪里看? – Farhan
'$('#scratchcard')。wScratchPad(尺寸:5,//刷子/划痕的尺寸。 bg:'#cacaca',//背景(图像路径或十六进制颜色)。 fg:'#6699ff',//前景(图像路径或十六进制颜色)。 realtime:true,//计算realitime的百分比。 光标:'十字线'//设置光标。 scratchDown:function(percent){ if(percent> 50){ do somthing } } }); ' –
scratchDown:function(percent){ \t if(percent> 50){console.log('eh'); } } });这样做,但控制台日志什么也没有显示......我也跟着他们的github,但没有任何回报......功能(e,百分比)......我必须导入他们的整个软件包吗? – Farhan