AMP

الإجراءات والأحداث في بريد AMP الإلكتروني

Important: this documentation is not applicable to your currently selected format websites!

يغطي هذا المستند الإجراءات والأحداث في تنسيق بريد AMP الإلكتروني، اقرأ الإجراءات والأحداث لمواقع ويب AMP وقصصها وإعلاناتها.

يتم استخدام السمة on لتثبيت معالجات الحدث في العناصر. يتم دعم تلك الأحداث في العنصر.

تُعد قيمة بناء الجملة لغة نموذجية بسيطة خاصة بالمجال:

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

انظر الجدول أدناه للحصول على توصيفات كل جزء من بناء الجملة.

بناء الجملة مطلوب؟ الوصف
eventName نعم اسم الحدث الذي يظهره العنصر.
targetId نعم هذا هو معرّف نموذج كائن المستند للعنصر، أو هدف خاص محدد مسبقًا تريد تنفيذ إجراء عليه ردًا على الحدث. في المثال التالي، targetId هو معرف نموذج كائن المستند للهدف amp-lightbox،photo-slides.
<amp-lightbox id = "photo-slides"> </amp-lightbox>
<button on = "tap: photo-slides">Show Images</button>
methodName لا هذا للعناصر التي تتضمن إجراءات افتراضية.

وهذه هي الطريقة التي يقوم بها العنصر الهدف (مشار إليه من قبل targetId) بإظهاره وترغب في تنفيذه عند تشغيل الحدث.

وتتضمن AMP مفهومًا للإجراء الافتراضي الذي يمكن للعناصر تنفيذه. لذا عند حذف methodName سيقوم AMP بتنفيذ الطريقة الافتراضية.

arg=value لا قد تقبل بعض الإجراءات الوسيطات، إذا كانت موثَّقة. ويتم تحديد الوسيطات بين هلالين في ترقيم key=value. وتكون القيم المقبولة عبارة عن:
  • سلاسل بسيطة من دون قوسين: simple-value
  • سلاسل بين قوسين: "string value" أو 'string value'
  • قيم ثنائية: true أو false
  • أرقام: 11 أو 1.1
  • إشارة بناء الجملة بنقطة إلى بيانات الحدث: event.someDataVariableName

معالجة أحداث متعددة

يمكنك الاستماع إلى أحداث متعددة في عنصر من خلال فصل الأحداث بفاصلة منقوطة ;.

مثال: on="submit-success:lightbox1;submit-error:lightbox2"

إجراءات متعددة لحدث واحد

يمكنك تنفيذ الإجراءات بتسلسل للحدث نفسه من خلال فصل الإجراءات بفاصلة "،".

مثال: on="tap:target1.actionA,target2.actionB"

الأحداث والإجراءات المحددة عالميًا

يحدد AMP حدث tap عالميًا بحيث يمكنك الاستماع إلى أحد عناصر HTML (بما في ذلك عناصر AMP).

كما أن AMP يحدد أيضًا إجراءات hide، وshow وtoggleVisibility عالميًا التي يمكنك تشغيلها في أي عنصر HTML.

يمكن إظهار عنصر إذا كان مخفيًا مسبقًا عن طريق الإجراء hide أو toggleVisibility أو من خلال استخدام سمة مخفية. حيث إن إجراء show لا يدعم العناصر المخفية عن طريق CSS display:none أو layout=nodisplay الخاصة بـ AMP.

على سبيل المثال، ما يلي ممكن في AMP:

<div id="warning-message">Warning...</div>

<button on="tap:warning-message.hide">Cool, thanks!</button>

أحداث محددة بالعنصر

* - كل العناصر

الحدث الوصف
tap التشغيل عند النقر فوق/الضغط على العنصر

عناصر الإدخال

الحدث الوصف العناصر البيانات
change التشغيل عند تغيير قيمة العنصر وتنفيذها.

وتعكس خصائص البيانات تلك الأشياء في HTMLInputElement وHTMLSelectElement.

