Tindakan dan peristiwa di email AMP
Important: this documentation is not applicable to your currently selected format stories!
Atribut on digunakan untuk menginstal pengurus (handler) peristiwa pada elemen. Peristiwa-peristiwa yang didukung bergantung pada elemen.
Nilai untuk sintaksis adalah bahasa yang spesifik untuk domain sederhana dari formulir tersebut:
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
Lihat tabel di bawah ini untuk mengetahui deskripsi setiap bagian sintaks.
| Sintaks | Diperlukan? | Deskripsi |
|---|---|---|
eventName | ya | Ini adalah nama peristiwa yang diekspos elemen. |
targetId | ya | Ini adalah ID DOM untuk elemen tersebut, atau target khusus yang telah ditentukan sebelumnya yang ingin Anda tindak lanjuti sebagai tanggapan atas peristiwa tersebut. Di dalam contoh berikut ini, targetId adalah ID DOM dari target amp-lightbox, photo-slides. <amp-lightbox id = "photo-slides"> </amp-lightbox> <button on = "tap: photo-slides"> Tampilkan Gambar</button> |
methodName | tidak | Ini untuk elemen dengan tindakan default (standar). Ini adalah metode yang diekspos elemen target (dirujuk dengan AMP mempunyai konsep tentang tindakan default yang dapat diterapkan elemen-elemen. Jadi, saat meniadakan |
arg=value | tidak | Beberapa tindakan, jika didokumentasikan, mungkin menerima argumen. Argumen ditetapkan di dalam kurung di dalam notasi key=value. Nilai-nilai yang diterima adalah:
|
Menangani beberapa peristiwa
Anda dapat mendengarkan beberapa peristiwa pada suatu elemen dengan memisahkan peristiwa dengan tanda titik koma ;.
Contoh: on="submit-success:lightbox1;submit-error:lightbox2"
Beberapa tindakan untuk satu peristiwa
Anda dapat mengeksekusi beberapa tindakan dalam urutan untuk peristiwa yang sama dengan memisahkan tindakan-tindakan tersebut menggunakan koma ','.
Contoh: on="tap:target1.actionA,target2.actionB"
Peristiwa dan tindakan yang ditentukan secara global
AMP menentukan sebuah peristiwa tap secara global bahwa Anda dapat mendengarkan elemen HTML apa pun (termasuk elemen AMP).
AMP juga menentukan tindakan hide, show, dan toggleVisibility secara global bahwa Anda dapat memicu elemen HTML apa pun.
Sebuah elemen hanya dapat diperlihatkan jika sebelumnya disembunyikan dengan tindakan hide atau toggleVisibility, atau dengan menggunakan atribut hidden. Tindakan show tidak mendukung elemen yang disembunyikan dengan display:none CSS atau layout=nodisplay AMP.
Contohnya, yang berikut ini mungkin dilakukan di AMP:
<div id="warning-message">Warning...</div> <button on="tap:warning-message.hide">Cool, thanks!</button>
Peristiwa yang khusus untuk elemen tertentu
* - semua elemen
| Peristiwa | Deskripsi |
|---|---|
tap | Dipicu ketika elemen diklik/diketuk. |
Elemen input
| Peristiwa | Deskripsi | Elemen | Data |
|---|---|---|---|
change | Dipicu ketika nilai elemen berubah dan diterapkan. Properti data mencerminkannya dalam HTMLInputElement dan HTMLSelectElement. | input | event.min |
input[type="radio"],input[type="checkbox"]
| event.checked | ||
select | event.min | ||
input-debounced | Dipicu ketika nilai elemen berubah. Ini serupa dengan peristiwa change standar, namun hanya dipicu ketika telah lewat 300 milidetik sejak nilai input berhenti berubah. | Elemen yang memicu peristiwa input. | Sama dengan data peristiwa change. |
input-throttled | Dipicu ketika nilai elemen berubah. Ini serupa dengan peristiwa change standar, namun dipercepat untuk dipicu secara maksimal setiap 100 milidetik sementara nilai input berubah. | Elemen yang memicu peristiwa input. | Sama dengan data peristiwa change. |
amp-accordion > bagian
| Peristiwa | Deskripsi | Data |
|---|---|---|
expand | Dipicu ketika bagian akordeon meluas. | Tidak ada. |
collapse | Dipicu ketika bagian akordeon menciut. | Tidak ada. |
amp-carousel[type="slides"]
| Peristiwa | Deskripsi | Data |
|---|---|---|
slideChange | Dipicu ketika slide korsel (carousel) yang sedang aktif berubah. | // Slide number. |
amp-lightbox
| Peristiwa | Deskripsi | Data |
|---|---|---|
lightboxOpen | Dipicu ketika lightbox (bingkai terang) terlihat sepenuhnya. | Tidak ada |
lightboxClose | Dipicu ketika lightbox (bingkai terang) tertutup sepenuhnya. | Tidak ada |
amp-list
| Peristiwa | Deskripsi | Data |
|---|---|---|
fetch-error (kepercayaan rendah) | Dipicu saat pengambilan data gagal. | Tidak ada |
amp-selector
| Peristiwa | Deskripsi | Data |
|---|---|---|
select | Dipicu ketika suatu opsi dipilih atau tidak jadi dipilih. | // Target element's "option" attribute value. |
amp-sidebar
| Peristiwa | Deskripsi | Data |
|---|---|---|
sidebarOpen | Dipicu ketika bilah samping sepenuhnya terbuka setelah transisi berakhir. | Tidak ada |
sidebarClose | Dipicu ketika bilah samping sepenuhnya tertutup setelah transisi berakhir. | Tidak ada |
amp-state
| Peristiwa | Deskripsi | Data |
|---|---|---|
fetch-error (kepercayaan rendah) | Dipicu saat pengambilan data gagal. | Tidak ada |
formulir
| Peristiwa | Deskripsi | Data |
|---|---|---|
submit | Dipicu ketika formulir dikirimkan. | |
submit-success | Dipicu ketika respons pengiriman formulir berhasil. | // Response JSON. |
submit-error | Dipicu ketika respons pengiriman formulir mengalami eror. | // Response JSON. |
valid | Dipicu ketika formulir valid. | |
invalid | Dipicu ketika formulir tidak valid. |
Tindakan yang khusus untuk elemen tertentu
* (semua elemen)
| Tindakan | Deskripsi |
|---|---|
hide | Menyembunyikan elemen target. |
show | Memperlihatkan elemen target. Jika sebuah element autofocus menjadi terlihat, maka elemen tersebut akan mendapatkan fokus. |
toggleVisibility | Mengalihkan atau mengubah visibilitas elemen target. Jika sebuah element autofocus menjadi terlihat, maka elemen tersebut akan mendapatkan fokus. |
toggleClass(class=STRING, force=BOOLEAN) | Mengalihkan kelas elemen target. force bersifat opsional, dan jika ditentukan akan memastikan kelas itu hanya akan ditambahkan, tetapi tidak dihapus jika diatur sebagai true, dan hanya dihapus, tetapi tidak ditambahkan jika diatur sebagai false. |
focus | Membuat elemen target mendapatkan fokus. Untuk menghilangkan fokus, focus pada elemen lain (biasanya elemen induk). Kami sangat menyarankan agar tidak menghilangkan fokus dengan berfokus pada body/documentElement demi keperluan aksesibilitas. |
amp-accordion
| Tindakan | Deskripsi |
|---|---|
toggle(section=STRING) | Mengalihkan status expanded dan collapsed bagian amp-accordion. Jika dipanggil tanpa argumen, maka akan mengalihkan semua bagian akordeon. Picu pada bagian yang spesifik dengan menyediakan ID bagian: on="tap:myAccordion.toggle(section=id')". |
expand(section=STRING) | Memperluas bagian-bagian akordeon. Jika sebuah bagian telah diperluas, maka akan tetap luas. Jika dipanggil tanpa argumen, maka akan memperluas semua bagian akordeon. Picu pada bagian yang spesifik dengan menyediakan ID bagian: on="tap:myAccordion.expand(section='section-id')". |
collapse(section=STRING) | Menciutkan bagian-bagian akordeon. Jika sebuah bagian telah ciut, maka akan tetap ciut. Jika dipanggil tanpa argumen, maka akan menciutkan semua bagian akordeon. Picu pada bagian yang spesifik dengan menyediakan ID bagian: on="tap:myAccordion.collapse(section='section-id')". |
amp-carousel[type="slides"]
| Tindakan | Deskripsi |
|---|---|
goToSlide(index=INTEGER) | Memajukan korsel (carousel) ke indeks slide yang ditentukan. |
amp-image-lightbox
| Tindakan | Deskripsi |
|---|---|
open (default) | Membuka lightbox (bingkai terang) gambar, di mana gambar sumber menjadi pemicu tindakan. |
amp-lightbox
| Tindakan | Deskripsi |
|---|---|
open (default) | Membuka lightbox (bingkai terang). |
close | Menutup lightbox (bingkai terang). |
amp-list
| Peristiwa | Deskripsi | Data |
|---|---|---|
changeToLayoutContainer | Perbarui tata letak amp-list ke layout="CONTAINTER" untuk memungkinkan pengubahan ukuran dinamis. | |
fetch-error (kepercayaan rendah) | Dipicu saat pengambilan data gagal. | Tidak ada |
amp-selector
| Tindakan | Deskripsi |
|---|---|
clear | Mengosongkan semua pilihan dari amp-selector yang telah ditentukan. |
selectUp(delta=INTEGER) | Menaikkan pilihan sesuai nilai `delta`. `delta` default ditetapkan pada -1. Jika tidak ada opsi yang dipilih, status yang dipilih akan menjadi nilai opsi terakhir. |
selectDown(delta=INTEGER) | Menurunkan pilihan sesuai nilai `delta`. `delta` default ditetapkan pada 1. Jika tidak ada opsi yang dipilih, status yang dipilih akan menjadi nilai opsi pertama. |
toggle(index=INTEGER, value=BOOLEAN) | Mengalihkan penerapan `selected` (terpilih). Jika atribut untuk memilih tidak ada, tindakan ini akan menambahkannya. Jika atribut untuk memilih ada, tindakan ini akan menghapusnya. Anda dapat memaksa dan mempertahankan serta menambahkan atau menghapus dengan menyertakan nilai Boolean di dalam argumen `value`. Sebuah nilai `true` akan memaksa untuk menambahkan atribut `selected` dan tidak akan menghapusnya jika memang sudah ada. Sebuah nilai `false` akan menghapus atribut tersebut, tetapi tidak akan menambahkannya jika tidak ada. |
amp-sidebar
| Tindakan | Deskripsi |
|---|---|
open (default) | Membuka bilah samping (sidebar). |
close | Menutup bilah samping (sidebar). |
toggle | Mengalihkan status bilah samping (bilah samping). |
formulir
| Tindakan | Deskripsi |
|---|---|
clear | Mengosongkan nilai apa pun yang ada di dalam input formulir. |
submit | Mengirimkan formulir. |
Target spesial
Yang berikut ini adalah target yang disediakan oleh sistem AMP yang mempunyai persyaratan spesial:
Target: AMP
Target AMP disediakan oleh runtime AMP dan menerapkan tindakan tingkat tinggi yang berlaku pada seluruh dokumen.
| Tindakan | Deskripsi |
|---|---|
setState({foo: 'bar'})1
| Memerlukan amp-bind. Menggabungkan objek secara literal ke dalam status yang dapat diikat. |
1Jika digunakan dengan beberapa tindakan, tindakan selanjutnya akan menunggu setState() selesai sebelum pemanggilan. Hanya satu di antara setState() yang diizinkan per peristiwa.