آموزش دکمه در گوگل AMP

4 سال پیش

امتیاز دهید post

آموزش دکمه در گوگل AMP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش دکمه در گوگل AMP خواهیم پرداخت.

دکمه ها از دیگر ویژگی های AMP است. توجه داشته باشید که هیچ تغییری برای دکمه ها در AMP وجود ندارد و از آنها مانند تگ دکمه HTML استفاده می شود. تنها تفاوت دکمه ها در صفحه AMP کار با رویدادها روی آن است.

در این درس، چند نمونه برای نشان دادن نحوه کار دکمه و نحوه استفاده از آن با اجزای AMP خواهیم دید.

کد نمونه برای لایت باکس

مثال زیر نحوه استفاده از دکمه برای نشان دادن / پنهان کردن amp-lightbox را نشان می دهد همانطور که در زیر نشان داده شده است –

&lt;!doctype html&gt;
&lt;html amp lang = "en"&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;script async src = "https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt;
      &lt;title&gt;Google AMP - Amp Lightbox&lt;/title&gt;
      &lt;link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"&gt;
      
      &lt;meta name = "viewport" content ="width = device-width,minimum-scale = 1,initial-scale = 1"&gt;

      &lt;style amp-boilerplate&gt;
         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}}
      &lt;/style&gt;
      &lt;noscript&gt;
         &lt;style amp-boilerplate&gt;
            body{
               -webkit-animation:none;-moz-animation:none;-ms-an
               imation:none;animation:none
            }
         &lt;/style&gt;
      &lt;/noscript&gt;

      &lt;script async custom-element = "amp-lightbox" 
         src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"&gt;
      &lt;/script&gt;

      &lt;style amp-custom&gt;
         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;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h3&gt;Google AMP - Amp Lightbox&lt;/h3&gt;
      &lt;button on = "tap:my-lightbox"&gt;
         Show LightBox
      &lt;/button&gt;
      &lt;amp-lightbox id = "my-lightbox" layout = "nodisplay"&gt;
         &lt;div class = "lightbox" on = "tap:my-lightbox.close" tabindex = "0"&gt;
            &lt;amp-img alt = "Beautiful Flower"
               src = "images/flower.jpg"
               width = "246"
               height = "205"&gt;
            &lt;/amp-img&gt;
         &lt;/div&gt;
      &lt;/amp-lightbox&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Google AMP - Amp Lightbox</title>

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>

body{

-webkit-animation:none;-moz-animation:none;-ms-an

imation:none;animation:none

}

</style>

</noscript>

src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">

</script>

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>

Show LightBox

</button>

<amp-lightbox id = "my-lightbox" layout = "nodisplay">

<amp-img alt = "Beautiful Flower"

src = "images/flower.jpg"

width = "246"

height = "205">

</amp-img>

</div>

</amp-lightbox>

</body>

</html>

خروجی

اکنون می توانید روی هر قسمت از صفحه کلیک کنید تا لایت باکس بسته شود.

در مثال بالا ، ما از یک دکمه با استفاده از کد استفاده کرده ایم ، همانطور که در زیر نشان داده شده است –

&lt;button on = "tap:my-lightbox"&gt;
   Show LightBox
&lt;/button&gt;
Next, we have added action on the button using on attribute as shown: 
on = "tap:my-lightbox"

Show LightBox

</button>

Next, we have added action on the button using on attribute as shown:

on = "tap:my-lightbox"

وقتی روی دکمه ضربه بزنید، این عمل انجام خواهد شد. توجه داشته باشید که شناسه لایت باکس به آن داده شده است. وقتی کاربر روی دکمه ضربه بزند لایت باکس باز می شود. به همین ترتیب ، می توانید از دکمه فعال با هر مولفه برای تعامل با آن استفاده کنید.

منبع.

لیست جلسات قبل آموزش گوگل AMP

امتیاز دهید post

برچسب ها : آموزش برنامه نویسی موبایل آموزش گوگل AMP

نویسنده مطلب saber

آموزش دکمه در گوگل AMP

آموزش دکمه در گوگل AMP

کد نمونه برای لایت باکس

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

بدون دیدگاه

آموزش دکمه در گوگل AMP

کد نمونه برای لایت باکس

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه