国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
使用JavaScript+Html創(chuàng)建win8應(yīng)用(一)
      

  最近在學(xué)習(xí)win8 metro app的開發(fā),今天剛剛學(xué)了一個(gè)小的例子,分享一下

  開始之前你需要準(zhǔn)備。。。

  1、開發(fā)win8應(yīng)用需要具備Windows 8 和 Microsoft Visual Studio Express 2012 for Windows 8

  下載 Windows 8

  2、安裝window8之后,轉(zhuǎn)至 開發(fā)者的下載內(nèi)容 ,查找下載工具和 SDK 標(biāo)題,然后單擊“立即下載”按鈕

  3、你需要開發(fā)者許可證才能開始創(chuàng)建 Windows 應(yīng)用商店應(yīng)用。 獲取開發(fā)者許可證。

  在 Visual Studio 中創(chuàng)建新項(xiàng)目,我們來創(chuàng)建名為 HelloWorld 的新應(yīng)用。以下是操作方法:

  啟動(dòng) Visual Studio Express 2012 for Windows 8。

  在“文件”菜單上,選擇“新建項(xiàng)目”。會(huì)出現(xiàn)“新建項(xiàng)目”對(duì)話框??梢栽趯?duì)話框的左側(cè)窗格中選擇要顯示模板的類型。

  在左側(cè)窗格中,依次展開“已安裝”、“模板”和 JavaScript,然后選擇“Windows 應(yīng)用商店”模板類型。對(duì)話框的中心窗格會(huì)顯示一列適用于 JavaScript 的項(xiàng)目模板。

  

 

  在中心窗格中,選擇 Blank App 模板。

  在 Name 文本框中,輸入 "HelloWorld"。

  單擊“確定”可創(chuàng)建項(xiàng)目。Visual Studio 創(chuàng)建項(xiàng)目并在“解決方案資源管理器”中顯示該項(xiàng)目。

  

 

  盡管 Blank App 為最基本的模板,但該模板仍包含少量文件:

  清單文件 (package.appxmanifest)介紹了應(yīng)用(它的名稱、介紹、磁貼、開始頁面、初始屏幕等等)并列出了應(yīng)用包含的文件。

  要在開始屏幕中顯示的一組大的和小的徽標(biāo)圖像(logo.png 和 smalllogo.png)。

  表示應(yīng)用位于 Windows 應(yīng)用商店的圖像 (storelogo.png)。

  顯示應(yīng)用啟動(dòng)時(shí)間的初始屏幕 (splashscreen.png)。

  Windows JavaScript 庫的 CSS 和代碼文件(位于 References 文件夾中)。

  開始頁面 (default.html) 和附帶的 JavaScript 文件 (default.js),這些文件在應(yīng)用啟動(dòng)時(shí)運(yùn)行。

  這些文件是使用 JavaScript 的所有 Windows 應(yīng)用商店應(yīng)用必不可少的文件。在 Visual Studio 中創(chuàng)建的所有項(xiàng)目都包含這些文件。

  現(xiàn)在我們就創(chuàng)建了一個(gè)簡單的應(yīng)用,如果你想看它的外觀,按 F5 可構(gòu)建、部署并啟動(dòng)應(yīng)用。首先會(huì)出現(xiàn)默認(rèn)的初始屏幕。

  

 

  這就是初始屏幕

  若要關(guān)閉應(yīng)用,請(qǐng)從屏幕的頂部邊緣向底部邊緣滑動(dòng)或按 Alt-F4。(有的筆記本要按alt+fn+f4)關(guān)閉應(yīng)用

  接下來我們修改default.htm頁面,這是默認(rèn)生成的

 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 文件中添加一些新的內(nèi)容。正如你向任何其他 HTML 文件中添加內(nèi)容一樣

  1、使用以下內(nèi)容替代 body 元素中的現(xiàn)有內(nèi)容:顯示 "Hello, world!" 的首級(jí)標(biāo)題、詢問用戶名的一些文本、用于接受用戶名的 input 元素、button 以及 div 元素。 向 input、button 和 div 分配 ID。

