۲۴
مرداد

جلسه ۳۳ : فیلترهای Bootstrap 4

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

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

فیلترهای Bootstrap 4

filter های Bootstrap 4 ، ابزاری مناسب، برای ایجاد فیلترهای مختلف در لیست های طولانی است.

فیلتر جداول

با استفاده از یک کادر جستجو در جداول دارای اطلاعات زیاد، به راحتی می توانید از filter های Bootstrap 4 برای جستجوی سریع، استفاده کنید.

فیلتر جداول

فیلتر جداول-آزمایش

کد مثال فوق:

مثال :

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

$(document).ready(function(){

$("#myInput").on("keyup", function() {

var value = $(this).val().toLowerCase();

$("#myTable tr").filter(function() {

$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

});

</script>

تشریح کد فوق:

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

فیلتر لیست ها

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

فیلتر لیست ها

فیلتر لیست ها – آزمایش

فیلتر هر محتوایی

فیلترینگ بوت استرپ ۴، نه تنها برای جستجوی متن ها، بلکه برای جستجوی هر عنصر نیز، کارایی دارد.

فیلتر هر محتوایی

فیلتر هر محتوایی – آزمایش

کلام آخر

در این آموزش، بطور کلی با کاربردهای متنوع و گسترده ی filter های Bootstrap 4 در صفحات وب، آشنا شدید. با استفاده از این فیلترها، به راحتی می توانید جستجوی محتویات مطالب وب سایت خود را بسیار سریع کنید. امیدواریم که از مباحث آموزش آشنایی با فیلترهای Bootstrap 4 بخوبی استفاده کرده باشید.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۳۳ : فیلترهای Bootstrap 4

مقدمه

فیلترهای Bootstrap 4

فیلتر جداول

فیلتر لیست ها

فیلتر هر محتوایی

کلام آخر

لیست مطالب دوره

آموزش بوت استرپ 4

سیستم شبکه بندی در Bootstrap 4

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