Microsoft Metro - Windows 应用商店应用程序 - 元素变量

microsoft metro - Windows store apps - element variable

本文关键字：应用程序 元素 变量 应用 Metro Windows Microsoft      更新时间：2023-09-26

我正在阅读"HTML动画库示例"http://code.msdn.microsoft.com/windowsapps/Using-the-Animation-787f3720，并注意到javascript中没有声明任何元素变量。

目标

1、目标 2 等的变量声明或 getelement 在哪里？注意顶部的严格声明。这是来自Microsoft的示例代码。

来自指针反馈.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);
    }
})();

来自指针反馈.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>

非常有趣的问题！我怀疑每个带有指定"id"的元素都会自动提供给 JavaScript。

我可以通过基于"空白应用程序"模板创建一个新项目并添加一个带有 id="foobar" 的新div 来确认这一点。然后我启动了应用程序并切换到 JavaScript 控制台，瞧：一个"foobar"变量可用！

在做了几个月的Win8应用程序开发后，我从来没有偶然发现过这个，干得好！

相关文章：