快速入門：新增 FlipView (HTML)

發行項
03/04/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

許多應用程式都會顯示使用者可以瀏覽的項目清單。這些清單可能從資料庫、網路或 JSON 資料來源取得資料。 WinJS 就是基於這個目的而提供 FlipView 控制項。

FlipView 控制項。

先決條件

快速入門：新增適用於 JavaScript 的 Windows Library 的控制項及樣式

什麼是 FlipView？

FlipView 是可以瀏覽項目集合的 WinJS 控制項，讓您一次瀏覽一個項目。最適合用於顯示影像圖庫。

FlipView 會從 IListDataSource 取得其資料。 WinJS 提供多種 IListDataSource 物件類型：

您可以使用 List 從資料陣列建立 IListDataSource。
您可以使用 StorageDataSource 來存取檔案與目錄的相關資訊。

您也可以建立自訂的資料來源，讓它連接到其他類型的資料提供者，例如 Web 服務或資料庫。如需指示，請參閱如何建立自訂資料來源。

建立簡單的 FlipView

將 WinJS 的參考新增到您的 HTML 檔案 (如果尚未新增)。


<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

這個範例顯示當您在 Microsoft Visual Studio 建立新的 [空白的應用程式] 專案時，所產生之 default.html 檔案的 HTML。請注意，其中已包含 WinJS 的參考。


<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>FlipViewExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- FlipViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

這個範例使用淺色樣式表而不是深色樣式表，因此如果您希望自己的應用程式符合這些範例，請變更這個參考：

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

...到這個：

     <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">

在 HTML 檔案中，建立 div 元素並將其 data-win-control 屬性設定為 "WinJS.UI.FlipView"。
```
<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
></div>
```
在隨 HTML 檔案提供的 JavaScript 程式碼中，當載入 HTML 時呼叫 WinJS.UI.processAll 函式。
```
WinJS.UI.processAll();
```
下一個範例顯示當您建立新的 [空白的應用程式] 專案時，與 default.html 檔案一起建立的 default.js 檔案。
```
// default.js
(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: Initialize your application here.
            WinJS.UI.processAll();
        }
    };

    app.start();
})();
```
要將 FlipView 新增到起始頁 (default.html)，此範例才能正常運作。如果在頁面控制項新增 FlipView，您將不需要呼叫 WinJS.UI.processAll，因為頁面控制項會為您進行這個動作。如果您要將 FlipView 新增到自訂的 HTML，可以使用 DOMContentLoaded 事件呼叫 WinJS.UI.processAll。如需啟用控制項的詳細資訊，請參閱快速入門：新增 WinJS 控制項與樣式。
**重要：**設定 FlipView 的高度及寬度。為了使 FlipView 能夠轉譯，您必須以絕對值指定其高度。將這個 CSS 新增到包含 FlipView 之 HTML 頁面的 CSS 樣式表：
```
#basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}
```

此程式碼會建立空白的 FlipView。如果您執行應用程式，就會看見空白的控制項。在下一節中，您要建立一些資料供 FlipView 顯示。

定義資料

輸入程式碼，將資料來源建立在不同的 JavaScript 檔案中，可方便進行維護。在本節中，您會了解如何建立資料的 JavaScript 檔案、如何建立 List，以及如何使用 WinJS.Namespace.define 函式讓整個應用程式存取資料。

使用 Visual Studio，將資料檔案新增到專案。在 [方案總管] 中，用滑鼠右鍵按一下專案的 js 資料夾，然後選取 [加入] > [新增項目]****。隨即顯示 [加入新項目] 對話方塊。
選取 [JavaScript 檔]****。將它命名為 "dataExample.js"。按一下 [加入] 建立檔案。Visual Studio 會建立一個名為 dataExample.js 的空白 JavaScript 檔案。
開啟 dataExample.js。建立匿名函式，然後開啟 strict 模式。

如撰寫基本應用程式的程式碼中所述，最好是將 JavaScript 程式碼包在匿名函式中進行封裝，並使用 strict 模式。
```
(function () {
    "use strict"; 





})();
```

