iT邦幫忙

DAY 10
9

用 HTML5 和 JavaScript 學習開發 Windows 8 Apps系列 第 13

Day10 實作 WinJS.UI.ListView

今天要實作的UI是 ListView。
ListView可以讓你列出一系列的資料列表(這不是廢話嗎?XD)搖頭

關於 ListView 的做法與解釋,請參考 Windows 的教學: http://msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx
其實 ListView 跟上一篇的 FlipView 做法蠻像的,其實是蠻類似的東西,該做的事大概都如下:

  1. 建立具有data-win-control 屬性的 HTML tag
  2. 定義資料內容
  3. 將資料連接到 ListView
  4. 定義 template,綁定資料來源為何
  5. 修改樣式

當我們要建立一個 ListView 時就是使用 data-win-control 定義使用哪個 UI:

<div data-win-control=”WinJS.UI.ListView”>
     <!--這樣只是建立一個空的 ListView--->
</div>

JavaScript 部分:
ListView 本身有很多的 event, method, properities,暫且先不談。

CSS部分:
你可以客制化你 ListView 的外觀,官方提供了很多的 Css Class 讓你使用,比方說像 .win-container 可以控制 ListView 的每一個 item。

另外,ListView 並不會依照你的內容而幫你自動展高,你必須指出你的 ListView 到底有多高,這必須是一個精確的數值(absolute value),WinJS 預設會給 ListView 400px 的高度,如果你要大於 400px,可以複寫原本的值。

.win-listview{
  height: 100px;
}

之所以有 .win-listview 可以用都是在 WinJS都定義好的,如果你想特別針對哪個 ListView 做樣式的設定,你可以為該 div 加上 id 去設定 css。

#your_id.win-listview{
    //do something
}

ListView 有兩種顯示方式,一個是列表(list),另一個是網格(grid),預設值是網格,假如你要切換成列表,把 layout 屬性改成 layout : {type:WinJS.UI.ListLayout},反之,切換回網格,就是WinJS.UI.GridLayout。

以下是範例的程式碼,供大家參考:

default.html

<p>小winwin的生活</p>

    <div id="winComputerTemplate" data-win-control="WinJS.Binding.Template">
    <div style="width:500px;background:#999; display: -ms-grid;" >

        <img data-win-bind="alt: title; src: picture"
            src="#" width="50" height="50 style="margin:10px; -ms-grid-column: 1;>
        <div style="margin: 5px; -ms-grid-column: 2">

            <h4 data-win-bind="innerText: title"></h4>

            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<div id="basicListView" data-win-control="WinJS.UI.ListView"
    data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
    itemTemplate: select('#winComputerTemplate'),
    layout : {type: WinJS.UI.GridLayout}}">
</div>

另外資料的部分,我另外新增script.js檔案來匯入到default.html
script.js

(function () {
    "use strict";

    var dataArray = [
    { title: "YiYIng's notebook", text: "Sony Vaio S Series", picture: "images/001.JPG" },
    { title: "YiYIng's life", text: "Life is goood", picture: "images/002.JPG" },
    { title: "YiYIng's food", text: "Sony Vaio C Series", picture: "images/003.JPG" },
    { title: "YiYIng's life", text: "Sony Vaio D Series", picture: "images/004.JPG" },
    ];

    var itemList = new WinJS.Binding.List(dataArray);

    var publicMembers =
        {
            itemList: itemList
        };
    WinJS.Namespace.define("DataExample", publicMembers);

})();

實作結果:

GirdLayout的樣子:

ListLayout的樣子:

-ms-grid是初次見面,明天介紹:)


上一篇
Day9 實做WinJS.UI.FlipView
下一篇
Day11 實作 WinJS.UI.Rating
系列文
用 HTML5 和 JavaScript 學習開發 Windows 8 Apps30

1 則留言

0
鐵殼心
iT邦高手 1 級 ‧ 2013-09-25 07:27:13

拍手

yiying iT邦新手 1 級 ‧ 2013-09-25 09:44:26 檢舉

臉紅臉紅

我要留言

立即登入留言