AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

處理使用者互動

關閉專家模式

專家模式

使用專家模式以隱藏為初學者設計的網路開發指南。

建立選單

使用者需要一種方式來瀏覽頁面眾多的網站。在許多網站和應用程式中，您可能看過，這是透過導覽選單來完成的。我們的產品經理對選單的要求如下：

  • 使用者點擊頁面頂端的圖示 (☰) 來開啟選單。

  • 選單開啟後，可以透過點擊選單外的地方，或點擊選單右上角的 X 圖示來關閉。

  • 選單應包含多個連結，點擊後可導覽至其他頁面。

從 AMP 組件清單中，我們決定採用以下方式：

  • 選單將使用 <amp-sidebar> 實作。

  • ☰ 和 X 圖示將實作為 <div> 標籤，點擊後會開啟選單。

  • 頁面連結的集合將實作為錨點標籤的無序清單 (<ul>、<li> 和 <a> 標籤)。

仍然存在一些問題。例如，我們如何偵測使用者何時點擊圖示來開啟或關閉選單？或者，我們如何開啟 <amp-sidebar> 組件？

我們需要了解如何在 AMP 中偵測使用者輸入，以及如何執行動作以回應這些使用者輸入。

使用者互動和事件簡介

想想看，與網站互動的方式有多少種。這些方式包括點擊滑鼠、輕觸觸控螢幕或使用鍵盤輸入。點擊按鈕可能會將我們所有的電子郵件標示為已讀，或者可能會開啟選單。按下鍵盤上的 Escape 鍵可能會關閉彈出視窗。用手指向右滑動可能會接受任務或與其他使用者建立連線。

當使用者以任何這些方式與我們網站上的元素互動時，就會觸發事件。事件為我們網站上的元素和組件提供方式，告知我們剛剛發生了一些重要的事情。

在 AMP 中，我們可以選擇哪些事件對我們來說很重要，並透過將 on 屬性與 HTML 標籤和 AMP 組件搭配使用來「處理」這些事件，以表明想要對互動做出反應。當使用者執行如上所述的動作時，會在受影響的組件上觸發「事件」。為了回應該事件，將會執行 on 屬性中指定的「動作」。

例如，想像一下一個按鈕，按下後會讓訊息從螢幕上消失。在 AMP 中，當使用者點擊按鈕時，會觸發 tap 事件。如果該事件包含在該按鈕的 on 屬性中，則事件處理常式會執行，進而隱藏警告訊息。

事件的順序可以在經典 HTML 中像這樣實作：

<div id="warning">This is a warning.</div>
<button onclick="document.getElementById(‘warning’).hidden = true;">
    Hide Warning
</button>

如果您曾經使用過 jQuery，則等效的程式碼如下：

<div id="warning">This is a warning.</div>
<button onclick="$('#warning').hide();">
    Hide Warning
</button>

同時，在 AMP 中，它看起來會像這樣：

<div id="warning">This is a warning.</div>
<button on="tap:warning.hide">
    Hide Warning
</button>

在上面的 on 屬性中，我們看到 tap:warning.hide。在此範例中，tap 是事件，warning 是要作用的元素的 ID，而 hide 是要執行的動作。請注意，hide 是 通用動作 之一，可在每個 AMP 組件甚至其他 HTML 元素上使用。AMP 組件的文件通常會包含可在該組件上執行的動作清單。

某些動作採用函數的形式，並且可能會接受引數。在其他情況下，如果動作很明顯，則可以完全省略動作。在每種情況下，都可以在該組件的文件中找到詳細資訊。我們將在本課程稍後看到這些類型的動作範例。

練習 1：建立選單

現在是時候使用 <amp-sidebar> 組件在我們的網站中實作導覽選單了。<amp-sidebar> 是一個內容面板，最初隱藏在螢幕外。當側邊欄開啟時，內容面板會滑入視窗。側邊欄是透過呼叫組件上的動作來開啟的。它可以從螢幕的右側或左側開啟。組件出現的側邊由 side 屬性控制 (預設值為 left)。側邊欄會停留在螢幕上，直到透過動作關閉，或直到使用者點擊組件外部為止。

ID 為 sidebar1 的側邊欄可以使用以下動作開啟：

  • sidebar1.open

  • sidebar1.toggle

  • sidebar1

開啟後，ID 為 sidebar1 的側邊欄可以使用以下動作關閉：

  • sidebar1.close

  • sidebar1.toggle

