Google AMP - 操作和事件

要在 amp-component 上使用操作或事件，我们可以使用 on 属性。在本章中，让我们详细讨论它们。

事件

使用事件的语法如下：

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

传递给 on 属性的详细信息如下：

eventName - 获取 amp-component 可用的事件名称。例如，对于表单，我们可以使用 submit-success、submit-error 事件名称。
elementId - 获取需要在其中调用事件的元素的 id。它可以是我们要了解其成功或错误的表单的 id。
methodName - 获取在事件发生时要调用的方法的名称。
arg=value - 以 key=value 形式获取传递给方法的参数。

也可以将多个事件传递给 on 属性，方法如下：

on = "submit-success:lightbox;submit-error:lightbox1"

如果有多个事件，则将它们传递给 on 属性并使用分号 (;) 分隔。

操作

操作基本上与 on 属性一起使用，语法如下：

on = "tab:elementid.hide;"

我们可以传递多个操作，如下所示：

on = "tab:elementid.open;tab:elementid.hide;”

Elementid 是要执行操作的元素的 id。

AMP 有一些全局定义的事件和操作，可以在任何 amp-component 上使用，它们是 tap 事件，操作是 hide、show 和 togglevisibility。

如果要隐藏/显示或在任何 html 或 amp 组件上使用 togglevisibility，可以使用 on=”tap:elementid.[hide/show/togglevisibility]”

让我们看看一些事件和操作的工作示例。

在输入元素上

让我们借助一个工作示例更好地理解这一点：

