Steps to developing Metro style apps 第一章-Creat a UI（2）(3)
原文地址：http://msdn.microsoft.com/en-us/library/windows/apps/br211362.aspx
第一章知识结构：
第二节：Adding controls and content（添加控件和内容）
（原地址：http://msdn.microsoft.com/en-us/library/windows/apps/hh465393.aspx）
本节内容概览：
Adding buttons ：
原文地址：http://msdn.microsoft.com/en-us/library/windows/apps/hh465358.aspx
分三种button。很常见
Adding commands
原文地址：http://msdn.microsoft.com/en-us/library/windows/apps/hh738360.aspx
大多数应用程序，都提供很多操作供用户来使用，下面就讲解 app bar 和 context menu( 快捷菜单)
Adding app bars （http://msdn.microsoft.com/en-us/library/windows/apps/hh465296.aspx）
应用栏 默认是隐藏的，点击右键，或者鼠标划到屏幕边缘即可显示;下面定义一个应用栏，代码如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title></title>
5: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
6: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
7: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
8: <script type="text/javascript">
9: function Initialize() {
10: WinJS.UI.processAll();
11: }
12:
13: document.addEventListener("DomContentLoaded", Initialize(), false);
14:
15: </script>
16: </head>
17: <body>
18: <div data-win-control="WinJS.UI.AppBar" data-win-options="">
19: <button data-win-control="WinJS.UI.AppBarCommand"
20: data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}">
21: </button>
22: <button data-win-control="WinJS.UI.AppBarCommand"
23: data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',section:'global',tooltip:'Remove item'}">
24: </button>
25: <hr data-win-control="WinJS.UI.AppBarCommand"
26: data-win-options="{type:'separator',section:'global'}" />
27: <button data-win-control="WinJS.UI.AppBarCommand"
28: data-win-options="{id:'cmdDelete',label:'Delete',icon:'trash',section:'global',tooltip:'Delete item'}">
29: </button>
30: <button data-win-control="WinJS.UI.AppBarCommand"
31: data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'selection',tooltip:'Take a picture'}">
32: </button>
33: </div>
34:
35:
36: </body>
37: </html>
效果如图：
其实控制 app bar内按钮的图标样式，都是取决去 Icon这个属性，
下面列出所有的Icon值，请访问：http://msdn.microsoft.com/en-us/library/windows/apps/hh770557.aspx
下面来添加一个自定义的应用栏，代码如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title></title>
5: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
6: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
7: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
8: <script type="text/javascript">
9: function Initialize() {
10: WinJS.UI.processAll();
11: }
12:
13: document.addEventListener("DomContentLoaded", Initialize(), false);
14:
15: </script>
16: </head>
17: <body>
18: <div data-win-control="WinJS.UI.AppBar"
19: aria-label="Navigation Bar" data-win-options="{layout:'custom',placement:'top'}">
20: <header aria-label="Navigation bar" role="banner">
21: <button id="cmdBack" class="win-backbutton" aria-label="Back"></button>
22: </header>
23: </div>
24:
25:
26: </body>
27: </html>
效果如图：
通过配置AppBar 的layout:'custom' 来确定是 自定义的。这时候就可以在 div标签内 写任何我们想添加进去的控件了。
Adding context menus http://msdn.microsoft.com/en-us/library/windows/apps/hh465300.aspx
动态添加右键菜单的菜单项，并单击菜单时，将菜单内容显示在 div内，代码如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title></title>
5: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
6: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
7: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
8: <script type="text/javascript">
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: </script>
46: </head>
47: <body>
48: <div id="sss">
49:
50: </div>
51: </body>
52: </html>
Adding selection controls （选择性控件）
原文地址：http://msdn.microsoft.com/en-us/library/windows/apps/hh465436.aspx
添加日期控件，并把日期控件内日期 填写到 textbox内：
代码如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>NavApp</title>
6: <!-- WinJS references -->
7: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
8: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
9: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
10: <script type="text/javascript" src="jquery-1.7.2.js"></script>
11: <script type="text/javascript">
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: </script>
28: <style type="text/css">
29: .sss
30: {
31: color: #0094ff;
32: }
33: </style>
34: </head>
35: <body>
36: <section>
37: <h1>DatePicker Example</h1>
38: <h3>Add a DatePicker Declaratively</h3>
39: <div id="date" data-win-control="WinJS.UI.DatePicker">
40: </div>
41: </section>
42: <input type="text" id="ssss" />
43: </body>
44: </html>
效果如下图：
添加 radio button (http://msdn.microsoft.com/en-us/library/windows/apps/hh466176.aspx)
实现效果:点选不同的radion button ，文本框中显示不同的值。 这次是使用 JQuery 哦
代码如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>NavApp</title>
6: <!-- WinJS references -->
7: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
8: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
9: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
10: <script type="text/javascript" src="jquery-1.7.2.js"></script>
11: <script type="text/javascript">
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: </script>
21: </head>
22: <body>
23: <form>
24: <input type="radio" name="radio" checked value="1-10 years old">1-10 years old
25: <input type="radio" name="radio" value="11 years old">11 years old
26: <input type="radio" name="radio" value="12-120 years old">12-120 years old
27: <input type="text" />
28: </form>
29: </body>
30: </html>
select 选择框：http://msdn.microsoft.com/en-us/library/windows/apps/hh466252.aspx
例子是 创建了两个select，第一个单选，第二个多选。另外实现 第一个选项改变时，改变textbox内的值，代码如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>NavApp</title>
6: <!-- WinJS references -->
7: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
8: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
9: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
10: <script type="text/javascript" src="jquery-1.7.2.js"></script>
11: <script type="text/javascript">
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: </script>
24: </head>
25: <body>
26: <form>
27: <select id="oSelect" name="Cars">
28: <option value="1" selected>
29: BMW
30: <option value="2">
31: Porsche
32: <option value="3" selected>
33: Mercedes
34: </select>
35: <select id="Select1" name="Cars" multiple size="3">
36: <option value="1" selected>
37: BMW
38: <option value="2">
39: Porsche
40: <option value="3" selected>
41: Mercedes
42: <option value="1" selected>
43: BMW
44: <option value="2">
45: Porsche
46: <option value="3" selected>
47: Mercedes
48: <option value="1" selected>
49: BMW
50: <option value="2">
51: Porsche
52: <option value="3" selected>
53: Mercedes
54: </select>
55: <input type="text" />
56: </form>
57: </body>
58: </html>
点击按钮，动态添加项目，代码如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>NavApp</title>
6: <!-- WinJS references -->
7: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
8: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
9: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
10: <script type="text/javascript" src="jquery-1.7.2.js"></script>
11: <script type="text/javascript">
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: </script>
30: </head>
31: <body>
32: <form>
33: <select id="oSelect" name="Cars">
34: </select>
35: <input type="button" value="添加项目" />
36: </form>
37: </body>
38: </html>
添加滑动条：http://msdn.microsoft.com/en-us/library/windows/apps/hh466182.aspx
动态增加滚动条的进度，一秒百分之二十，代码如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>NavApp</title>
6: <!-- WinJS references -->
7: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
8: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
9: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
10: <script type="text/javascript" src="jquery-1.7.2.js"></script>
11: <script type="text/javascript">
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: </script>
31: </head>
32: <body>
33: <progress id="progCtrl" max="100" >
34: </progress>
35: <br>
36: <br>
37: <input id="rangeCtrl" type="range" min="0" max="100" value="0" />
38: </body>
39: </html>
添加：toggle switches （直译为开关，就是true/false选择器）
http://msdn.microsoft.com/en-us/library/windows/apps/hh701411.aspx
代码如下：
<div data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title: 'GPS'}">
下面为两种状态：
