javascript
Windows 8 JavaScript Metro应用程序--入门（上）
?
如你所知的Windows8允許你通過以下幾種方式創建Metro應用程序：
- C++
- C#?
- JavaScript
第一部分將側重于主體結構和JavaScript Grid 應用程序的基礎，在隨后的文章中我將深度探究在Windows8中更多的功能。
第一步：基礎知識
當你寫Windows8 JavaScript風格的應用時，你可能需要學習一點WinJS和在Windows 8 JavaScript應用中可用的基本動作。我看到了關于Windows 8 Javascript應用程序集成JQuery的文章，其實這是沒有必要的，WinJS已經提供了許多這些：
- 選擇器:
- document.querySelector(".headerTemplate")
- document.querySelectorAll("div")
- 文本?：
- document.querySelector(“#Title”).textContent;?
- 動畫：
- WinJS.UI.Animation.fadeIn(document.querySelector(“div”));
更多…
第二步：Application Styles
當你在Visual Studio 11中打開一個新的JavaScript Metro應用，你可以從以下選擇：
?
- Blank Application?–空白Windows Metro應用的項目，沒有預定義的控件或布局。
?
?
- Split Application – 一個兩個頁面Windows metro風格應用的項目，在分組項目導航。第一頁允許組的選擇，而旁邊的第二臺顯示器所選的項目的詳細項目清單。
?
- Fixed Layout Application?– 一個可擴展固定寬高比布局的Windows metro風格應用的項目
?
- Navigation Application?– 一個有預定義導航控件的Windows metro風格應用項目
?
- Grid Application –?一個多頁的、項目組之間導航的Windows Metro風格的應用程序。專用頁面顯示組合項目的詳細信息。
?
?
這個Demo中我創建了一個新的 Grid Application:?
?
?第三步: 項目結構
在以前Visual Studio 11和Windows8的版本是JS文件夾里面有所有的WinJS文件，在最新的版本種所有的必要文件在兩個主要文件中，參考下：
- base.js
- ui.js
在上面創建的 Grid Application 你將有三個頁面:
- groupDetailsPage
- groupedItemsPage
- itemDetailsPage
請注意，每個HTML頁都有自己的CSS和JavaScript文件，它們沒有命名約定自動接受這些并結合，但關于如何創建Windows 8 JavaScript應用程序、規范或應用程序，這是最好的做法。
?
第四步：應用程序流程?
一切從default.html開始，這個頁面加載所有必需的js文件、css文件和使用PageControlNavigator?導航應用程序到groupedItemsPage?
?1?<!DOCTYPE?html>
?2?<html>
?3?<head>
?4?????<meta?charset="utf-8">
?5?????<title>Application1</title>
?6??
?7?????<!--?WinJS?references?-->
?8?????<link?href="//Microsoft.WinJS.0.6/css/ui-dark.css"?rel="stylesheet">
?9?????<script?src="//Microsoft.WinJS.0.6/js/base.js"></script>
10?????<script?src="//Microsoft.WinJS.0.6/js/ui.js"></script>
11??
12?????<!--?Application1?references?-->
13?????<link?href="/css/default.css"?rel="stylesheet">
14?????<script?src="/js/data.js"></script>
15?????<script?src="/js/navigator.js"></script>
16?????<script?src="/js/default.js"></script>
17?</head>
18?<body>
19?????<div?id="contenthost"?
20??????????data-win-control="Application1.PageControlNavigator"?
21?????????data-win-options="{home:?'/html/groupedItemsPage.html'}"></div>
22?</body>
23?</html>
?
?
The groupedItemsPage 加載相關的JS/CSS文件
?
?1??<title>groupedItemsPage</title>?2?????
?3?????<!--?WinJS?references?-->
?4?????<link?href="//Microsoft.WinJS.0.6/css/ui-dark.css"?rel="stylesheet">
?5?????<script?src="//Microsoft.WinJS.0.6/js/base.js"></script>
?6?????<script?src="//Microsoft.WinJS.0.6/js/ui.js"></script>
?7?????
?8?????<link?href="/css/default.css"?rel="stylesheet">
?9?????<link?href="/css/groupedItemsPage.css"?rel="stylesheet">
10?????<script?src="/js/data.js"></script>
11?????<script?src="/js/groupedItemsPage.js"></script>
?
?
這個流程適用于你加載每個頁面。
?
?
Windows 8 JavaScript Metro應用程序--入門（下）（待續）?
?
?
posted on 2012-03-04 01:20 李明楊 閱讀(...) 評論(...) 編輯 收藏
轉載于:https://www.cnblogs.com/lmyhao/archive/2012/03/04/2378940.html
總結
以上是生活随笔為你收集整理的Windows 8 JavaScript Metro应用程序--入门（上）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小米蓝牙音响驱动_小米手机绝佳配件，20
- 下一篇： 创建IE各版本专属CSS