简体   繁体   English

Windows应用商店应用-JavaScript-元素变量

[英]Windows store apps - javascript - element variable

I was reading the "HTML animation library sample" http://code.msdn.microsoft.com/windowsapps/Using-the-Animation-787f3720 and notice that none of the element variable in the javascript are declared. 我正在阅读“ HTML动画库示例” http://code.msdn.microsoft.com/windowsapps/Using-the-Animation-787f3720 ,请注意,没有声明javascript中的任何元素变量。

Where is the variable declaration or getelement for target1, target2, etc? target1,target2等的变量声明或getelement在哪里? Note the strict declaration of the top. 请注意顶部的严格声明。 This is the sample code from Microsoft. 这是Microsoft的示例代码。

From pointerFeedback.js 从pointerFeedback.js

(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/pointerFeedback.html", {
        ready: function (element, options) {
            target1.addEventListener("MSPointerDown", onPointerDown, false);
            target1.addEventListener("MSPointerUp", onPointerUp, false);
            target2.addEventListener("MSPointerDown", onPointerDown, false);
            target2.addEventListener("MSPointerUp", onPointerUp, false);
            target3.addEventListener("MSPointerDown", onPointerDown, false);
            target3.addEventListener("MSPointerUp", onPointerUp, false);
        }
    });

    function onPointerDown(evt) {
        WinJS.UI.Animation.pointerDown(evt.srcElement);
    }

    function onPointerUp(evt) {
        WinJS.UI.Animation.pointerUp(evt.srcElement);
    }
})();

From pointerFeedback.html 从pointerFeedback.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="/css/pointerFeedback.css" />
    <script src="/js/pointerFeedback.js"></script>
</head>
<body>
    <div id="input" data-win-control="SdkSample.ScenarioInput">
        <p>Use the Pointer Up and Pointer Down animations to
        show tap and click feedback on elements. These animations should be used on elements
        that can be interacted with and can trigger actions. They should not be used on
        elements that are disabled or on standard web controls that already have other feedback, such as buttons.</p>
    </div>
    <div id="output" data-win-control="SdkSample.ScenarioOutput">
        <div class="example">
            <h3>Applied to different sized elements:</h3>
            <p>Click or tap on the boxes below to see the animation.</p>
            <div id="target1" class="large">
                200 pixels
            </div>
            <div id="target2" class="medium">
                100 pixels
            </div>
            <div id="target3" class="small">
                50 pixels
            </div>
        </div>
    </div>
</body>
</html>

Very interesting question! 非常有趣的问题! I suspect that every element with a specified 'id' will be automatically made available to JavaScript. 我怀疑具有指定“ id”的每个元素都会自动提供给JavaScript。

I could confirm this by creating a new project based on the "Blank App" template and adding a new div with id="foobar". 我可以通过基于“空白应用程序”模板创建一个新项目并添加带有id =“ foobar”的新div来确认这一点。 Then I started the app and switched to the JavaScript console and voila: a 'foobar' variable was available! 然后,我启动了该应用程序,并切换到JavaScript控制台,瞧:“ foobar”变量可用!

After doing Win8 app development for some months, I never stumbled over this, well done! 在进行Win8应用程序开发几个月后,我再也没有迷失过,做得好!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM