win8 微软essential html control的例子代码分析

1. range-intro是开始的html文件

2.default.js中引用了sample-util.js文件

3.sample-util.js定义了

    // Export public methods & controls
    WinJS.Namespace.define("SdkSample", {
        ScenarioInput: ScenarioInput,
        ScenarioOutput: ScenarioOutput
    });

  这段代码注册了SdkSample.ScenarioInput

4.range-introl.html

 <div data-win-control="SdkSample.ScenarioInput">

这句调用，产生select picker界面

具体实现代码是：

 

var ScenarioInput = WinJS.Class.define(
        function (element, options) {
        element.winControl = this;
        this.element = element;

        new WinJS.Utilities.QueryCollection(element)
                    .setAttribute("role", "main")
                    .setAttribute("aria-labelledby", "inputLabel");
        element.id = "input";

        this.addInputLabel(element);
        this.addDetailsElement(element);
        this.addScenariosPicker(element);
    }

 依次加入标签，选择框，选择框内容