建立資料陣列。這個範例會建立物件的陣列。每個物件都有三個屬性：type、title 和 image。

(function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

})();

注意如果依照程式碼進行，您可以變更本機電腦上檔案的圖片，或是藉由下載 HTML FlipView 控制項範例取得圖片 (這不是同一個範例，但使用相同的影像)。您也可以執行範例而不新增影像—範例仍會執行。

使用陣列建立 List 物件。

(function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

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

})();

藉由宣告命名空間以及將 List 新增為 Public 成員的方式，公開 List。

由於您剛才撰寫的程式碼是包含在匿名函式中，因此全都無法公開存取。(這也是使用匿名函式的部分原因：讓私有資料維持私有)。若要讓您的 FlipView 能夠存取 List，必須讓它能夠公開存取。其中一種方法是使用 WinJS.Namespace.define 函式建立命名空間，並新增 List 做為其中一個成員。

WinJS.Namespace.define 函式使用兩個參數：要建立的命名空間名稱，以及包含一或多個屬性/值組的物件。每個屬性都是成員的公用名稱，而每個值是您私用程式碼中想要公開的基本變數、屬性及函式。

這個範例會建立名為 DataExample 的命名空間，該命名空間會公開名為 itemList 的 Public 成員，而這個成員會傳回您的 List。
```
(function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

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

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: dataList 
        };
    WinJS.Namespace.define("DataExample", publicMembers); 

})();
```

您已建立可由您的 FlipView 存取的資料來源。在下一節中，您會將資料連線到 FlipView。

將資料連線到 FlipView

在包含 FlipView 的 HTML 檔案 head 區段中，將參考新增到剛才建立的資料檔案 (dataExample.js) 中：

<head>
    <meta charset="utf-8">
    <title>FlipViewExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- FlipViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>

    <!-- Your data file. -->
    <script src="/js/dataExample.js"></script>

</head>

使用上一節建立的資料來設定 FlipView 控制項的 itemDataSource 屬性。

itemDataSource 屬性接受 IListDataSource 物件。List 物件不是 IListDataSource，但卻有可以傳回自己的 IListDataSource 版本的 dataSource 屬性。

若要連接資料，請將 FlipView 控制項的 itemDataSource 屬性設定為 DataExample.itemDataList.dataSource：
```
<div id="basicFlipView"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>  
```

執行應用程式。FlipView 可顯示資料來源的屬性與值：

以不使用範本的方式顯示資料來源內容。

這不是我們想要的外觀。我們只想要顯示標題欄位的值，而且要顯示實際影像，不是影像的路徑。若要取得所需的呈現方式，我們必須定義 Template。我們將在下個步驟教您如何進行。

定義項目範本

此時，FlipView 已有所需的資料，但不知道該如何顯示。為此，您需要項目範本。建立範本的方式有兩種：您可以使用標記來定義 WinJS.Binding.Template，或者可以建立範本化函式。此範例使用標記建立範本。(如需建立範本函式的詳細資訊，請參閱 itemTemplate 屬性。)

WinJS.Binding.Template 很容易建立：定義想要用以顯示每個清單項目的標記，然後指出要顯示每個資料欄位的位置。

在 HTML 中，建立 WinJS.Binding.Template 控制項，然後指派識別碼。本範例使用識別碼 "ItemTemplate"。
```
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">

</div>
```
注意您的範本必須先定義才能使用，因此，請在 FlipView 的 HTML 前面新增我們的範本 HTML。

WinJS.Binding.Template 必須有單一根元素。建立 div 元素做為範本內容的父系。

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>

    </div>
</div>

建立 FlipView 將為所含的每個資料項目產生的標記。您在上一節中建立的資料包含影像位置、標題和一些文字，現在要建立下列元素：
- 可顯示圖片欄位的 img 元素。
- 可顯示標題欄位的 h2 元素。
(基於格式化的理由，這個範例還會新增額外的 div 元素。)
```
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#"  />
        <div>
            <h2></h2>
        </div>
    </div>
</div>
```
在每個顯示資料的元素上設定 data-win-bind 屬性。data-win-bind 屬性使用下列語法：

