AMP
AR
English Deutsch Français Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

الإجراءات والأحداث

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

تغطي هذه الوثائق الإجراءات والأحداث الخاصة بمواقع الويب والقصص والإعلانات الخاصة بـ AMP. اقرأ الإجراءات والأحداث في بريد 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 أو من خلال استخدام سمة hidden. حيث إن إجراء 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 القياسي، لكن تتم عملية التقييد من أجل التشغيل مرة واحدة على الأكثر كل 100 مللي ثانية أثناء تغيير قيمة الإدخال. العناصر التي تشغِّل حدث input. مماثل لبيانات حدث change.

amp-accordion > قسم

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

amp-carousel[type="slides"]

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

amp-lightbox

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

amp-list

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

amp-selector

الحدث الوصف البيانات
select التشغيل عند تحديد أو إلغاء تحديد خيار. 
// Target element's "option" attribute value.
event.targetOption
// Array of "option" attribute values of all selected elements.
event.selectedOptions

amp-sidebar

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

amp-state

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

amp-video, amp-youtube