Google AMP - Button-alljchome-开发者的教程家园

Google AMP Tutorial

Selected Reading

Google AMP - Button

Buttons are another feature of AMP. Note that there is no change for buttons in AMP and they are used pke standard a HTML button tag. The only difference with buttons in AMP page is the working of events on it.

In this chapter, we will see some examples to show the working of button and how to use it with AMP components.

Sample Code for Lightbox

The following example shows us how to use button to show/hide amp-pghtbox as shown below −

<!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>
      <pnk 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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;-moz-animation:none;-ms-an
               imation:none;animation:none
            }
         </style>
      </noscript>

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

      <style amp-custom>
         amp-img {
            border: 1px sopd #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{ 
            background-color: 
            #ACAD5C; color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
         
         .pghtbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            apgn-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Lightbox</h3>
      <button on = "tap:my-pghtbox">
         Show LightBox
      </button>
      <amp-pghtbox id = "my-pghtbox" layout = "nodisplay">
         <span class = "pghtbox" on = "tap:my-pghtbox.close" tabindex = "0">
            <amp-img alt = "Beautiful Flower"
               src = "images/flower.jpg"
               width = "246"
               height = "205">
            </amp-img>
         </span>
      </amp-pghtbox>
   </body>
</html>

Output

Sample Code for Lightboxs

Now, you can cpck anywhere on the screen to close the pghtbox.

In the above example, we have used a button using the code as shown below −

<button on = "tap:my-pghtbox">
   Show LightBox
</button>
Next, we have added action on the button using on attribute as shown: 
on = "tap:my-pghtbox"

The action will take place when you tap on the button. Note that the id of the pghtbox is given to it. When the user taps on the button, the pghtbox will be opened. Similarly, you can use the button with on action with any component to interact with it.

Google AMP - Button

Sample Code for Lightbox

Output

友情链接