Share via

快速入門：針對配置和瀏覽使用 Pivot 控制項

  • 發行項

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

了解如何使用 WinJS.UI.Pivot 控制項，在 Windows Phone 8.1 應用程式進行配置和瀏覽。

Pivot 提供一個快速的方法，透過向左或向右移動瀏覽，讓您管理、呈現以及在應用程式的內容區段之間快速瀏覽 — 像轉盤一樣不斷的繞圈。它可以用於篩選大型資料集、檢視多個資料集，或切換應用程式檢視。

Pivot 實作範例。

為協助您的應用程式選擇最佳的瀏覽模式，請參閱瀏覽模式。

另外也可以參閱應用程式功能，從開始到完成系列中的單層瀏覽和階層式瀏覽模式。

先決條件

指示

1. 使用樞紐分析應用程式 (Windows Phone) 範本建立新專案

您也可以使用 [中樞/樞紐分析應用程式 (通用應用程式)] 範本來建立通用 Windows app。針對這個範例，我們將使用 [樞紐分析應用程式 (Windows Phone)]**** 範本。

Visual Studio 中的樞紐分析應用程式範本

  1. 啟動 Microsoft Visual Studio 2013 Update 2。

  2. 選擇 [檔案] > [新增專案]，或從 [起始頁] 索引標籤中按一下 [新增專案]。隨即開啟 [新增專案] 對話方塊。

  3. 在左側的 [範本]**** 窗格中，展開 [已安裝的] => [範本]**** => [JavaScript] => [市集應用程式]****。

  4. 選取 [Windows Phone 應用程式] 範本類型。適用於 JavaScript 的可用專案範本會顯示在對話方塊的中央窗格中。

  5. 在中央窗格中，選取 [樞紐分析應用程式 (Windows Phone)]**** 專案範本。

  6. 在 [名稱] 文字方塊中，輸入專案的名稱。這個主題中的範例使用 PivotDemo。

  7. 按一下 [確定] 來建立專案。

2. 新增區段 (PivotItem)

Pivot 中的每個區段都是由 PivotItem 控制項所定義。範本包含四個示範區段，您可以視需要加以修改或刪除。 這裡我們將會示範如何新增第五個區段。

範本的基本檔案結構在 [方案總管] 中看起來像這樣。

注意   為了與通用 Windows app 保持一致，此範本使用階層式瀏覽模式的 hub-section-detail/item 模型做為檔案命名慣例。

 

新中樞/樞紐分析應用程式方案中的檔案。

  1. Pivot 和每個 PivotItem 都會在 pages\hub 資料夾的 hub.html 中宣告。

    在這裡，範本包含一個 Pivot 控制項 (中樞) 和四個 PivotItem 控制項 (區段)，其中還包含靜態 (section1、section2、section4) 及資料驅動 (section3) 內容。

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>hubPage</title>

  <link href="/css/phone.css" rel="stylesheet" />
  <link href="/pages/hub/hub.css" rel="stylesheet" />
  <link href="/pages/hub/hubphone.css" rel="stylesheet" />
  <script src="/js/data.js"></script>
  <script src="/pages/hub/hub.js"></script>
  <script src="/pages/hub/section1Page.js"></script>
  <script src="/pages/hub/section2Page.js"></script>
  <script src="/pages/hub/section3Page.js"></script>
  <script src="/pages/hub/section4Page.js"></script>
</head>
<body>
  <div class="hubpage fragment">
    <header aria-label="Header content" role="banner">
      <button class="titlearea backbutton" 
        data-win-control="WinJS.UI.BackButton">
      </button>
      <h1 class="titlearea win-type-ellipsis">
        <span class="pagetitle">PivotDemo</span>
      </h1>
    </header>

    <section aria-label="Main content" role="main">
      <!-- Customize the Hub control by modifying the 
           HubSection controls here. -->

      <div class="hub" data-win-control="WinJS.UI.Pivot">

        <div class="section1 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section1'} }">
          <div class="sectioncontrol" 
            id="section1contenthost" 
            data-win-control="HubApps_SectionControls.Section1Control">
          </div>
        </div>

        <div class="section2 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section2'} }">
          <div class="added pivot-item-viewport" >
            <div class="added pivot-item-surface" >
              <div class="sectioncontrol" 
                id="section2contenthost" 
                data-win-control="HubApps_SectionControls.Section2Control">
              </div>
            </div> 
          </div> 
        </div>

        <div class="section3 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-res="{ winControl: {'header': 'Section3'} }">
          <div class="section3contenthost sectioncontrol" 
            id="section3contenthost" 
            data-win-control="HubApps_SectionControls.Section3Control"
            data-win-options="{
              dataSource: select('.pagecontrol').winControl.section3DataSource,
              layout: {type: WinJS.UI.ListLayout},
              oniteminvoked: select('.pagecontrol').winControl.section3ItemNavigate}">
          </div>
        </div>

        <div class="section4 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section4'} }">
            <div class="sectioncontrol" 
              id="section4contenthost" 
              data-win-control="HubApps_SectionControls.Section4Control">
            </div>
        </div>
      </div>
    </section>
  </div>