示例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Bind</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
   
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
   
      <script async custom-element = "amp-bind" src = "
         https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>
   
      <script async custom-element = "amp-lightbox" src = "
         https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
      </script>
   
      <style amp-custom>
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;}
   
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
         #txtname{
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
         }
         div {
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <button on = "tap:AMP.setState({displaylightbox: true})">
         Click Here
      </button>
      <br/>
      <br/>

      <h3>AMP - Input Element</h3>
      <input id = "txtname" placeholder = "Type here" on = 
         "input-throttled:AMP.setState({name: event.value})">
      <div [text] = "name"></div>
   </body>
</html>

输出

请注意，在上面的示例中，我们正在输入字段上使用事件，如下所示：

<input id = "txtname" placeholder = "Type here" 
on = "input-throttled:AMP.setState({name: event.value})">

使用的事件是 input-throlled。

我们也可以使用 change，如下所示：

<input id = "txtname" placeholder = "Type here" on = 
"change:AMP.setState({name: event.value})">

用户退出输入框后将显示输出。我们可以在输入类型（如单选按钮、复选框等）以及 select 元素上使用 change 事件。

<input id = "txtname" placeholder = "Type here" on = 
"input-debounced:AMP.setState({name: event.value})">

事件 input-debounced 与 change 事件相同，但输出在用户键入 300 毫秒后显示。

示例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Bind</title>
      <link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
            -webkit-animation:none;
            -moz-animation:none;
            -ms-animation:none;
            animation:none}
         </style>
      </noscript>
         
      <script async custom-element = "amp-bind" 
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>
   
      <script async custom-element = "amp-lightbox" 
         src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
      </script>
      <style amp-custom>
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
         #txtname{
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
         }
         div {
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <button on = "tap:AMP.setState({displaylightbox: true})">
         Click Here
      </button>
      <br/>
      <br/>

      <h3>AMP - Input Element</h3>
         <input id = "txtname" placeholder = "Type here" on =
         "input-debounced:AMP.setState({name: event.value})">
      <div [text] = "name"></div>
   </body>
</html>

输出

在 Amp Lightbox 上

在本节中，我们将测试 lightbox 上的以下事件：

lightboxOpen
lightboxClose

示例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Lightbox</title>
      <link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
   
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>

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

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

      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button { 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
         p{font-size:30px;}
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Lightbox</h3>
      <p [text] = "'Lightbox is ' + lightboxstatus + '.'">
         Lightbox Event Testing
      </p>
      <button on = "tap:my-lightbox.open">
         Show LightBox
      </button>
      <amp-lightbox id = "my-lightbox" layout = "nodisplay" 
      close-button on = "lightboxOpen:AMP.setState({lightboxstatus:'opened'});
      lightboxClose:AMP.setState({lightboxstatus:'closed'});">
         <div class = "lightbox">
            <amp-img alt = "Beautiful Flower" src = "images/loreal.gif"
               width = "246"
               height = "205">
            </amp-img>
         </div>
      </amp-lightbox>
   </body>
</html>

输出

以下代码显示了如何在 lightbox 上实现打开和关闭事件：

<p [text]="'Lightbox is ' + lightboxstatus + '.'">Lightbox Event Testing</p>
<button on = "tap:my-lightbox.open">Show LightBox</button>
<amp-lightbox id = "my-lightbox" layout = "nodisplay" 
   close-button on = "lightboxOpen:AMP.setState({lightboxstatus:'opened'});
   lightboxClose:AMP.setState({lightboxstatus:'closed'});">
   
   <div class = "lightbox">
      <amp-img alt = "Beautiful Flower" src = "images/loreal.gif"
         width = "246"
         height = "205">
      </amp-img>
   </div>
</amp-lightbox>

Amp-Selector 上的事件

amp-selector 上可用的事件是 select。

示例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src  = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Selector</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
      
      <script async custom-element = "amp-bind" 
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>
   
      <script async custom-element = "amp-selector" 
         src = "https://cdn.ampproject.org/v0/amp-selector-0.1.js">
      </script>
   
      <style amp-custom>
         .radio-menu {
            list-style: none;
         }
         .radio-menu [option][selected] {
            outline: none;
         }
         .radio-menu [option] {
            display: flex;
            align-items: center;
         }
         .radio-menu [option]:before {
            transition: background 0.25s ease-in-out;
            content: "";
            display: inline-block;
            width: 24px;
            height: 24px;
            margin: 8px;
            border-radius: 100%;
            border: solid 1px black;
         }
         .radio-menu [option = red][selected]:before {
            text-align: center;
            content: "✓";
            color: white;
            background: red;
         }
         .radio-menu [option = green][selected]:before {
            text-align: center;
            content: "✓";
            color: white;
            background: green;
         }
         .radio-menu [option = blue][selected]:before {
            text-align: center;
            content: "✓";
            color: white;
            background: blue;
         }
         p{font-size:30px;}
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Selector</h3>
      <p [text] = "'Color selected is ' + ampselectorstatus + '.'">
         Amp Selector Event Testing
      <p>
      <amp-selector 
         class = "radio-menu" 
         layout = "container" 
         name = "my-selector" 
         on = "select:AMP.setState({ampselectorstatus:event.selectedOptions})">
         <div option = "red">
            Red
         </div>
         <div option = "green">
            Green
         </div>
         <div option = "blue">
            Blue
         </div>
      </amp-selector>
   </body>
</html>

输出

select 事件的使用方法如下：

<p [text]="'Color selected is ' + ampselectorstatus + '.'">
   Amp Selector Event Testing
</p>
<amp-selector 
   class = "radio-menu" 
   layout  ="container" 
   name =" my-selector" 
   on = "select:AMP.setState({ampselectorstatus:event.selectedOptions})">
   <div option = "red">
      Red
   </div>
   <div option = "green">
      Green
   </div>
   <div option = "blue">
      Blue
   </div>
</amp-selector>

Amp-Sidebar 上的事件

可用的事件是 sidebarOpen 和 sidebarClose。

示例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Sidebar</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> 
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
   
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
      <script async custom-element = "amp-bind" 
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>
      <script async custom-element = "amp-sidebar" 
         src = "https://cdn.ampproject.org/v0/amp-sidebar-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{ 
            background-color: #ACAD5C; 
            color: white;   
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         .amp-sidebar-toolbar-target-shown {
            display: none;
         }
         p{font-size:30px;}
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Sidebar</h3>
      <p [text] = "'Sidebar is ' + ampsidebarstatus + '.'">
         Amp Sidebar Event Testing
      </p>
      <button on = "tap:sidebar1">
         Show Sidebar
      </button>
      <amp-sidebar 
         id = "sidebar1" 
         layout = "nodisplay" 
         side = "right" 
         on = "sidebarOpen:AMP.setState({ampsidebarstatus: 'Opened'});
         sidebarClose:AMP.setState({ampsidebarstatus: 'Closed'})">
         <ul>
            <li>Nav item 1</li>
            <li>
               <a href = "#idTwo" on = "tap:idTwo.scrollTo">Nav item 2</a>
            </li>
            <li>Nav item 3</li>
            <li>
               <a href = "#idFour" on="tap:idFour.scrollTo">Nav item 4</a>
            </li>
            <li>Nav item 5</li>
            <li>Nav item 6</li>
         </ul>
      </amp-sidebar>
      <div id = "target-element">
      </div>
   </body>
</html>

输出

事件的使用方法如下：

<p [text] = "'Sidebar is ' + ampsidebarstatus + '.'">
   Amp Sidebar Event Testing
</p>
<button on = "tap:sidebar1">
   Show Sidebar
</button>
<amp-sidebar 
   id = "sidebar1" 
   layout = "nodisplay" 
   side = "right" 
   on = "sidebarOpen:AMP.setState({ampsidebarstatus: 'Opened'});
   sidebarClose:AMP.setState({ampsidebarstatus: 'Closed'})">
   <ul>
      <li>Nav item 1</li>
      <li>
         <a href = "#idTwo" on = "tap:idTwo.scrollTo">Nav item 2</a>
      </li>
      <li>Nav item 3</li>
      <li>
         <a href = "#idFour" on = "tap:idFour.scrollTo">Nav item 4</a>
      </li>
      <li>Nav item 5</li>
      <li>Nav item 6</li>
   </ul>
</amp-sidebar>

打印页面