Google AMP - Nút
Các nút là một tính năng khác của AMP. Lưu ý rằng không có thay đổi nào đối với các nút trong AMP và chúng được sử dụng giống như thẻ nút HTML tiêu chuẩn. Sự khác biệt duy nhất với các nút trong trang AMP là hoạt động của các sự kiện trên đó.
Trong chương này, chúng ta sẽ xem một số ví dụ để hiển thị hoạt động của nút và cách sử dụng nó với các thành phần AMP.
Mã mẫu cho hộp đèn
Ví dụ sau cho chúng ta thấy cách sử dụng nút để hiển thị / ẩn amp-lightbox như hình dưới đây:
<!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-an
imation:none;animation:none
}
</style>
</noscript>
<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;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Lightbox</h3>
<button on = "tap:my-lightbox">
Show LightBox
</button>
<amp-lightbox id = "my-lightbox" layout = "nodisplay">
<div class = "lightbox" on = "tap:my-lightbox.close" tabindex = "0">
<amp-img alt = "Beautiful Flower"
src = "images/flower.jpg"
width = "246"
height = "205">
</amp-img>
</div>
</amp-lightbox>
</body>
</html>Đầu ra
Bây giờ, bạn có thể nhấp vào bất kỳ đâu trên màn hình để đóng hộp đèn.
Trong ví dụ trên, chúng tôi đã sử dụng một nút bằng mã như hình dưới đây -
<button on = "tap:my-lightbox">
Show LightBox
</button>
Next, we have added action on the button using on attribute as shown:
on = "tap:my-lightbox"Hành động sẽ diễn ra khi bạn chạm vào nút. Lưu ý rằng id của hộp đèn được cấp cho nó. Khi người dùng nhấn vào nút, hộp đèn sẽ được mở. Tương tự, bạn có thể sử dụng nút đang hoạt động với bất kỳ thành phần nào để tương tác với nó.