| 最近在學習win8 metro app的開發，今天剛剛學了一個小的例子，分享一下css 開始以前你須要準備。。。html 一、開發win8應用須要具有Windows 8 和 Microsoft Visual Studio Express 2012 for Windows 8session 下載 Windows 8app 二、安裝window8以後，轉至 開發者的下載內容 ，查找下載工具和 SDK 標題，而後單擊「當即下載」按鈕異步 三、你須要開發者許可證才能開始建立 Windows 應用商店應用。 獲取開發者許可證。函數 在 Visual Studio 中建立新項目，咱們來建立名爲 HelloWorld 的新應用。如下是操做方法：工具 啓動 Visual Studio Express 2012 for Windows 8。學習 在「文件」菜單上，選擇「新建項目」。會出現「新建項目」對話框。能夠在對話框的左側窗格中選擇要顯示模板的類型。ui 在左側窗格中，依次展開「已安裝」、「模板」和 JavaScript，而後選擇「Windows 應用商店」模板類型。對話框的中心窗格會顯示一列適用於 JavaScript 的項目模板。spa
在中心窗格中，選擇 Blank App 模板。 在 Name 文本框中，輸入 "HelloWorld"。 單擊「肯定」可建立項目。Visual Studio 建立項目並在「解決方案資源管理器」中顯示該項目。
儘管 Blank App 爲最基本的模板，但該模板仍包含少許文件： 清單文件 (package.appxmanifest)介紹了應用(它的名稱、介紹、磁貼、開始頁面、初始屏幕等等)並列出了應用包含的文件。 要在開始屏幕中顯示的一組大的和小的徽標圖像(logo.png 和 smalllogo.png)。 表示應用位於 Windows 應用商店的圖像 (storelogo.png)。 顯示應用啓動時間的初始屏幕 (splashscreen.png)。 Windows JavaScript 庫的 CSS 和代碼文件(位於 References 文件夾中)。 開始頁面 (default.html) 和附帶的 JavaScript 文件 (default.js)，這些文件在應用啓動時運行。 這些文件是使用 JavaScript 的全部 Windows 應用商店應用必不可少的文件。在 Visual Studio 中建立的全部項目都包含這些文件。 如今咱們就建立了一個簡單的應用，若是你想看它的外觀，按 F5 可構建、部署並啓動應用。首先會出現默認的初始屏幕。
這就是初始屏幕 若要關閉應用，請從屏幕的頂部邊緣向底部邊緣滑動或按 Alt-F4。(有的筆記本要按alt+fn+f4)關閉應用 接下來咱們修改default.htm頁面，這是默認生成的 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>HelloWorld</title>
6
7 <!-- WinJS references -->
8 <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
9 <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
10 <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
11
12 <!-- HelloWorld references -->
13 <link href="/css/default.css" rel="stylesheet" />
14 <script src="/js/default.js"></script>
15 </head>
16 <body>
17 <p>Content goes here</p>
18 </body>
19 </html> 接下來向 default.html 文件中添加一些新的內容。正如你向任何其餘 HTML 文件中添加內容同樣 一、使用如下內容替代 body 元素中的現有內容：顯示 "Hello, world!" 的首級標題、詢問用戶名的一些文本、用於接受用戶名的 input 元素、button 以及 div 元素。 向 input、button 和 div 分配 ID。 1 <body>
2 <div style="width:100%; height:100%; ">
3 <h1>Hello World!</h1>
4 <p>What's your name?</p>
5 <input id="inputName" type="text" /><button id="btnHello">Say hello</button>
6 <div id="OutputMsg">
7 </div>
8 </div>
9 </body> 咱們啓動應用程序看看效果吧
如今點擊按鈕是沒有任何反應的，由於咱們沒有給它註冊事件，接下來要作的就是給按鈕添加事件，咱們向 default.js 文件添加事件處理程序代碼。 咱們打開default.js文件看看是些什麼東東 在咱們開始添加本身的代碼以前，咱們來看一下該文件中代碼的頭幾行和最後幾行： 1 (function () {
2 "use strict";
3
4 // Omitted code
5
6 })(); 這是自我執行匿名函數 代碼的下一行爲 JavaScript 代碼打開了嚴格模式。嚴格模式爲代碼提供了額外的錯誤檢查。例如，它防止你使用隱式聲明的變量或爲只讀屬性分配值。 查看 default.js 中代碼的剩餘部分。它處理了應用的 activated 和 checkpoint 事件。咱們之後會深刻了解這些事件的詳細信息。如今，只要瞭解啓動應用時會觸發 activated 事件。 咱們來爲 button 定義事件處理程序 function buttonClickHandler(){ } 在事件處理程序內，從「inputName控件內檢索用戶名，並使用該用戶名建立問候語」，首先判斷用戶名是否輸入，沒有彈出提示框，有則輸出問候語 1 function buttonClickHandler()
2 {
3 var username = document.getElementById("inputName").value;
4 if (username == "") {
5 new Windows.UI.Popups.MessageDialog("Please input your name ！", "Tip").showAsync();
6 return false;
7 }
8 else {
9 var greeting = "Hello, " + username + "! Nice to meet you";
10 document.getElementById("OutputMsg").innerText = greeting;
11 }
12 } 如今，你只需向該按鈕註冊該事件處理程序。註冊事件處理程序的較好時機是在激活應用之時。幸運的是，Visual Studio 爲咱們在 default.js 文件中生成了一些代碼，可處理應用的激活：app.onactivated 事件處理程序 1 app.onactivated = function (args) {
2 if (args.detail.kind === activation.ActivationKind.launch) {
3 if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
4 // TODO: 此應用程序剛剛啓動。在此處初始化
5 //您的應用程序。
6 } else {
7 // TODO: 此應用程序已從掛起狀態從新激活。
8 // 在此處恢復應用程序狀態。
9 }
10 args.setPromise(WinJS.UI.processAll());
11
12 var helloButton = document.getElementById("btnHello");
13
14 helloButton.addEventListener("click", buttonClickHandler, false);
15 }
16 }; 如下是更新的 default.js 文件的完整代碼： 1 (function () {
2 "use strict";
3
4 WinJS.Binding.optimizeBindingReferences = true;
5
6 var app = WinJS.Application;
7 var activation = Windows.ApplicationModel.Activation;
8
9 app.onactivated = function (args) {
10 if (args.detail.kind === activation.ActivationKind.launch) {
11 if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
12 // TODO: 此應用程序剛剛啓動。在此處初始化
13 //您的應用程序。
14 } else {
15 // TODO: 此應用程序已從掛起狀態從新激活。
16 // 在此處恢復應用程序狀態。
17 }
18 args.setPromise(WinJS.UI.processAll());
19
20 var helloButton = document.getElementById("btnHello");
21
22 helloButton.addEventListener("click", buttonClickHandler, false);
23 }
24 };
25
26 app.oncheckpoint = function (args) {
27 // TODO: 即將掛起此應用程序。在此處保存
28 //須要在掛起中保留的任何狀態。您能夠使用
29 // WinJS.Application.sessionState 對象，該對象將在
30 //掛起中自動保存和恢復。若是您須要在
31 //掛起應用程序以前完成異步操做，請調用
32 // args.setPromise()。
33 };
34
35 function buttonClickHandler()
36 {
37 var username = document.getElementById("inputName").value;
38 if (username == "") {
39 new Windows.UI.Popups.MessageDialog("Please input your name ！", "Tip").showAsync();
40 return false;
41 }
42 else {
43 var greeting = "Hello, " + username + "! Nice to meet you";
44 document.getElementById("OutputMsg").innerText = greeting;
45 }
46 }
47
48 app.start();
49 })(); 運行一下咱們的程序吧
執行成功了，咱們再給按鈕添加一些樣式吧 打開default.css文件，添加以下樣式 1 body {
2 }
3
4 .buttonstyle {
5 margin-left:6px;
6 background-color:chocolate;
7 }
8
9
10 @media screen and (-ms-view-state: fullscreen-landscape) {
11 }
12
13 @media screen and (-ms-view-state: filled) {
14 }
15
16 @media screen and (-ms-view-state: snapped) {
17 }
18
19 @media screen and (-ms-view-state: fullscreen-portrait) {
20 } 只有.buttonStyle是咱們本身添加的哦，其餘是默認的 那麼怎麼給按鈕添加上呢，咱們來到default.js文件 1 app.onactivated = function (args) {
2 if (args.detail.kind === activation.ActivationKind.launch) {
3 if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
4 // TODO: 此應用程序剛剛啓動。在此處初始化
5 //您的應用程序。
6 } else {
7 // TODO: 此應用程序已從掛起狀態從新激活。
8 // 在此處恢復應用程序狀態。
9 }
10 args.setPromise(WinJS.UI.processAll());
11
12 var helloButton = document.getElementById("btnHello");
13 helloButton.className = "buttonstyle";
14 helloButton.addEventListener("click", buttonClickHandler, false);
15 }
16 }; helloButton.className="buttonstyle"; 添加上這一句就能夠了，本身運行一下看看吧 本文來自小慧only的博客，原文地址：http://www.cnblogs.com/zhaohuionly/archive/2012/11/24/2785980.html |