data-win-bind="propertyName: dataFieldName"

例如，若要將 img 的 src 屬性繫結至 "picture" 欄位，請使用下列語法：
```
<img data-win-bind="src : picture" />
```
若要設定多個屬性，請以分號加以區隔：

data-win-bind="property1Name: dataField1Name; property2Name: dataField2Name"

此範例將範本中的項目繫結至對應的資料欄位。
```
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#" data-win-bind="src: picture; alt: title" />
        <div>
            <h2 data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>
```

若要使用項目範本，請將 FlipView 的 itemTemplate 屬性設定為項目範本的識別碼 (在這個範例中為 "ItemTemplate")。

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#" data-win-bind="src: picture; alt: title" />
        <div>
            <h2 data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>    

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"
></div>

現在當您執行應用程式時，就會在清單中顯示繫結的資料。

資料繫結 FlipView。

請注意，有一些格式化的問題：標題文字未顯示。下一節將說明如何藉由設定範本的樣式修正這個問題。

設定項目的樣式

您可以使用 CSS 設定項目範本的樣式。下一個範例會將一些 CSS 類別新增到您在定義項目範本一節中定義的範本。

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div class="overlaidItemTemplate">
        <img class="image" src="#" data-win-bind="src: picture; alt: title" />
        <div class="overlay">
            <h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"
></div>

在 HTML 檔案的 CSS 樣式表中，為範本新增下列樣式：

#basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}

/**********************************************/
/*                                            */
/* Styles used in the item template           */
/*                                            */
/**********************************************/
.overlaidItemTemplate
{
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    width: 480px;
    height: 270px;
}

    .overlaidItemTemplate img
    {
        width: 100%;
        height: 100%;
    }
    
    .overlaidItemTemplate .overlay
    {
        position: relative;
        -ms-grid-row-align: end;
        background-color: rgba(0,0,0,0.65);
        height: 40px;
        padding: 20px 15px;
        overflow: hidden;
    }

        .overlaidItemTemplate .overlay .ItemTitle
        {
            color: rgba(255, 255, 255, 0.8);
        }

這裡是 FlipView 現在看起來的樣子：

已設定樣式的 FlipView。注意

變更 FlipView 瀏覽按鈕的 font-family，會使按鈕不再包含正確的字符。

變更 FlipView 的方向

根據預設，FlipView 會使用水平方向。您可以將 FlipView 的 orientation 屬性設為 "vertical" 使其垂直顯示。

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate, orientation: 'vertical' }"
></div>

垂直方向的 FlipView。

將互動式元素新增至項目範本

項目範本可包含大部分其他控制項，但不可包含 ListView 或另一個 FlipView。

通常使用者在與元素互動時，FlipView 會擷取該互動，並用它來判斷使用者是否已選取或叫用項目，或是在項目間移動瀏覽。您必須將 win-interactive 類別附加到互動式元素或其父元素之一，才能讓像控制項的互動式元素接收輸入。該元素與其子項接收互動，而且不再觸發 FlipView 的事件。

當您將 win-interactive 附加到項目範本中的元素時，請勿讓元素填滿整個項目，否則使用者將無法選取或啟動該項目。

若要新增互動式元素至項目範本，您必須使用範本函式，而不是 WinJS.Binding.Template。如需如何執行這項操作的範例，請參閱 HTML FlipView 控制項範例。如需範本函式的詳細資訊，請參閱 FlipView.itemTemplate 中的範例。

建立內容控制項

FlipView 會公開方法和事件，供您建立讓使用者得知目前項目位置的自訂控制項，以及瀏覽集合的替代機制。下列影像顯示一組已設定樣式的選項按鈕，這些按鈕會透過 pageselected 和 pagevisibilitychanged 事件與 FlipView 保持同步。

含有內容控制項的 FlipView。

如需說明如何執行這項操作的程式碼，請參閱 HTML FlipView 控制項範例。