آموزش Isotope.js: فیلتر پیشرفته

مقدمه Introduction

• خوش آمدی Welcome

• نحوه استفاده از پرونده های تمرینی How to use the exercise files

1. Isotope.js: مقدمه 1. Isotope.js: An Introduction

• Isotope.js چیست؟ What is Isotope.js?

• در این دوره ما قصد داریم چه کنیم؟ What are we going to build in this course?

2. مبانی ایزوتوپ 2. Isotope Basics

• نمای کلی از یک گالری تصاویر اولیه Overview of a basic image gallery

• ایزوتوپ و جی کوئری را بارگیری و نصب کنید Download and install Isotope and jQuery

• ایزوتوپ را آغاز کنید Initialize Isotope

• حالت های طرح بندی را پیکربندی کنید Configure layout modes

• ناودان ، عرض و پارامترهای دیگر Gutter, widths, and other parameters

• نمایش مطالب در اندازه های مختلف Display various-sized content

• طرح بندی ایزوتوپ را پاسخگو کنید Make Isotope layouts responsive

• تأخیر رنگ را بارگیری کنید Delay paint until images are loaded

3. فیلتر و مرتب سازی 3. Filtering and Sorting

• چگونه Isotope.js محتوا را فیلتر و مرتب می کند؟ How does Isotope.js filter and sort content?

• یک مکانیزم فیلتر ساده ایجاد کنید Create a simple filter mechanism

• مبانی مرتب سازی ایزوتوپ Isotope sorting basics

• یک مکانیزم مرتب سازی ساده ایجاد کنید Create a simple sort mechanism

• برای فیلترهای ترکیبی برنامه ریزی کنید Lay a plan for combination filters

• یک فیلتر ترکیبی بسازید Build a combination filter

4- فیلتر و مرتب سازی بر اساس URL هاش 4. Filtering and Sorting Based on the URL Hash

• برای فیلتر و مرتب سازی ایزوتوپ از هش URL استفاده کنید Use the URL hash to filter and sort Isotope

• ایجاد هش URL Create URL hashes

• عملکرد شروع به تغییر هش Trigger function on hash change

• هش URL فعلی را دریافت کنید Get the current URL hash

• فیلتر هش را به ایزوتوپ منتقل کنید Pass the hash filter to Isotope

• دکمه فعال فعلی را برجسته کنید Highlight the current active button

• برنامه ای را برای فیلترهای ترکیبی مبتنی بر هش قرار دهید Lay a plan for hash-based combination filters

• اجرای کد فیلتر هش ترکیبی Run-through of the combination hash filter code

5- فیلتر و مرتب سازی در وردپرس 5. Filtering and Sorting in WordPress

• ایزوتوپ و CMS Isotope and CMS

• Isotope.js را در وردپرس آغاز کنید Initialize Isotope.js in WordPress

• نام کلاس را بر اساس اصطلاحات طبقه بندی سفارشی اضافه کنید Add class names based on custom taxonomy terms

• با استفاده از کادرهای انتخاب ، یک فهرست فیلتر ایجاد کنید Create a filter menu using checkboxes

• ایزوتوپ را بر اساس انتخاب کادر انتخاب فیلتر کنید Filter Isotope based on checkbox selections

• انتخاب کادر انتخاب را پاک کنید Clear checkbox selections

نتیجه Conclusion

• در ادامه با Isotope.js Going further with Isotope.js