流星：我如何轉換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>

來源

2016-07-24 Farhan

我的建議給你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的

來源

2016-07-24 15:58:24

謝謝你...我想設置當某個％被抓到時，該站點將顯示一個鏈接並也揭示整個圖像......我在哪裏看？ – 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

添加您scratch.min.js文件client/compatibilityspecial folder。
將您的style CSS內容移動到CSS文件中。
將您的body的內容也移動到一個HTML文件中，並在body之內（如果您希望通過模板）。
將您的script的內容移到JavaScript文件中（如果您希望通過相同的模板鉤子）。
如果您直接在body中移動了HTML內容，請將window.onload替換爲Meteor.startup()鉤子。如果您的HTML內容是模板的一部分，請改用Template.myTemplate.onRendered()掛鉤（假設您使用的是Blaze）。

來源

2016-07-24 10:45:00 ghybs

這樣做的最好方法是在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文件中的客戶機/兼容性

來源

2016-07-24 11:12:38

我嘗試這樣做，試圖運行它，它只顯示0％。但是，如果我運行這些文件它最初是如何與谷歌瀏覽器開發，它工作正常。請注意，當我通常從本地運行這個文件夾時，只是從文件夾打開，它的確如此... – Farhan

流星：我如何轉換HTML/HTML5代碼以使用流星？

回答

相關問題