Hành động và sự kiện trong email AMP
Important: this documentation is not applicable to your currently selected format stories!
Thuộc tính on (bật) được sử dụng để cài đặt bộ xử lý sự kiện cho các yếu tố. Các sự kiện được hỗ trợ tùy thuộc vào yếu tố.
Giá trị cho cú pháp là một ngôn ngữ đơn giản dành riêng cho lĩnh vực của biểu mẫu:
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
Xem bảng dưới đây để biết mô tả về từng phần của cú pháp.
| Cú pháp | Bắt buộc? | Mô tả |
|---|---|---|
eventName | có | Đây là tên của sự kiện được yếu tố hiển thị. |
targetId | có | Đây là DOM ID cho yếu tố, hoặc một mục tiêu đặc biệt được định nghĩa sẵn mà bạn muốn thực thi một hành động hoặc để đáp lại sự kiện. Trong ví dụ sau, targetId là DOM ID của mục tiêu amp-lightbox, photo-slides.<amp-lightbox id="photo-slides"></amp-lightbox> <button on="tap:photo-slides">Show Images</button>
|
methodName | không | Dành cho các yếu tố với hành động mặc định. Đây là phương thức được yếu tố mục tiêu (tham chiếu bởi AMP có một khái niệm về một hành động mặc định mà các yếu tố có thể triển khai. Vậy nên khi bỏ sót |
arg=value | không | Một số hành động, nếu được ghi chép, có thể chấp nhận các tham số. Các tham số được định nghĩa giữa các ngoặc đơn trong chú thích key=value. Các giá trị được chấp nhận là:
|
Xử lý nhiều sự kiện
Bạn có thể lắng nghe nhiều sự kiện trên một yếu tố bằng cách chia tách các sự kiện bằng dấu chấm phẩy ;.
Ví dụ: on="submit-success:lightbox1;submit-error:lightbox2"
Nhiều hành động cho một sự kiện
Bạn có thể thực thi nhiều hành động lần lượt cho cùng một sự kiện bằng cách chia tách các hành động với một dấu phẩy ','.
Ví dụ: on="tap:target1.actionA,target2.actionB"
Các sự kiện và hành động được định nghĩa toàn cục
AMP định nghĩa một sự kiện tap (chạm) trên toàn cục mà bạn có thể lắng nghe trên mọi yếu tố HTML (bao gồm các yếu tố AMP).
AMP cũng định nghĩa các hành động hide (ẩn), show (hiển thị) và toggleVisibility (bật/tắt hiển thị) trên toàn cục mà bạn có thể kích hoạt trên mọi yếu tố HTML.
Một yếu tố chỉ có thể được hiển thị nếu trước đó nó đã bị ẩn bởi một hành động hide hoặc toggleVisibility, hoặc bằng cách sử dụng thuộc tính hidden (ẩn). Hành động show (hiển thị) không hỗ trợ các yếu tố bị ẩn bởi display:none (hiển thị:không) của CSS hoặc layout=nodisplay (bố cục=không hiển thị) của AMP.
Ví dụ, những việc sau có thể được thực hiện trong AMP:
<div id="warning-message">Warning...</div> <button on="tap:warning-message.hide">Cool, thanks!</button>
Các sự kiện cụ thể của yếu tố
* - tất cả yếu tố
| Sự kiện | Mô tả |
|---|---|
tap | Kích hoạt khi yếu tố được nhấn/chạm vào. |
Yếu tố đầu vào
| Sự kiện | Mô tả | Yếu tố | Dữ liệu |
|---|---|---|---|
change | Kích hoạt khi giá trị của yếu tố được thay đổi và cam kết. Thuộc tính dữ liệu sao chép các thuộc tính trong HTMLInputElement và HTMLSelectElement. | input | event.min |
input[type="radio"],input[type="checkbox"]
| event.checked | ||
select | event.min | ||
input-debounced | Kích hoạt khi giá trị của yếu tố được thay đổi. Điều này tương tự như sự kiện change (thay đổi) tiêu chuẩn, nhưng chỉ kích hoạt khi 300ms đã trôi qua sau khi giá trị của dữ liệu đầu vào đã ngừng thay đổi. | Các yếu tố kích hoạt sự kiện input (nhập liệu). | Giống như dữ liệu sự kiện change (thay đổi). |
input-throttled | Kích hoạt khi giá trị của yếu tố được thay đổi. Điều này tương tự như sự kiện change (thay đổi) tiêu chuẩn, nhưng bị hạn chế chỉ kích hoạt tối đa một lần sau mỗi 100ms trong khi giá trị của dữ liệu đầu vào đang thay đổi. | Các yếu tố kích hoạt sự kiện input (nhập liệu). | Giống như dữ liệu sự kiện change (thay đổi). |
amp-accordion > phần
| Sự kiện | Mô tả | Dữ liệu |
|---|---|---|
expand | Kích hoạt khi một phần accordion được mở rộng. | Không có. |
collapse | Kích hoạt khi một phần accordion được thu hẹp. | Không có. |
amp-carousel[type="slides"]
| Sự kiện | Mô tả | Dữ liệu |
|---|---|---|
slideChange | Kích hoạt khi slide hiện tại của băng chuyền được thay đổi. | // Slide number. |
amp-lightbox
| Sự kiện | Mô tả | Dữ liệu |
|---|---|---|
lightboxOpen | Kích hoạt khi lightbox được hiển thị hoàn toàn. | Không có |
lightboxClose | Kích hoạt khi lightbox được đóng hoàn toàn. | Không có |
amp-list
| Sự kiện | Mô tả | Dữ liệu |
|---|---|---|
fetch-error(low-trust) | Kích hoạt khi truy xuất dữ liệu thất bại. | Không có |
amp-selector
| Sự kiện | Mô tả | Dữ liệu |
|---|---|---|
select | Kích hoạt khi một tùy chọn được chọn hoặc bỏ chọn. | // Target element's "option" attribute value. |
amp-sidebar
| Sự kiện | Mô tả | Dữ liệu |
|---|---|---|
sidebarOpen | Kích hoạt khi thanh bên được mở hoàn toàn sau khi quá trình chuyển tiếp kết thúc. | Không có |
sidebarClose | Kích hoạt khi thanh bên được đóng hoàn toàn sau khi quá trình chuyển tiếp kết thúc. | Không có |
amp-state
| Sự kiện | Mô tả | Dữ liệu |
|---|---|---|
fetch-error(low-trust) | Kích hoạt khi truy xuất dữ liệu thất bại. | Không có |
form
| Sự kiện | Mô tả | Dữ liệu |
|---|---|---|
submit | Kích hoạt khi biểu mẫu được gửi đi. | |
submit-success | Kích hoạt khi gửi biểu mẫu thành công. | // Response JSON. |
submit-error | Kích hoạt khi gửi biểu mẫu thất bại. | // Response JSON. |
valid | Kích hoạt khi biểu mẫu là hợp lệ. | |
invalid | Kích hoạt khi biểu mẫu là không hợp lệ. |
Các hành động dành riêng cho yếu tố
* (tất cả yếu tố)
| Hành động | Mô tả |
|---|---|
hide | Ẩn yếu tố mục tiêu. |
show | Hiển thị yếu tố mục tiêu. Nếu một yếu tố autofocus (tự động lấy tiêu điểm) được hiển thị, nó sẽ được lấy tiêu điểm. |
toggleVisibility | Bật/tắt hiển thị yếu tố mục tiêu. Nếu một yếu tố autofocus (tự động lấy tiêu điểm) được hiển thị, nó sẽ được lấy tiêu điểm. |
toggleClass(class=STRING, force=BOOLEAN) | Bật/tắt lớp của yếu tố mục tiêu. force (bắt buộc) là tùy chọn, nhưng nếu được định nghĩa, nó đảm bảo lớp này chỉ được thêm mà không bị xóa nếu đặt thành true (đúng), và chỉ bị xóa nhưng không được thêm nếu đặt thành false (sai). |
focus | Lấy tiêu điểm vào yếu tố mục tiêu. Để bỏ tiêu điểm, focus (tập trung) vào một yếu tố khác (thường là yếu tố cha). Chúng tôi đặc biệt khuyến cáo không giảm tiêu điểm bằng cách tập trung vào body/documentElement vì lý do hỗ trợ tiếp cận. |
amp-accordion
| Hành động | Mô tả |
|---|---|
toggle(section=STRING) | Bật/tắt trạng thái expanded (mở rộng) và collapsed (thu hẹp) của các phần amp-accordion. Khi được gọi mà không có tham số, nó sẽ bật/tắt tất cả các phần của accordion. Kích hoạt trên một phần cụ thể bằng cách cung cấp ID phần: on="tap:myAccordion.toggle(section=
|
expand(section=STRING) | Mở rộng các phần của accordion. Nếu một phần đã được mở rộng rồi, nó vẫn sẽ được mở rộng. Khi được gọi mà không có tham số, nó sẽ mở rộng tất cả các phần của accordion. Kích hoạt trên một phần cụ thể bằng cách cung cấp ID phần: on="tap:myAccordion.expand(section=
|
collapse(section=STRING) | Thu hẹp các phần của accordion. Nếu một phần đã được thu hẹp rồi, nó vẫn sẽ được thu hẹp. Khi được gọi mà không có tham số, nó sẽ thu hẹp tất cả các phần của accordion. Kích hoạt trên một phần cụ thể bằng cách cung cấp ID phần: on="tap:myAccordion.collapse(section=
|
amp-carousel[type="slides"]
| Hành động | Mô tả |
|---|---|
goToSlide(index=INTEGER) | Chuyển băng chuyền đến một thứ tự slide cụ thể. |
amp-image-lightbox
| Hành động | Mô tả |
|---|---|
open (default) | Mở lightbox ảnh với ảnh nguồn là ảnh đã kích hoạt hành động này. |
amp-lightbox
| Hành động | Mô tả |
|---|---|
open (default) | Mở lightbox. |
close | Đóng lightbox. |
amp-list
| Sự kiện | Mô tả | Dữ liệu |
|---|---|---|
changeToLayoutContainer | Cập nhật bố cục của amp-list thành layout="CONTAINTER" để cho phép đổi kích cỡ năng động. | |
fetch-error(low-trust) | Kích hoạt khi truy xuất dữ liệu thất bại. | Không có |
amp-selector
| Hành động | Mô tả |
|---|---|
clear | Xóa tất cả các lựa chọn từ một amp-selector đã quy định. |
selectUp(delta=INTEGER) | Di chuyển lựa chọn về phía trước theo giá trị của `delta`. `delta` mặc định được đặt là -1. Nếu không có tùy chọn nào được chọn, trạng thái được chọn sẽ trở thành giá trị của tùy chọn gần nhất. |
selectDown(delta=INTEGER) | Di chuyển lựa chọn về phía sau theo giá trị của `delta`. `delta` mặc định được đặt là 1. Nếu không có tùy chọn nào được chọn, trạng thái được chọn sẽ trở thành giá trị của tùy chọn đầu tiên. |
toggle(index=INTEGER, value=BOOLEAN) | Bật/tắt mục `selected` (được chọn). Nếu không có thuộc tính được chọn, hành động này sẽ bổ sung nó. Nếu có thuộc tính được chọn, hành động này sẽ xóa nó. Bạn có thể bắt buộc và duy trì thêm hoặc xóa bằng cách thêm một giá trị boolean trong tham số `value` (giá trị). Một giá trị `true` (đúng) sẽ bắt buộc thêm thuộc tính `selected` (được chọn) và không xóa nó nếu nó đã được chọn. Một giá trị `false` (sai) sẽ xóa thuộc tính, và không thêm nó nếu nó không được chọn. |
amp-sidebar
| Hành động | Mô tả |
|---|---|
open (default) | Mở thanh bên. |
close | Đóng thanh bên. |
toggle | Bật/tắt trạng thái của thanh bên. |
form
| Hành động | Mô tả |
|---|---|
clear | Xóa mọi giá trị dữ liệu đầu vào của biểu mẫu. |
submit | Gửi biểu mẫu. |
Mục tiêu đặc biệt
Sau đây là các mục tiêu được cung cấp bởi hệ thống AMP với các yêu cầu đặc biệt:
Mục tiêu: AMP
Mục tiêu AMP được cung cấp bởi thời gian chạy AMP và triển khai các hành động ở cấp độ cao nhất, áp dụng cho toàn tài liệu.
| Hành động | Mô tả |
|---|---|
setState({foo: 'bar'})1
| Yêu cầu amp-bind. Hợp nhất một object literal vào một trạng thái ràng buộc được. |
1Khi được sử dụng với nhiều hành động, các hành động sau đó sẽ chờ setState() hoàn thành trước khi kích hoạt. Chỉ một setState() được cho phép cho mỗi sự kiện.