原文地址：
第一章知识结构：
第二节：（添加控件和内容）
（原地址：）
本节内容概览：
Adding buttons ：
原文地址：
分三种button。很常见
Adding commands
原文地址：
大多数应用程序，都提供很多操作供用户来使用，下面就讲解 app bar 和 context menu( 快捷菜单)
Adding app bars （）
应用栏 默认是隐藏的，点击右键，或者鼠标划到屏幕边缘即可显示;下面定义一个应用栏，代码如下：
1:
2:
3:
4:
5:
6:
7:
8:
9: function Initialize() { 10: WinJS.UI.processAll();
11: }
12:
13: document.addEventListener("DomContentLoaded", Initialize(), false); 14:
15:
16:
17:
18:
19:
20: data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}"> 21:
22:
23: data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',section:'global',tooltip:'Remove item'}"> 24:
25:
26: data-win-options="{type:'separator',section:'global'}" /> 27:
28: data-win-options="{id:'cmdDelete',label:'Delete',icon:'trash',section:'global',tooltip:'Delete item'}"> 29:
30:
31: data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'selection',tooltip:'Take a picture'}"> 32:
33:
34:
35:
36:
37:
效果如图：
其实控制 app bar内按钮的图标样式，都是取决去 Icon这个属性，
下面列出所有的Icon值，请访问：
下面来添加一个自定义的应用栏，代码如下：
1:
2:
3:
4:
5:
6:
7:
8:
9: function Initialize() { 10: WinJS.UI.processAll();
11: }
12:
13: document.addEventListener("DomContentLoaded", Initialize(), false); 14:
15:
16:
17:
18:
19: aria-label="Navigation Bar" data-win-options="{layout:'custom',placement:'top'}"> 20:
21:
22:
23:
24:
25:
26:
27:
效果如图：
通过配置AppBar 的layout:'custom' 来确定是 自定义的。这时候就可以在 div标签内 写任何我们想添加进去的控件了。
Adding context menus
动态添加右键菜单的菜单项，并单击菜单时，将菜单内容显示在 div内，代码如下：
1:
2:
3:
4:
5:
6:
7:
8:
9: function Initialize() { 10:
11:
12: function asd(e) { 13: e.preventDefault(); //阻止菜单的默认行为
14: var menu = new Windows.UI.Popups.PopupMenu();
15: menu.commands.append(new Windows.UI.Popups.UICommand("Open with", function (command) { 16:
17: document.querySelector("#sss").innerText = command.label; 18: }));
19: menu.commands.append(new Windows.UI.Popups.UICommand("Save attachment", function (command) { 20:
21: document.querySelector("#sss").innerText = command.label; 22: }));
23:
24: menu.showAsync({ x: e.clientX, y: e.clientY }).then(function (invokedCommand) { 25: if (invokedCommand === null) { 26: // The command is null if no command was invoked.
27: document.querySelector("#sss").innerText = "Context menu dismissed"; 28: }
29: });
30: }
31: WinJS.UI.processAll().then(function () { 32:
33: document.addEventListener("contextmenu", asd, false); 34:
35: })
36:
37:
38: }
39:
40:
41:
42:
43: document.addEventListener("DomContentLoaded", Initialize(), false); 44:
45:
46:
47:
48:
49:
50:
51:
52:
Adding selection controls （选择性控件）
原文地址：
添加日期控件，并把日期控件内日期 填写到 textbox内：
代码如下：
1:
2:
3:
4:
5:NavApp
6:
7:
8:
9:
10:
11:
12:
13:
14: function Initailize() { 15: WinJS.UI.processAll().then(function () { 16:
17: var c = document.getElementById("date"); 18:
19: document.getElementById("ssss").innerText = new WinJS.UI.DatePicker(c).current.toLocaleDateString(); 20:
21: })
22:
23:
24: }
25: document.addEventListener("DOMContentLoaded", Initailize(), false); 26:
27:
28:
29: .sss
30: { 31: color: #0094ff;
32: }
33:
34:
35:
36:
37:DatePicker Example
38:Add a DatePicker Declaratively
39:
40:
41:
42:
43:
44:
效果如下图：
添加 radio button ()
实现效果:点选不同的radion button ，文本框中显示不同的值。 这次是使用 JQuery 哦
代码如下：
1:
2:
3:
4:
5:NavApp
6:
7:
8:
9:
10:
11:
12: $(function () { 13: WinJS.UI.processAll().done(function () { 14: $("input[type=radio]").change(function () { 15: $("input[type=text]").val($(this).val()); 16: })
17: })
18: })
19:
20:
21:
22:
23:
24: 1-10 years old
25: 11 years old
26: 12-120 years old
27:
28:
29:
30:
select 选择框：
例子是 创建了两个select，第一个单选，第二个多选。另外实现 第一个选项改变时，改变textbox内的值，代码如下：
1:
2:
3:
4:
5:NavApp
6:
7:
8:
9:
10:
11:
12: $(function () { 13: WinJS.UI.processAll().done(function () { 14: $("#oSelect").change(function () { 15:
16: $("input[type=text]").val($(this).find("option:selected").text()); 17:
18:
19: })
20: })
21: })
22:
23:
24:
25:
26:
27:
28:
29: BMW
30:
31: Porsche
32:
33: Mercedes
34:
35:
36:
37: BMW
38:
39: Porsche
40:
41: Mercedes
42:
43: BMW
44:
45: Porsche
46:
47: Mercedes
48:
49: BMW
50:
51: Porsche
52:
53: Mercedes
54:
55:
56:
57:
58:
点击按钮，动态添加项目，代码如下：
1:
2:
3:
4:
5:NavApp
6:
7:
8:
9:
10:
11:
12: $(function () { 13: WinJS.UI.processAll().done(function () { 14: var itemLength = $("#oSelect").children.length; 15: $("input[type=button]").click(function () { 16:
17:
18: var oOption = document.createElement("OPTION"); 19: oOption.text = "第" + itemLength + "项";
20: oOption.value = itemLength;
21: $("#oSelect").append(oOption); 22: itemLength++;
23:
24:
25: })
26: })
27: })
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
添加滑动条：
动态增加滚动条的进度，一秒百分之二十，代码如下：
1:
2:
3:
4:
5:NavApp
6:
7:
8:
9:
10:
11:
12: $(function () { 13: WinJS.UI.processAll().done(function () { 14: var i = 20;
15: function process()
16: { 17: $("#rangeCtrl").attr("value", i); 18: i= i + 20;
19: if (i==100) { 20:
21: $("#progCtrl").val(100); 22: }
23:
24: }
25:
26: setInterval(process, 1000);
27: })
28: })
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
添加：toggle switches （直译为开关，就是true/false选择器）
代码如下：
下面为两种状态：