</body>
</html>

    只要複製並貼上其中一個現有的區段就能宣告額外的頁面。視需要修改新的區段規格。

    現在，我們根據 section4 宣告第五個區段。

    <div class="section4 section" 
  data-win-control="WinJS.UI.PivotItem" 
  data-win-options="{ isHeaderStatic: true }" 
  data-win-res="{ winControl: {'header': 'Section4'} }">
  <div class="sectioncontrol" 
    id="section4contenthost" 
    data-win-control="HubApps_SectionControls.Section4Control">
  </div>
</div>

<div class="section5 section" 
  data-win-control="WinJS.UI.PivotItem" 
  data-win-options="{ isHeaderStatic: true }" 
  data-win-res="{ winControl: {'header': 'Section5'} }">
     <div class="sectioncontrol" 
    id="section5contenthost" 
    data-win-control="HubApps_SectionControls.Section5Control">
  </div>
</div>

  2. 在 hub.html 宣告的每個 PivotItem 必須在對應的 HTML、JavaScript 及可能的階層式樣式表 (CSS) 和資源檔案中定義配置和功能。

    在我們的範例中，是將 section5Page.html 和 section5Page.js 新增到 pages/hub 資料夾中。

    • section5Page.html—可指定區域的內容。

      這裡，我們只會顯示項目頁面的文字連結。

      <!DOCTYPE html>
<html>
<head>
   <title></title>
   <link href="/pages/hub/hub.css" rel="stylesheet" />
   <script src="/pages/hub/section5Page.js"></script>
</head>
<body>
   <div class="fragment section1page">
      <section aria-label="Main content" role="main">
        <a href="/pages/item/section5Item1.html">Link</a>
      </section>
   </div>
</body>
</html>

    • 每個區段的標頭字串定義在 strings/en-US 資料夾的 resources.resjson 中。

      現在，我們為區段 5 新增另一個名稱值組。

          "Section5": "Section 5",
    "Section5Description": "",

    • section5Page.js—可指定與區段關聯的行為。

      在這裡，我們將呼叫頁面的基本 ready 函式，並將 section5Page 公開為自訂控制項以便在中樞上顯示。此外，我們還有一個文字連結的 Click 處理常式，可起始對項目頁面的瀏覽。

      (function () {
   "use strict";

   var ControlConstructor = 
     WinJS.UI.Pages.define("/pages/hub/section5Page.html", {
       // This function is called after the page control contents 
       // have been loaded, controls have been activated, and 
       // the resulting elements have been parented to the DOM. 
       ready: function (element, options) {
         options = options || {};

         // Retrieve the page 2 link and register the event handler. 
         // Don't use a button when the action is to go to another 
         // page; use a link instead. 
         // See Guidelines and checklist for buttons at 
         // https://go.microsoft.com/fwlink/p/?LinkID=313598
         // and Quickstart: Using single-page navigation at 
         // https://go.microsoft.com/fwlink/p/?LinkID=320288.
         WinJS.Utilities.query("a").listen(
           "click", linkClickHandler, false);
      },
   });

   // The following lines expose this control constructor as a global. 
   // This lets you use the control as a declarative control inside 
   // the data-win-control attribute. 

   WinJS.Namespace.define("HubApps_SectionControls", {
      Section5Control: ControlConstructor
   });

   function linkClickHandler(eventInfo) {
      var link = eventInfo.target;
      eventInfo.preventDefault();
      if (link.href.indexOf("ms-appx") > -1) {
        WinJS.Navigation.navigate(link.href);
      }
      else if (link.href.indexOf("http") > -1) {
        // Create a Uri object from a URI string 
        var uri = new Windows.Foundation.Uri(link.href);
        var options = new Windows.System.LauncherOptions();
        // Launch the URI with a warning prompt
        options.treatAsUntrusted = true;
        // Launch the URI
        Windows.System.Launcher.launchUriAsync(uri, options).then(
           function (success) {
              if (success) {
                // URI launched
              } else {
                // URI launch failed
              }
           });
      }
   }
})();

    section5Page.js 的參照也必須新增到 pages/hub 資料夾中的 hub.html。

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

   <link href="/css/phone.css" rel="stylesheet" />
   <link href="/pages/hub/hub.css" rel="stylesheet" />
   <link href="/pages/hub/hubphone.css" rel="stylesheet" />
   <script src="/js/data.js"></script>
   <script src="/pages/hub/hub.js"></script>
   <script src="/pages/hub/section1Page.js"></script>
   <script src="/pages/hub/section2Page.js"></script>
   <script src="/pages/hub/section3Page.js"></script>
   <script src="/pages/hub/section4Page.js"></script>
   <script src="/pages/hub/section5Page.js"></script>