1 <body>2     <div style="width:100%; height:100%; background-color:green;">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>

  我們啟動(dòng)應(yīng)用程序看看效果吧

  

 

  現(xiàn)在點(diǎn)擊按鈕是沒有任何反應(yīng)的,因?yàn)槲覀儧]有給它注冊(cè)事件,接下來要做的就是給按鈕添加事件,我們向 default.js 文件添加事件處理程序代碼。

  我們打開default.js文件看看是些什么東東

  在我們開始添加自己的代碼之前,我們來看一下該文件中代碼的頭幾行和最后幾行:

1 (function () {2     "use strict";3 4      // Omitted code 5 6  })();

  這是自我執(zhí)行匿名函數(shù)

  代碼的下一行為 JavaScript 代碼打開了嚴(yán)格模式。嚴(yán)格模式為代碼提供了額外的錯(cuò)誤檢查。例如,它防止你使用隱式聲明的變量或?yàn)橹蛔x屬性分配值。

  查看 default.js 中代碼的剩余部分。它處理了應(yīng)用的 activated 和 checkpoint 事件。我們以后會(huì)深入了解這些事件的詳細(xì)信息?,F(xiàn)在,只要了解啟動(dòng)應(yīng)用時(shí)會(huì)觸發(fā) activated 事件。

  我們來為 button 定義事件處理程序

  function buttonClickHandler(){

  }

  在事件處理程序內(nèi),從“inputName控件內(nèi)檢索用戶名,并使用該用戶名創(chuàng)建問候語”,首先判斷用戶名是否輸入,沒有彈出提示框,有則輸出問候語

 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     }

  現(xiàn)在,你只需向該按鈕注冊(cè)該事件處理程序。注冊(cè)事件處理程序的較好時(shí)機(jī)是在激活應(yīng)用之時(shí)。幸運(yùn)的是,Visual Studio 為我們?cè)?default.js 文件中生成了一些代碼,可處理應(yīng)用的激活: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: 此應(yīng)用程序剛剛啟動(dòng)。在此處初始化 5                 //您的應(yīng)用程序。 6             } else { 7                 // TODO: 此應(yīng)用程序已從掛起狀態(tài)重新激活。 8                 // 在此處恢復(fù)應(yīng)用程序狀態(tài)。 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: 此應(yīng)用程序剛剛啟動(dòng)。在此處初始化13                 //您的應(yīng)用程序。14             } else {15                 // TODO: 此應(yīng)用程序已從掛起狀態(tài)重新激活。16                 // 在此處恢復(fù)應(yīng)用程序狀態(tài)。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: 即將掛起此應(yīng)用程序。在此處保存28         //需要在掛起中保留的任何狀態(tài)。您可以使用29         // WinJS.Application.sessionState 對(duì)象,該對(duì)象將在30         //掛起中自動(dòng)保存和恢復(fù)。如果您需要在31         //掛起應(yīng)用程序之前完成異步操作,請(qǐng)調(diào)用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 })();

  運(yùn)行一下我們的程序吧

  

 

  執(zhí)行成功了,我們?cè)俳o按鈕添加一些樣式吧

  打開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是我們自己添加的哦,其他是默認(rèn)的

  那么怎么給按鈕添加上呢,我們來到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: 此應(yīng)用程序剛剛啟動(dòng)。在此處初始化 5                 //您的應(yīng)用程序。 6             } else { 7                 // TODO: 此應(yīng)用程序已從掛起狀態(tài)重新激活。 8                 // 在此處恢復(fù)應(yīng)用程序狀態(tài)。 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"; 添加上這一句就可以了,自己運(yùn)行一下看看吧

  本文來自小慧only的博客,原文地址:http://www.cnblogs.com/zhaohuionly/archive/2012/11/24/2785980.html

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
WIN8中加入了用javascript來實(shí)現(xiàn)windows程序
Windows 8 Metro App開發(fā)選擇什么語言?
Asp.net 將js文件打包進(jìn)dll 方法
JavaScript的優(yōu)化處理
chrome插件編寫中需要了解的幾個(gè)概念和一些方法 | IT宅.com
JavaScript 提高性能的幾個(gè)知識(shí)點(diǎn)總結(jié) – 碼農(nóng)網(wǎng)
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服