AMP

amp-selector

يمثل هذا المكّوِن عنصر التحكم الذي يوفر قائمة الخيارات ويتيح للمستخدِم الاختيار من بينها.

النص البرمجي المطلوب<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
التنسيقات المعتمدةالكل
أمثلةاطلّع على مثال amp-selector في الموقع "AMP بالمثال".

[جدول المحتويات]

السُلوك

مُحدِد AMP عبارة عن عنصر التحكم الذي يوفر قائمة بالخيارات ويتيح للمستخدِم اختيار أحدها أو العديد منها، علمًا بأن أنواع محتوى الخيارات لا يقتصر على النص فقط.

  • يمكن أن يحتوي amp-selector على أي عنصر عشوائي من عناصر HTML أو مكونات AMP (مثال: amp-carousel أو amp-img أو ما إلى ذلك).
  • لا يمكن أن يحتوي amp-selector على أي عناصر تحكم amp-selector مدمجة.
  • يمكن تعيين الخيارات القابلة للاختيار بإضافة السمة option إلى العنصر وتحديد قيمة للسمة (مثال: <li option='value'></li>).
  • يمكن تعيين الخيارات الموقوفة بإضافة السمة disabled إلى العنصر (مثال: <li option='d' disabled></li>).
  • يمكن تعيين الخيارات المحددة مسبقًا بإضافة السمة selected إلى العنصر (مثال: <li option='b' selected></li>).
  • لإتاحة تعدد الاختيارات، أضِف السمة multiple إلى العنصر amp-selector. يتيح العنصر amp-selector تلقائيًا اختيارًا واحدًا في المرة.
  • لإيقاف amp-selector بأكمله، أضِف السمة disabled إلى العنصر amp-selector.
  • عندما يحتوي amp-selector على السمة name ويكون amp-selector داخل العلامة form، وحدثت عملية إرسال على النموذج، يعمل amp-selector بمثابة مجموعة زر اختيار/مربع اختيار ويُرسل القيم المختارة (التي تم تعيينها للخيار) المقابلة لاسم amp-selector.

مثال:

<form id="form1" action="/" method="get" target="_blank">
  <amp-selector name="single_image_select" layout="container">
    <ul>
      <li><amp-img src="/img1.png" width="50" height="50" option="1"></amp-img></li>
      <li><amp-img src="/img2.png" width="50" height="50" option="2"></amp-img></li>
      <li option="na" selected="">لا شيء مما سبق</li>
    </ul>
  </amp-selector>
  <amp-selector name="multi_image_select" layout="container" multiple="">
    <amp-img src="/img1.png" width="50" height="50" option="1"></amp-img>
    <amp-img src="/img2.png" width="50" height="50" option="2"></amp-img>
    <amp-img src="/img3.png" width="50" height="50" option="3"></amp-img>
  </amp-selector>
  <amp-selector name="multi_image_select_1" layout="container" multiple="">
    <amp-carousel id="carousel-1" width="200" height="60" controls="">
      <amp-img src="/img1.png" width="80" height="60" option="a"></amp-img>
      <amp-img src="/img2.png" width="80" height="60" option="b" selected=""></amp-img>
      <amp-img src="/img3.png" width="80" height="60" option="c"></amp-img>
      <amp-img src="/img4.png" width="80" height="60" option="d" disabled=""></amp-img>
    </amp-carousel>
  </amp-selector>
</form>
<amp-selector name="multi_image_select_2" layout="container" multiple="" form="form1">
  <amp-carousel height="300" id="carousel-1" type="slides" width="400" controls="">
    <amp-img height="60" src="/img1.png" width="80" option="a"></amp-img>
    <amp-img height="60" src="/img2.png" width="80" option="b" selected=""></amp-img>
    <amp-img height="60" src="/img3.png" width="80" option="c"></amp-img>
    <amp-img height="60" src="/img4.png" width="80" option="d"></amp-img>
  </amp-carousel>
</amp-selector>

محو الاختيارات

لمحو جميع الاختيارات عند النقر على العنصر، عيِّن سمة الإجراء on على العنصر وحدِد المعرّف id للعنصر AMP Selector بطريقة الإجراء clear.

مثال:

<button on="tap:mySelector.clear">Clear Selection</button>
<amp-selector id="mySelector" layout="container" multiple>
  <div option>Option One</div>
  <div option>Option Two</div>
  <div option>Option Three</div>
</amp-selector>

يمكنك الاطّلاع على أمثلة توضيحية في موقع AMP بالمثال.

السمات

السمات في المكّوِن <amp-selector>

disabled وform وmultiple وnameتعمل السمات الواردة أعلاه بنفس طريقة العمل في عنصر HTML القياسي [`
keyboard-select-modeتحدد السمة keyboard-select-mode سلوك التنقل باستخدام لوحة المفاتيح للخيارات في ``.
  • none (تلقائي): يغيّر المفتاح Tab التركيز بين العناصر في ``. يجب على المستخدِم الضغط على مفتاح الإدخال أو المسافة لتغيير الاختيار. وهذا ويتم إيقاف مفاتيح الأسهم.
  • focus: ينقل المفتاح Tab التركيز إلى ``. ينتقل المستخدِم بين العناصر باستخدام مفاتيح الأسهم. ويجب الضغط على مفتاح الإدخال أو المسافة لتغيير الاختيار.
  • select: ينقل المفتاح Tab التركيز إلى ``. يتغير الاختيار مع تنقل المستخدِم بين الخيارات باستخدام مفاتيح الأسهم.

السمات في خيارات <amp-selector>

optionتشير إلى إمكانية اختيار هذا الخيار. إذا تم تحديد قيمة، يتم إرسال محتوى القيمة مع النموذج.
disabled، selectedتعمل السمات الواردة أعلاه بنفس طريقة العمل في عنصر HTML القياسي [`

الأحداث

قد تؤدي الأحداث إلى تشغيل الإجراءات على مكونات AMP الأخرى باستخدام السمة on. مثال: on="select: my-tab.show"

يمكنك قراءة المزيد عن الإجراءات والأحداث في AMP.

selectيؤدي `amp-selector` إلى تشغيل الحدث `select` عندما يحدد المستخدِم خيارًا. تعمل المحدِدات المتعددة والمحدِدات الفردية على تشغيل هذا الحدث عند اختيار خيارات أو إلغاء اختيارها. هذا ولا يؤدي النقر على الخيارات المتوقفة إلى تشغيل الحدث `select`.
  • يحتوي `event.targetOption` على قيمة السمة `option` للعنصر المختار.
  • يحتوي `event.selectedOptions` على مصفوفة قيم السمة `option` لجميع العناصر المختارة.

التحقق

اطّلع على قواعد amp-selector في مواصفات مدقق AMP.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub