قسمت سی و پنجم bootstrap : نحوه ی استفاده از فیلتر در بوت استرپ 4

خانه » مقالات اموزشی » css » بوت استرپ » قسمت سی و پنجم bootstrap : نحوه ی استفاده از فیلتر در بوت استرپ 4
Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت سی و پنجم bootstrap : نحوه ی استفاده از فیلتر در بوت استرپ 4

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

Calendar-amico (2)

تاریخ انتشار:

2021-08-03

Work time-rafiki

زمان مطالعه:

5 دقیقه

یکی از انتخاب های مهم در فرآیندهای طراحی سایت ، قراردادن قسمتی برای جستجو یا فیلترکردن نتایج برای کاربران است.

فرض کنید شما قصد طراحی یک صرافی آنلاین دارید ، تمامی رمز ارزها را در این لیست قراردادید. با طراحی کردن یک باکس برای فیلتر می توانید نتایج دلخواه کاربران را با جستجو کردن در اختیارشان قرار دهید.

فیلتر در بوت استرپ 4

به صورت مستقیم بوت استرپ 4 المانی برای فیلتر ندارد ، برای اینکه فیلتر بسازیم کافی است از jQuery برای ساخت المان فیلتر یا جستجو استفاده کنیم.

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

مجدد به مثال صرافی توجه کنید. تمامی رمز ارزها در جدول قرار دارند ، برای فیلتر کردن باید ردیف هایی که با مقادر وارد شده هماهنگ است نمایش داده شود.

قدم اول باید از jQuery برای ساخت یک حلقه ی جستجو استفاده کنیم. این حلقه مقدار وارد شده را دریافت می کند و تا انتهای جدول پیمایش می کند ، اگر هر ردیف مقدار برابر با مقدار داده شده را داشته باشد نمایش داده می شود.

با استفاده از مد toggle مقادیری که با مقدار وارد شده همخوانی ندارند را مخفی می کنیم . ( برای مخفی کردن display:none اضافه می شود . )

همچنین از مد toLowerCase() برای تبدیل کردن تمامی حروف ، به حروف کوچک استفاده می کنیم . ( برای مثال تفاوتی بین جستجو کردن “john” ، “John” و “JOHN” نیست.)

برای درک بهتر به قطعه کد زیر توجه کنید :

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

جستجوی موارد موجود در یک لیست ( بدون حساسیت به کوچک یا بزرگ بودن حروف ):

فیلتر برای همه المان ها

جستجوی متن در داخل یک تگ div ( بدون حساسیت به کوچک یا بزرگ بودن حروف ):

پیشنهاد می کنم برای دریافت اطلاعات بیشتر و دیدن مثال های بیشتر به سایت getbootstrap مراجعه فرمایید.

همچنین از طریق دوره رایگان بوت استرپ 4 هم می توانید سایر قسمت های آموزش بوت استرپ را ببینید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

دیدگاهتان را بنویسید