input
event.min
event.max
event.value
event.valueAsNumber
input[type="radio"],
input[type="checkbox"]
event.checked
select
event.min
event.max
event.value
input-debounced التشغيل عند تغيير قيمة العنصر. وهذا مماثل لحدث change القياسي، لكنه يقوم بعملية التشغيل فقط عند مرور 300 مللي ثانية بعد توقف تغيير قيمة الإدخال. العناصر التي تشغِّل حدث input. مماثل لبيانات حدث change.
input-throttled التشغيل عند تغيير قيمة العنصر. وهذا مماثل لحدث change القياسي، لكن تتم عملية التقييد من أجل التشغيل مرة واحدة على الأكثر كل 300 مللي ثانية أثناء تغيير قيمة الإدخال. العناصر التي تشغِّل حدث input. مماثل لبيانات حدث change.

amp-accordion > قسم

الحدث الوصف البيانات
expand التشغيل عن تمديد قسم الأكوروديون. لا يوجد.
collapse التشغيل عند طي قسم الأكوروديون. لا يوجد.

amp-carousel[type="slides"]

الحدث الوصف البيانات
slideChange التشغيل عند تغيير شريحة المكتبة الحالية.
// رقم الشريحة.
event.index

amp-lightbox

الحدث الوصف البيانات
lightboxOpen التشغيل عندما يكون lightbox مرئيًا بالكامل. لا يوجد
lightboxClose التشغيل عدما يكون lightbox مغلقًا بالكامل. لا يوجد

amp-list

الحدث الوصف البيانات
fetch-error(انخفاض مستوى الثقة) التشغيل عند فشل إحضار البيانات. لا يوجد

amp-selector

الحدث الوصف البيانات
select التشغيل عند تحديد أو إلغاء تحديد خيار.
\\ قيمة سمة "الخيار" الخاصة بالعنصر الهدف. الحدث. صفيفة {code0}event.targetOption{/code0}
الخاصة بقيم سمة "الخيار" لكل العناصر المحددة. {code2}event.selectedOptions{/code2}

amp-sidebar

الحدث الوصف البيانات
sidebarOpen التشغيل عندما يكون الشريط الجانبي مفتوح بالكامل بعد انتهاء النقل. لا يوجد
sidebarClose التشغيل عندما يكون الشريط الجانبي مغلق بالكامل بعد انتهاء النقل. لا يوجد

amp-state

الحدث الوصف البيانات
fetch-error(انخفاض مستوى الثقة) التشغيل عند فشل إحضار البيانات. لا يوجد

النموذج

الحدث الوصف البيانات
submit التشغيل عند إرسال النموذج.
submit-success Fired when the form submission response is success.
// استجابة JSON.
event.response
submit-error التشغيل عند وجود خطأ في استجابة إرسال النموذج.
// استجابة JSON.
event.response
valid التشغيل عندما يكون النموذج صالحًا.
invalid التشغيل عندما يكون النموذج غير صالح.

الإجراءات المحددة بالعنصر

* (كل العناصر)

الإجراء الوصف
hide إخفاء العنصر الهدف.
show إظهار العنصر الهدف، إذا أصبح عنصر autofocus مرئيًا كنتيجة لذلك، فإنه يكتسب التركيز.
toggleVisibility تبديل رؤية العنص الهدف. إذا أصبح عنصر autofocus مرئيًا كنتيجة لذلك، فإنه يكتسب التركيز.
toggleClass(class=STRING, force=BOOLEAN) تبديل فئة العنصر الهدف. حيث إن force اختياري، وفي حالة التحديد؛ يضمن إضافة الفئة فقط لكن من دون إزالتها في حالة التعيين إلى true، والإزالة فقط من دون إضافة في حالة التعيين إلى false.
focus التسبب في إكساب العنصر الهدف للتركيز. لخسارة التركيز focus على عنصر آخر (عنصر أصل). إننا ننصح بشدة بعدفقدان التركيز على body/documentElement لأسباب تتعلق بإمكانية الوصول.

amp-accordion

