أحدث البرامج التعليمية وتطوير الشبكة
 

jQuery Mobile مرشحات



عناصر تصفيتها

جميع العناصر التي لديها عنصر أكثر من طفل واحد، ويمكن أن تتم تصفيته.

كيفية إنشاء حقل البحث:

  • العنصر الذي تريد أن تكون رشوح، يجب أن تتضمن data-filter="true" السمة.
  • إنشاء <input> عنصر مع معرف المحدد وإضافة data-type="search" السمة. وهذا خلق حقل البحث الأساسي. التفاف <input> في شكل من الأشكال، وإضافة "ui-filterable" فئة إلى <form> العنصر - وهذا سوف ضبط الهامش بين حقل البحث وعنصر ترشيح.
  • ثم، تضاف data-input السمة إلى عنصر ترشيح. يجب أن تتطابق قيمته هوية من <input> العنصر.

أدناه، قمنا بإنشاء عرض القائمة للترشيح:

البحث عن العناصر في قائمة

<form class="ui-filterable">
  <input id="myFilter" data-type="search">
</form>


<ul data-role="listview" data-filter="true" data-input="#myFilter" >
  <li><a href="#">Adele</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
</ul>
انها محاولة لنفسك »

نصيحة: استخدم عنصر نائب لتحديد تلميح القصير الذي يصف القيمة المتوقعة من حقل البحث:

مثال

<input id="myFilter" data-type="search" placeholder="Search for names.." >
انها محاولة لنفسك »

تصفية مخصصة

النص داخل كل عنصر الطفل هو النص الفعلي الذي يتم استخدامه لتصفية (مثل "Adele" أو "B" لل "Billy" ). ومع ذلك، إذا كنت تريد تصفية البحث على النص تصفية مخصص بدلا من ذلك، يمكنك إضافة السمة filtertext البيانات إلى أي عنصر تابع:

مثال

<li data-filtertext="fav" ><a href="#">Adele</a></li>
انها محاولة لنفسك »

إذا كنت تستخدم data-filtertext السمة على عنصر، يتم تجاهل النص / المحتوى الأصلي لهذا عنصر معين لتصفية (في المثال أعلاه، لم تعد قادرة على البحث عن عنصر القائمة "Adele" ومنها يمكنك أن تجد فقط أديل عن طريق كتابة الكلمات الرئيسية "f, a, v أو fav ".)


المزيد من الأمثلة

تصفية قوائم لطي
كيفية تصفية مجموعة للطي من القوائم.

تصفية الجداول
كيفية تصفية الجدول.

تصفية <div> عناصر
كيفية تصفية <div> عنصر يحتوي على طفل <p> العناصر.