فیلترها (پیشرفته)

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳


فیلترهای بوت استرپ

بوت استرپ مؤلفه‌ای که فیلتر را اعمال کند ندارد. با این حال می‌توان از jQuery برای فیلتر / جستجوی عنصرها استفاده کرد.[۱]

فیلتر کردن جدول ها

یک جستجوی Case-insensitive (عدم حساسیت به بزرگی و کوچکی حروف) را برای آیتم‌های جدول انجام می‌دهد:

مثال

برای جستجوی نام کوچک، نام خانوادگی یا ایمیل در جدول متنی در فیلد ورودی تایپ کنید:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


jQuery

 1 <script>
 2 $(document).ready(function(){
 3   $("#myInput").on("keyup", function() {
 4     var value = $(this).val().toLowerCase();
 5     $("#myTable tr").filter(function() {
 6       $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
 7     });
 8   });
 9 });
10 </script>

مشاهدهٔ نتیجه


توضیح مثال: از jQuery برای گشتن در هر ردیف جدول استفاده می‌شود تا وجود هرگونه متن مطابق با عبارت تایپ شده در فیلد ورودی بررسی شود. متد toggle() ردیفی را پنهان می‌کند (display:none) که با عبارت جستجو مطابقت ندارد. از متد toLowerCase() برای تبدیل متن به حروف کوچک استفاده می‌شود که جستجو را insensitive می‌کند (جستجوی “john”، “John” و حتی “JOHN” را ممکن می‌سازد).

فیلتر کردن لیست ها

جستجوی case-insensitive را در میان آیتم‌های لیست انجام می‌دهد:

مثال

برای جستجوی آیتم‌ها عبارتی را در فیلد ورودی تایپ کنید:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.

مشاهدهٔ نتیجه


فیلتر کردن منوهای کرکره ای

یک جستجوی case-insensitive بر روی آیتم‌های درون منوی کرکره ای انجام می‌دهد:

مثال

منوی کرکره ای را باز کرده و برای جستجو در میان آیتم‌های آن، عبارتی را در فیلد ورودی تایپ کنید:Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.

مشاهدهٔ نتیجه


فیلتر کردن هر چیزی

یک جستجوی Case-insensitive برروی متن دورن یک عنصر div انجام می‌دهد:

مثال

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.

مشاهدهٔ نتیجه


منابع آموزشی