الإجراءات والأحداث في بريد 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

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

amp-list

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

amp-selector

الحدث الوصف البيانات

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

select

التشغيل عند تحديد أو إلغاء تحديد خيار.

\\ قيمة سمة "الخيار" الخاصة بالعنصر الهدف. الحدث. صفيفة {code0}event.targetOption{/code0}
 الخاصة بقيم سمة "الخيار" لكل العناصر المحددة. {code2}event.selectedOptions{/code2}

الحدث	الوصف	البيانات
`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)`	تقدم المكتبة إلى فهرس شرائح محدد.

الإجراء	الوصف
`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'})`¹	يتطلب amp-bind. دمج ثابت كائن في الحالة القابلة للربط.

setState({foo: 'bar'})¹

يتطلب amp-bind.

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

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

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

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

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

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

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

* - كل العناصر

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

amp-accordion > قسم

amp-carousel[type="slides"]

amp-lightbox

amp-list

amp-selector

amp-sidebar

amp-state

النموذج

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

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

amp-accordion

amp-carousel[type="slides"]

amp-image-lightbox

amp-lightbox

amp-list

amp-selector

amp-sidebar

النموذج

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

الهدف: AMP