</head>

  3. 執行應用程式。選擇 [偵錯] > [開始偵錯]****，或選擇 F5 (選擇 SHIFT + F5 可停止偵錯並返回 Microsoft Visual Studio)。

    以下為包含新區段的 Phone 應用程式的螢幕擷取畫面。

    樞紐範例顯示新的區段 5。

3. 使用中樞/樞紐分析應用程式 (通用應用程式) 範本建立通用 Windows app

使用 [中樞/樞紐分析應用程式 (通用應用程式)] 範本，為 Windows 和 Windows Phone 建立通用 Windows app。

  1. 啟動 Visual Studio 2013 Update 2。

  2. 選擇 [檔案]**** > [新增專案]，或從 [起始頁]**** 索引標籤中按一下 [新增專案]。隨即開啟 [新增專案]**** 對話方塊。

  3. 在左側的 [範本] 窗格中，展開 [已安裝的]**** => [範本] => [JavaScript]**** => [市集應用程式]。

  4. 選取 [通用應用程式]**** 範本類型。適用於 JavaScript 的可用專案範本會顯示在對話方塊的中央窗格中。

  5. 在中央窗格中，選取 [中樞/樞紐分析應用程式 (通用應用程式)] 專案範本。

  6. 在 [名稱]**** 文字方塊中，輸入專案的名稱。

  7. 按一下 [確定] 來建立專案。

  8. 您的新 [中樞/樞紐分析應用程式]**** 方案包含三個專案。三個專案分別用於 Windows 特定檔案、Phone 特定檔案及共用程式碼。針對測試需求，將 [啟始專案] 設定為 Windows 或 WindowsPhone 專案。

4. 新增通用 Windows app 的區段

如同 [樞紐分析應用程式 (Windows Phone)]**** 範本，[中樞/樞紐分析應用程式] 範本包含四個示範區段，您可以視需要修改或刪除。

範本的基本檔案結構在 [方案總管]**** 中看起來像這樣。

新中樞/樞紐分析應用程式方案中的檔案。

每個對應的 HTML、JavaScript、CSS 和資源檔案可以是 Windows 和 Phone 專案通用的檔案，或特定平台的專用檔案 (請參閱範本示範中的各種專案)。

執行應用程式。選擇 [偵錯] > [開始偵錯]****，或者選擇 F5 (選擇 SHIFT + F5，可停止偵錯並返回 Visual Studio)。

請記住：: 將 WindowsPhone 專案設為 [啟始專案]。

以下為包含新區段的 Phone 應用程式的螢幕擷取畫面。

Pivot 範例顯示新的區段 5。

以下是 Windows 應用程式中新區段的螢幕擷取畫面。

通用 Pivot 範例顯示新的區段 5。

摘要

在這個快速入門中，您檢閱了 [樞紐分析應用程式 (Windows Phone)]**** 範本以及 Visual Studio 2013 Update 2 內含的 [中樞/樞紐分析應用程式 (通用應用程式)] 通用範本。您也在區段內容所含的文字連結上新增了包含 PivotItem 控制項的新區段和 click 事件的簡單處理常式函式。

相關主題

適用於開發人員

您的第一個應用程式 - 第三部分：PageControl 物件與瀏覽

快速入門：使用單頁瀏覽

WinJS.Navigation Namespace

WinJS.UI.Pivot

WinJS.UI.PivotItem

HTML Pivot 控制項範例

瀏覽和瀏覽歷程記錄範例

適用於設計者

Pivot 的指導方針

瀏覽模式

命令模式

配置