الإجراء الوصف
toggle(section=STRING) تبديل الحالات expanded وcollapsed الخاصة بالأقسام amp-accordion. عند الاستدعاء من دون وسيطات، يقوم بتدبيل كل الأقسام القابلة للطي. قم بتشغيل قسم معين من خلال توفير معرِّف القسم: on="tap:myAccordion.toggle(section=
expand(section=STRING) توسيع الأقسام الخاصة بالأكورديون. إذا تم توسيع القسم بالفعل، فسيظل موسعًا. وعندما يتم استدعاؤه بدون وسيطات، فإنه يقوم بتسويع كل أقسام الأكورديون. قم بتشغيل قسم معين من خلال توفير معرِّف القسم: on="tap:myAccordion.expand(section='section-id')".
collapse(section=STRING) طي أقسام الأكورديون. إذا كان القسم مطويًا بالفعل، فإنه يظل مطويًا. وعندما يتم استدعاؤه بدون وسيطات، فإنه يقوم بطي كل أقسام الأكورديون. قم بتشغيل قسم معين من خلال توفير معرِّف القسم: on="tap:myAccordion.collapse(section=

amp-carousel[type="slides"]

الإجراء الوصف
goToSlide(index=INTEGER) تقدم المكتبة إلى فهرس شرائح محدد.

amp-image-lightbox

الإجراء الوصف
open (default) فتح lightbox للصورة مع كون الصورة المصدر هي التي أدت إلى تشغيل الإجراء.

amp-lightbox

الإجراء الوصف
open (default) فتح lightbox.
close إغلاق lightbox.

amp-list

الحدث الوصف البيانات
changeToLayoutContainer تحديث مخطط amp-list إلى layout="CONTAINTER" للسماح بتغيير الحجم الديناميكي.
fetch-error(انخفاض مستوى الثقة) التشغيل عند فشل إحضار البيانات. لا يوجد

amp-selector

الإجراء الوصف
clear إزالة كل التحديدات من amp-selector محددة.
selectUp(delta=INTEGER) لنقل التحديد إلى أعلى حسب قيمة "دلتا". إذ يتم تعيين قيمة "دلتا" الافتراضية إلى -1. إذا لم يتم تحديد أي خيارات، فإن الحالة المحددة ستصبح قيمة الخيار الأخير.
selectDown(delta=INTEGER) لنقل التحديد إلى أسفل حسب قيمة "دلتا". إذ يتم تعيين قيمة "دلتا" الافتراضية إلى 1. إذا لم يتم تحديد أي خيارات، فإن الحالة المحددة ستصبح قيمة الخيار الأخير.
toggle(index=INTEGER, value=BOOLEAN) تبديل التطبيق الخاص "بالمحدد". إذا كانت سمة التحديد غير موجودة، فإن هذا الإجراء يضيفها. وإذا كانت سمة التحديد موجودة، فإن هذا الإجراء يزيلها. ويمكنك فرض إضافة أو إزالة والاحتفاظ بها عن طريق تضمين قيمة منطقية في وسيطة "القيمة". وستفرض قيمة "صحيح" إضافة السمة "المحددة" وعدم إزالتها إذا كانت موجودة بالفعل. وستؤدي القيمة "خطأ" إلى إزالة السمة، ولكن لن تضيفها في حالة عدم وجودها.

amp-sidebar

الإجراء الوصف
open (default) فتح الشريط الجانبي.
close إغلاق الشريط الجانبي.
toggle تبديل حالة الشريط الجانبي.

النموذج

الإجراء الوصف
clear إزالة كل القيم في إدخالات النموذج.
submit إرسال النموذج.

الأهداف الخاصة

فيما يلي أهداف يوفرها نظام AMP لها متطلبات خاصة:

الهدف: AMP

يتم توفير هدف AMP عن طريق وقت تشغيل AMP وإجراءات تنفيذ عالية المستوى من شأنها تطبيق المستند بأكمله.

الإجراء الوصف
setState({foo: 'bar'})1

يتطلب amp-bind.

دمج ثابت كائن في الحالة القابلة للربط.

1 عند الاستخدام مع إجراءات متعددة، ستنتظر الإجراءات اللاحقة حتى يكتمل setState() قبل الاستدعاء. يُسمح فقط باستخدام setState() واحد لكل حدث.