原文地址：
第一章知识结构：
第二节：（添加控件和内容）
（原地址：）
本节内容概览：
Adding ratings
添加一个 评级控件，获取评级控件的值，在textbox中显示出来，代码如下：
1:
2:
3:
4:
5:NavApp
6:
7:
8:
9:
10:
11:
12: $(function () { 13: WinJS.UI.processAll().done(function () { 14:
15:
16: $("#ratingControl").change(function () {//添加评级控件 改变选择事件 17:
18: var c = document.getElementById("ratingControl").winControl;//获取到评级控件对象 19: $("input[type=text]").val(c.userRating); //c.userRating就是该 控件的值 20: })
21:
22: })
23: })
24:
25:
26:
27:
28:
29:
30:
31:
32:
效果如下图：
Adding progress control
下图是三种 进度条，是不是很养眼呢。。。。
写了三种进度条样式，并在 textbox内显示 第一个进度条的百分比，下面看代码：
1:
2:
3:
4:
5:NavApp
6:
7:
8:
9:
10:
11:
12: $(function () { 13: WinJS.UI.processAll().done(function () { 14:
15:
16: $("input[type=text]").val(document.getElementById("determinateProgressBar").position); 17:
18: })
19: })
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
Adding List View, Semantic Zoom, and other data controls
Adding FlipView controls
原文地址：
一共三张图片，实现查看，一共需要三个文件，default.js scripts.js selector.html
selector.html 页面代码：
1:
2:
3:
4:
5:NavApp
6:
7:
8:
9:
10:
11:
12:
13:
14: #basicFlipView
15: { 16: width: 480px;
17: height: 270px;
18: border: solid 1px black;
19: }
20:
21: /**********************************************/
22: /* */
23: /* Styles used in the item template */
24: /* */
25: /**********************************************/
26: .overlaidItemTemplate
27: { 28: display: -ms-grid;
29: -ms-grid-columns: 1fr;
30: -ms-grid-rows: 1fr;
31: width: 480px;
32: height: 270px;
33: }
34:
35: .overlaidItemTemplate img
36: { 37: width: 100%;
38: height: 100%;
39: }
40:
41: .overlaidItemTemplate .overlay
42: { 43: position: relative;
44: -ms-grid-row-align: end;
45: background-color: rgba(0,0,0,0.65);
46: height: 40px;
47: padding: 20px 15px;
48: overflow: hidden;
49: }
50:
51: .overlaidItemTemplate .overlay .ItemTitle
52: { 53: color: rgba(255, 255, 255, 0.8);
54: }
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
default.js代码：
1: // For an introduction to the Navigation template, see the following documentation:
2: // http://go.microsoft.com/fwlink/?LinkId=232506
3: (function () { 4: "use strict";
5:
6: var app = WinJS.Application;
7:
8: app.onactivated = function (eventObject) { 9: if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { 10: if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) { 11:
12: } else { 13:
14: }
15: WinJS.UI.processAll();
16: }
17: };
18:
19:
20:
21: app.start();
22: })();
script.js 代码：
1: (function () { 2: "use strict";
3: //定义数据
4: var dataArray = [
5: { type: "item", title: "Cliff", picture: "images/logo.png" }, 6: { type: "item", title: "Grapes", picture: "b.png" }, 7: { type: "item", title: "Rainier", picture: "c.png" } 8:
9: ];
10:
11: var dataList = new WinJS.Binding.List(dataArray); 定义List对象，作为数据源
12:
13: //
14: // 创建一个命名空间，以使dataList能够被外界访问到
15: var publicMembers =
16: { 17: itemList: dataList
18: };
19: WinJS.Namespace.define("DataExample", publicMembers); 20:
21: })();
实现效果：
Adding a ListView
才例子包含三个文件 ListView.html default.js script.js
ListView.html页面代码：
1:
2:
3:
4:
5:NavApp
6:
7:
8:
9:
10:
11:
12:
13:
14: #basicListView
15: { 16: border: 2px solid gray;
17: width: 650px;
18: }
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
default.js文件代码：
1: // For an introduction to the Navigation template, see the following documentation:
2: // http://go.microsoft.com/fwlink/?LinkId=232506
3: (function () { 4: "use strict";
5:
6: var app = WinJS.Application;
7:
8: app.onactivated = function (eventObject) { 9: if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { 10: if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) { 11:
12: } else { 13:
14: }
15: WinJS.UI.processAll();
16: }
17: };
18:
19:
20:
21: app.start();
22: })();
script.js文件代码
1:
2: (function () { 3: "use strict";
4:
5: var dataArray = [
6: { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "a.png" }, 7: { title: "Banana blast", text: "Ice cream", picture: "b.png" }, 8: { title: "Brilliant banana", text: "Frozen custard", picture: "c.png" } 9:
10: ];
11:
12: var dataList = new WinJS.Binding.List(dataArray);
13: var publicMembers =
14: { 15: itemList: dataList
16: };
17: WinJS.Namespace.define("DataExample", publicMembers); 18:
19: })();
效果如下图：
下面演示 按title的首字母 进行分组 显示： 共包含三个文件 ListView.html default.js script.js
ListView.html代码如下：
1:
2:
3:
4:
5:NavApp
6:
7:
8:
9:
10:
11:
12:
13:
14: #groupedListView
15: { 16: width: 600px;
17: height: 300px;
18: border: solid 2px rgba(0, 0, 0, 0.13);
19: }
20:
21: /* Template for headers */
22: .simpleHeaderItem
23: { 24: width: 50px;
25: height: 50px;
26: padding: 8px;
27: }
28:
29: /* Template for items */
30: .mediumListIconTextItem
31: { 32: width: 282px;
33: height: 70px;
34: padding: 5px;
35: overflow: hidden;
36: display: -ms-box;
37: }
38:
39: .mediumListIconTextItem img.mediumListIconTextItem-Image
40: { 41: width: 60px;
42: height: 60px;
43: margin: 5px;
44: -ms-grid-column: 1;
45: }
46:
47: .mediumListIconTextItem .mediumListIconTextItem-Detail
48: { 49: margin: 5px;
50: -ms-grid-column: 2;
51: }
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72: data-win-control="WinJS.UI.ListView"
73: data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'), groupDataSource: myData.groupedItemsList.groups.dataSource, groupHeaderTemplate: select('#headerTemplate'), layout: {type: WinJS.UI.GridLayout}}" 74: >
75:
76:
77:
default.js代码：
1: // For an introduction to the Navigation template, see the following documentation:
2: // http://go.microsoft.com/fwlink/?LinkId=232506
3: (function () { 4: "use strict";
5:
6: var app = WinJS.Application;
7:
8: app.onactivated = function (eventObject) { 9: if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { 10: if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) { 11:
12: } else { 13:
14: }
15: WinJS.UI.processAll();
16: }
17: };
18:
19:
20:
21: app.start();
22: })();
script.js代码：
1:
2: (function () { 3: "use strict";
4:
5: var dataArray = [
6: { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "a.png" }, 7: { title: "Banana blast", text: "Ice cream", picture: "b.png" }, 8: { title: "Arilliant banana", text: "Frozen custard", picture: "c.png" } 9:
10: ];
11:
12: var dataList = new WinJS.Binding.List(dataArray);
13:
14: // 给组排序
15: function compareGroups(left, right) { 16: return left.charCodeAt(0) - right.charCodeAt(0);
17: }
18:
19: //返回组名
20: function getGroupKey(dataItem) { 21: return dataItem.title.toUpperCase().charAt(0);
22: }
23:
24: // 返回组名 用于显示
25: function getGroupData(dataItem) { 26: return { 27: title: dataItem.title.toUpperCase().charAt(0)
28: };
29: }
30:
31:
32: var groupedItemsList = dataList.createGrouped(getGroupKey, getGroupData, compareGroups);
33: //List.createGrouped 详细：http://msdn.microsoft.com/en-us/library/windows/apps/Hh700742.aspx
34: WinJS.Namespace.define("myData", 35: { 36: groupedItemsList: groupedItemsList
37: });
38:
39:
40:
41:
42:
43: })();
效果：
adding a
什么是 SemanticZoom 呢？微软官方的解释是：先看图解：
文字解释：这个例子很贴切。
查看电话薄的时候，为了能快速查到某个人，可以将界面定位到 字母检索，然后根据字母内的名字开始查找。
此例子包含三个文件：ListView.html default.js script.js
ListView.html 代码如下：
1:
2:
3:
4:
5:NavApp
6:
7:
8:
9:
10:
11:
12:
13:
14: /* Template for headers in the zoomed-in ListView */
15: .simpleHeaderItem
16: { 17: width: 50px;
18: height: 50px;
19: padding: 8px;
20: }
21:
22: /* Template for items in the zoomed-in ListView */
23: .mediumListIconTextItem
24: { 25: width: 282px;
26: height: 70px;
27: padding: 5px;
28: overflow: hidden;
29: display: -ms-box;
30: }
31:
32: .mediumListIconTextItem img.mediumListIconTextItem-Image
33: { 34: width: 60px;
35: height: 60px;
36: margin: 5px;
37: -ms-grid-column: 1;
38: }
39:
40: .mediumListIconTextItem .mediumListIconTextItem-Detail
41: { 42: margin: 5px;
43: -ms-grid-column: 2;
44: }
45:
46: /* Template for items in the zoomed-out ListView */
47: .semanticZoomItem
48: { 49: width: 130px;
50: height: 130px;
51: background-color: rgba(38, 160, 218, 1.0);
52: }
53:
54: .semanticZoomItem .semanticZoomItem-Text
55: { 56: padding: 10px;
57: line-height: 150px;
58: white-space: nowrap;
59: color: white;
60: }
61:
62: /* CSS for the zoomed-in ListView */
63: #zoomedInListView
64: { 65: width: 600px;
66: height: 300px;
67: border: solid 2px rgba(0, 0, 0, 0.13);
68: }
69:
70: #semanticZoomDiv
71: { 72: width: 600px;
73: height: 300px;
74: border: solid 2px rgba(0, 0, 0, 0.13);
75: }
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
default.js内容：
1: // For an introduction to the Navigation template, see the following documentation:
2: // http://go.microsoft.com/fwlink/?LinkId=232506
3: (function () { 4: "use strict";
5:
6: var app = WinJS.Application;
7:
8: app.onactivated = function (eventObject) { 9: if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { 10: if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) { 11:
12: } else { 13:
14: }
15: WinJS.UI.processAll();
16: }
17: };
18:
19:
20:
21: app.start();
22: })();
script.js内容：
1:
2: (function () { 3: "use strict";
4:
5: var dataArray = [
6: { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "a.png" }, 7: { title: "Banana blast", text: "Ice cream", picture: "b.png" }, 8: { title: "Grilliant banana", text: "Frozen custard", picture: "c.png" }, 9: { title: "Fasic banana", text: "Low-fat frozen yogurt", picture: "a.png" }, 10: { title: "Banana blast", text: "Ice cream", picture: "b.png" }, 11: { title: "Arilliant banana", text: "Frozen custard", picture: "c.png" }, 12: { title: "Casic banana", text: "Low-fat frozen yogurt", picture: "a.png" }, 13: { title: "Danana blast", text: "Ice cream", picture: "b.png" }, 14: { title: "Erilliant banana", text: "Frozen custard", picture: "c.png" } 15:
16: ];
17:
18: var dataList = new WinJS.Binding.List(dataArray);
19:
20: // 给组排序
21: function compareGroups(left, right) { 22: return left.charCodeAt(0) - right.charCodeAt(0);
23: }
24:
25: //返回分组的标记
26: function getGroupKey(dataItem) { 27: return dataItem.title.toUpperCase().charAt(0);
28: }
29:
30: // 返回组名 用于显示
31: function getGroupData(dataItem) { 32: return { 33: title: dataItem.title.toUpperCase().charAt(0)
34: };
35: }
36:
37:
38: var groupedItemsList = dataList.createGrouped(getGroupKey, getGroupData, compareGroups);
39: //List.createGrouped 详细：http://msdn.microsoft.com/en-us/library/windows/apps/Hh700742.aspx
40: WinJS.Namespace.define("myData", 41: { 42: groupedItemsList: groupedItemsList
43: });
44:
45:
46:
47:
48:
49: })();
效果：
运行app之后只会 显示一个 listview：
当 把鼠标放在 某一个 item上，按住 ctrl 加滚动滚轮，下面 就是 激动的时刻了。。
界面就会变成这样，之后再 按住 ctrl+ 滚动滚轮， 就实现了两个页面之间的相互
切换， 这个应用的确很帅。
这时官方给的使用方法：
。开始没认真看这个图，搞了半天，没弄明白怎么使用这个东西，杯具啊。