Google AMP - ปุ่ม
ปุ่มเป็นอีกคุณสมบัติหนึ่งของ AMP โปรดทราบว่าปุ่มต่างๆใน AMP ไม่มีการเปลี่ยนแปลงและจะใช้เหมือนกับแท็กปุ่ม HTML มาตรฐาน ความแตกต่างเพียงอย่างเดียวของปุ่มในหน้า AMP คือการทำงานของเหตุการณ์ในหน้านั้น
ในบทนี้เราจะเห็นตัวอย่างบางส่วนเพื่อแสดงการทำงานของปุ่มและวิธีใช้กับคอมโพเนนต์ AMP
โค้ดตัวอย่างสำหรับไลท์บ็อกซ์
ตัวอย่างต่อไปนี้แสดงวิธีใช้ปุ่มเพื่อแสดง / ซ่อนแอมป์ไลท์บ็อกซ์ดังที่แสดงด้านล่าง -
<!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>เอาต์พุต
ตอนนี้คุณสามารถคลิกที่ใดก็ได้บนหน้าจอเพื่อปิดไลท์บ็อกซ์
ในตัวอย่างข้างต้นเราได้ใช้ปุ่มโดยใช้รหัสดังที่แสดงด้านล่าง -
<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"การดำเนินการจะเกิดขึ้นเมื่อคุณแตะที่ปุ่ม โปรดทราบว่ามีการกำหนดรหัสของไลท์บ็อกซ์ เมื่อผู้ใช้แตะที่ปุ่มไลท์บ็อกซ์จะเปิดขึ้น ในทำนองเดียวกันคุณสามารถใช้ปุ่มกับการดำเนินการกับส่วนประกอบใด ๆ เพื่อโต้ตอบกับมัน