首頁 > 開發者 > JavaScript

運用JavaScript構建你的第一個Metro式應用程式（onWindows 8）（三）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
文章目錄
  • 建立分欄式的 Metro App

這是《運用 JavaScript構建你的第一個Metro式應用程式》系列教程的最後一篇，將會告訴你在的 Microsoft Visual Studio 11 Express for Windows Developer Preview 提供的Metro 樣式和 Split 模板的協助下，如何透過 CSS樣式 使得你的程式更符合 Windows 的 Look & feel。

前言

該文是《運用 JavaScript 構建你的第一個 Metro式應用程式（on Windows8）的第三篇，如果你尚未閱讀第一篇和第二篇，請立刻翻閱。如果讀者已經熟悉 HTML5、CSS3 和 JavaScript 最好，不熟悉也沒關係，不影響理解主體意思。

 

實現CSS3 Grid Layout

 

Microsoft 業已實現了相當程度的 Web 標準：HTML5、ECMAScript 第五版的語言規範和 CSS3。CSS3 其中一項標準為 CSS3Grid Layout（Grid 布局）。通過此技術你可以在 HTML 頁面中輕鬆地調節表格的行與列。在本例中，ListView 正是處於這種布局中。ListView 能夠把所有空白的地方填充，而我們現在的需求只是讓 ListView 佔據螢幕一半的地方足矣，放在左邊，右邊則是內容區。一點擊 ListView  即可在內容區顯示詳細內容。

 

 

如所示，我們想要的是兩行的 Grid，一行用於標題，一行用於 RSS 資料。RSS 資料區域則被切分為兩個列，一列是左邊的 ListView，另一列是內容。我們看看怎麼做，就是需要在右邊划出一塊地方，放置模板：

[html] view plaincopy

  1. <body>  
  2.     <h1>The Old New Thing</h1>  
  3.     <div id="downloadStatus"></div>  
  4.     <div id="template" data-win-control="WinJS.Binding.Template">  
  5.         <div data-win-bind="innerText: title" class="postTitle"></div>  
  6.         <div data-win-bind="innerText: date" class="postDate"></div>  
  7.     </div>  
  8.     <div id="posts" data-win-control="WinJS.UI.ListView"  
  9.          data-win-options="{itemRenderer: template, layout: {type: WinJS.UI.ListLayout},  
  10.                             selectionMode: 'single', onselectionchanged: selectionChanged}">  
  11.     </div>  
  12.     <div id="contentTemplate" data-win-control="WinJS.Binding.Template">  
  13.         <div data-win-bind="innerText: title" class="postTitle"></div>  
  14.         <div data-win-bind="innerText: date" class="postDate"></div>  
  15.         <div data-win-bind="innerHTML: content" class="postContent"></div>  
  16.     </div>  
  17.     <div id="content"></div>   
  18. </body>  

根據使用者在左邊 ListView 選擇的記錄，就在右邊的 div 顯示內容，模板則用來定義外觀。我們還要讓 ListView 設為“單選（Single Select）”的選擇模式（預設是none）。一旦選區內容改變將會觸發事件處理器（event handler），處理器本身較簡單：

 

[javascript] view plaincopy

  1. function selectionChanged(e) {  
  2.     content.innerHTML = "";  
  3.     var selection = posts.winControl.selection;  
  4.   
  5.     if (selection.length) {  
  6.         var post = postItems[selection[0].begin];  
  7.         var contentTemplate = WinJS.UI.getControl(document.getElementById("contentTemplate"));  
  8.         contentTemplate.render(post).then(function (element) {  
  9.             content.appendChild(element);  
  10.         });  
  11.     }  
  12. }  

 

當使用者點擊了 ListView 上某項的內容，這意味著不是選擇內容就是取消內容（反選）。無論哪種事件都觸發事件處理器。具體是，先清除掉當前右邊的內容，其後檢查選區，若存在選區，我們從 RSS 資料中提取文章記錄，然後將此記錄的資料填充到內容範本裡去，——就像我們前面的做法那樣。擁有渲染好的 HTML 元素，最後就是簡單地把 HTML 元素放到我們內容 div 上即可。

至此，除了調整樣式問題以外，Grid Layout 的工作已經大致差不多了。

[css] view plaincopy

  1. body {  
  2.   background-color: #fff;  
  3.   color: #000;  
  4.   font-family: Verdana;  
  5.   padding: 8pt;  
  6.   display: -ms-grid;  
  7.   -ms-grid-rows: auto 1fr;  
  8.   -ms-grid-columns: 1fr 1fr;  
  9. }  
  10.   
  11. ...  
  12.   
  13. #posts {  
  14.   width: 99%;  
  15.   height: 100%;  
  16.   overflow: auto;  
  17.   -ms-grid-row: 2;  
  18.   -ms-grid-column: 1;  
  19. }  
  20.   
  21. ...  
  22.   
  23. #content {  
  24.   width: 95%;  
  25.   height: 100%;  
  26.   overflow-y: auto;  
  27.   margin-right: 64px;  
  28.   -ms-grid-row: 2;  
  29.   -ms-grid-column: 2;  
  30. }  

 

body 樣式中，我們定義整張頁面為 gridl ayout 模式，“-ms-grid-rows: auto1fr;”劃分頁面為兩行，一行自適應寬度（取最大的寬度為寬度），另外一行則佔領剩餘的空間；“-ms-grid-columns:1fr1fr;”劃分頁面為兩列，都是等分的兩列。預設情況下，所有內容都是在第一行、第一列的（行、列皆以1算起，非0算起）。換言之，因為第一行用來放標題恰恰好用不著變動（如果我們打算處理溢出，當然也可以橫跨兩列 span two columns），而文章的 ListView 則移到第二行、第一列中去；內容區移到第二行、第二列中去。於是整個 Grid Layout 就能填滿了。

建立分欄式的 Metro App

到目前為止，我們的 RSS Reader 程式已經躍然紙上了。事實上，這種風格是如此普遍，以致歸納為一種特定的項目模板，稱作“Split Application”。如果您建立一個這種類型的新項目並執行它，你會看到我們建立了一個更漂亮的版本，雖然沒有任何真實的資料。當你點擊左邊的項目，您會看到在右邊所反映的資料，正如我們在我們做的簡單 RSS Reader 程式那樣：

 

下一步
恭喜你！你已經構建起了你的第一個 Metro式程式。到了最後 Say Good Bye 的時刻，為了你的持續學習，我們建議：
  • 在尋找一些 Windows Developer Preview Sample Gallery 樣本程式
  • 探索 Metro style app reference section 文檔。
  • 可以在資源中心發掘 Metro App 更多的資源，如果你遇到問題，也可以利用相關資源來解決問題。

原文地址

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
utf 8 javascript decode utf 8 javascript javascript utf 8 encode javascript encode string utf 8 javascript encode utf 8 string javascript utf 8 decode function javascript convert string to utf 8
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More