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 القياسي <select> element.
keyboard-select-mode تحدد السمة keyboard-select-mode سلوك التنقل باستخدام لوحة المفاتيح للخيارات في <amp-selector>.
  • none (تلقائي): يغيّر المفتاح Tab التركيز بين العناصر في <amp-selector>. يجب على المستخدِم الضغط على مفتاح الإدخال أو المسافة لتغيير الاختيار. وهذا ويتم إيقاف مفاتيح الأسهم.
  • focus: ينقل المفتاح Tab التركيز إلى <amp-selector>. ينتقل المستخدِم بين العناصر باستخدام مفاتيح الأسهم. ويجب الضغط على مفتاح الإدخال أو المسافة لتغيير الاختيار.
  • select: ينقل المفتاح Tab التركيز إلى <amp-selector>. يتغير الاختيار مع تنقل المستخدِم بين الخيارات باستخدام مفاتيح الأسهم.

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

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

الأحداث

قد تؤدي الأحداث إلى تشغيل الإجراءات على مكونات 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