現在，使用 <amp-sidebar> 的文件和 AMP 事件和動作 清單，新增符合以下規格的導覽選單：

  • 在頁面的 <header> 元素中，新增一個包含文字圖示 ☰ 的 <div>，點擊後可切換側邊欄。

  • 新增一個 <amp-sidebar> 組件，其 id 為 sidebar1，並在螢幕左側顯示。

  • 在選單中新增一個包含四個項目的清單，目前所有項目都連結到 # (這是一個不會連到任何地方的連結，但我們會在未來的步驟中新增實際的 URL)：我們的故事、我們的自行車、最新型號和聯絡方式。

  • 我們需要製作一個按鈕來開啟選單，另一個按鈕來關閉選單。在側邊欄頂端，新增一個包含 X 的 <div>，點擊後可切換側邊欄。

  • 用 <nav> HTML 元素包圍側邊欄中的連結清單。

  • 將連結清單實作為無序清單 (<ul>)，其中包含清單項目 (<li>)，清單項目又包含錨點連結 (<a>)。

建議的 CSS 指南

  • 為 <amp-sidebar> 指定 sidebar 類別。

  • 為 nav 元素指定 nav 類別。

  • 為 ul 元素指定 label 類別。

  • 為 li 元素指定 nav-item 類別。

完成後，您的頁面在選單滑出前後應如下所示：

標題上的切換按鈕。

側邊選單。

注意：請記住，以上樣式建議僅僅是建議！我們已經為您新增了自訂 CSS，因此您只需使用相關的類別並設定內容樣式，即可獲得與上述螢幕截圖相同的結果。如果您想為頁面新增自己的樣式，可以編寫自己的 CSS。

解決方案

包含側邊欄的頁面部分應如下所示：

<header class="headerbar">
    <div class="navbar-trigger" role="button" tabindex="0" on="tap:sidebar1.toggle">☰</div>
    <h2>Chico's Cheese Bicycles</h2>
</header>
<amp-sidebar class="sidebar" id="sidebar1" layout="nodisplay" side="left">
    <div class="navbar-trigger" role="button" tabindex="0" on="tap:sidebar1.toggle">X</div>
    <nav class="nav">
        <ul class="label">
            <li class="nav-item">
                <a href="#">Our Story</a>
            </li>
            <li class="nav-item">
                <a href="#">Our Bikes</a>
            </li>
            <li class="nav-item">
                <a href="#">Latest Models</a>
            </li>
            <li class="nav-item">
                <a href="#">Contact</a>
            </li>
        </ul>
    </nav>
</amp-sidebar>

此外，請記住將 <amp-sidebar> JavaScript 包含在 <head> 中

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

無障礙功能

您在製作側邊欄時是否檢查了 AMP 驗證工具？在您工作時，您可能會收到如下所示的錯誤訊息：

驗證錯誤

此處出現兩個不同的錯誤，為我們附加了 on 屬性的每個可點擊元素重複顯示。但為什麼呢？

請記住，AMP 會強制執行網路上的最佳做法。在這種情況下，AMP 正在確保您的頁面可供使用輔助技術 (例如螢幕閱讀器) 的使用者存取。

讓我們看看第一個：

The attribute 'role' in tag ‘div' is missing or incorrect, but required by attribute 'on'.

在此範例中，我們新增了一個充當按鈕的 <div> 元素。也就是說，<div> 是可點擊的，並且在點擊時會觸發「事件」。有某些障礙的人需要輔助技術 (例如螢幕閱讀器) 才能瀏覽網路。螢幕閱讀器需要知道哪些元素的行為像按鈕，以便它可以將該事實傳達給使用者。如果您的元素是可點擊的，那麼您必須告知螢幕閱讀器。因此，要消除錯誤，您必須在可點擊的 <div> 中新增 role="button" 屬性。

現在來看第二個錯誤：

The attribute 'tabindex' in tag 'div' is missing or incorrect, but required by attribute 'on'.

我們的一些 <div> 充當按鈕。按鈕允許使用者互動，因此 AMP 知道它們是可聚焦的。「可聚焦」表示如果使用者僅使用鍵盤瀏覽您的網頁，他們可以醒目提示可聚焦的組件並與之互動。在這種情況下，解決方案是將 tabindex 新增到切換側邊欄的 <div> 中，以便使用者可以使用鍵盤到達該元素。

練習 2：在側邊欄新增子選單

糟糕！我們的產品經理來電，說行銷團隊要求在網站選單中顯示太多種類的起司自行車，以至於無法以單一清單的形式顯示。(畢竟，我們最近在產品庫存中新增了軟起司。) 經理建議，最好將額外的區段組織成子選單。點擊區段標題會展開對應的子選單，顯示巢狀連結。再次點擊區段標題會關閉子選單，隱藏所有包含的連結。

<amp-sidebar> 的文件沒有說明如何實作巢狀子選單。我們需要找到另一個可以與 <amp-sidebar> 結合使用的組件，以便我們能夠在側邊欄中新增可摺疊的子選單。

如果我們在 Google 上搜尋「ui collapsible content (UI 可摺疊內容)」，我們會看到一些關於如何建立「手風琴」的搜尋結果。在瀏覽結果後，我們意識到手風琴正是我們需要的。但是，AMP 是否提供了可以用作手風琴的東西？

瀏覽 AMP 組件清單，在版面配置區段中，我們發現確實有一個 <amp-accordion> 組件符合我們的需求。

我們可以將 <amp-accordion> 組件放在 <amp-sidebar> 組件內部，就像我們在前一個練習中將 <ul>、<li> 和 <a> 標籤放在 <amp-sidebar> 內部一樣。當選單開啟時，手風琴組件將以其預設的摺疊狀態顯示。然後，可以透過與手風琴互動來展開或關閉手風琴。當選單關閉時，手風琴將與選單中的所有其他內容一起消失。透過 <amp-sidebar> 和 <amp-accordion> 的協同運作，我們可以建立滑出式巢狀導覽選單！

注意：我們實際上已經練習過將 AMP 組件放在其他組件內部。還記得我們在建立第一個圖片輪播時，將 <amp-img> 組件放在 <amp-carousel> 組件內部嗎？將組件放在其他組件內部是它們可以有效協同運作的一種方式。我們將在本課程稍後探討組合組件的其他方式。

AMP 網站上的兩層導覽選單

使用 <amp-accordion> 的文件，增強您的側邊欄導覽，以新增具有以下規格的子選單：

  • 將 <amp-sidebar> 中的「我們的自行車」清單項目轉換為可展開的清單，其中包含 Chico's Cheese Bicycles 提供的自行車：Ricotta Racer、Cheddar Chase 和 Parmesan Pacer。

  • 將 <amp-sidebar> 中的「最新型號」清單項目轉換為可展開的清單，其中包含 Chico's Cheese Bicycles 的最新型號：聲名狼藉的 Ricotta Racer。

建議的樣式指南

  • 為包含可展開清單的 <li> 指定 nav-dropdown 類別。

  • 為您新增的每個 <amp-accordion> 指定 dropdown 類別。

  • 為每個巢狀清單 <li> 元素指定 dropdown-item 類別，並為巢狀 <ul> 元素指定 dropdown-items 類別。

  • 為您新增的 <amp-accordion> 指定 container 的 layout。

完成後，您展開的側邊選單應如下所示：

展開的選單。

解決方案

<amp-sidebar class="sidebar" id="sidebar1" layout="nodisplay" side="left">
    <div class="navbar-trigger" on="tap:sidebar1.toggle">X</div>
    <nav class="nav">
        <ul class="label">
            <li class="nav-item">
                <a href="#">Our Story</a>
            </li>
            <li class="nav-item nav-dropdown">
                <amp-accordion layout="container" disable-session-states class="dropdown">
                    <section>
                        <header>Our Bikes</header>
                        <ul class="dropdown-items">
                            <li class="dropdown-item">
                                <a href="#">Ricotta Racer</a>
                            </li>
                            <li class="dropdown-item">
                                <a href="#">Cheddar Chaser</a>
                            </li>
                            <li class="dropdown-item">
                                <a href="#">Parmesan Pacer</a>
                            </li>
                        </ul>
                    </section>
                </amp-accordion>
            </li>
            <li class="nav-item nav-dropdown">
                <amp-accordion layout="container" disable-session-states class="dropdown">
                    <section>
                        <header>Latest Models</header>
                        <ul class="dropdown-items">
                            <li class="dropdown-item">
                                <a href="#">Ricotta Racer</a>
                            </li>
                        </ul>
                    </section>
                </amp-accordion>
            </li>
            <li class="nav-item">
                <a href="#">Contact</a>
            </li>
        </ul>
    </nav>
</amp-sidebar>

請記住將 <amp-accordion> JavaScript 包含在 <head> 中

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

上一章 下一章