ใช้งาน isotope javascript สำหรับการกรองข้อมูล filtering
ใช้งาน isotope javascript สำหรับการกรองข้อมูล filtering
isotope เป็น javascript library ใช้สำหรับคัดกรองข้อมูลให้แสดงผลเฉพาะข้อมูลที่เราต้องการ ยกตัวอย่างเช่น หากเราทำเว็บไซต์เกี่ยวกับอาหาร ภายในเว็บไซต์อาจจะมีอาหารอยู่หลากหลายประเภท อาหารคาว อาหารหวาน ของทานเล่น อารทะเล เป็นต้น
เราสามารถใช้ความสามารถของ isotope ในการกรองข้อมูลอาหารในขั้นตอนของการค้นหาได้ ตัวอย่างเช่น ถ้าเราต้องการให้แสดงเฉพาะอาหารประเภทของทานเล่น ระบบของ isotope จะสามารถ filter ข้อมูล รายละเอียด รูปภาพ ราคา และแสดงผลเฉพาะข้อมูลที่ตรงกับที่เราเลือกได้แบบไม่ต้องเปลี่ยนหน้า
ตัวอย่างการกรองข้อมูลด้วย isotope filtering
วิธีใช้งาน isotope
- 1. ดาวน์โหลดและเรียกใช้งานไฟล์ isotope library ที่เว็บไซต์ https://isotope.metafizzy.co
<script type="text/javascript" src="js/isotope/isotope.pkgd.min.js"></script>
-
2. สร้างไฟล์ html select option ทำตัวเลือกสำหรับกรองข้อมูล
<select id="isotope_category"> <option data-filter="*">ทั้งหมด</option> <option data-filter=".dessert">ขนมหวาน</option> <option data-filter=".snack">ของทานเล่น</option> <option data-filter=".dinner">อาหารเย็น</option> </select>
จากโค๊ดตัวอย่างด้านบนจะเห็นว่า เรามีหมวดหมู่ของอาหารอยู่ 3 ประเภท ข้อมูลที่จะนำไปใช้สำหรับกรองข้อมูลจะอยู่ในส่วนของ attribute data-filter ข้อมูลจะเป็นชื่อคลาส เช่น .dessert คือขนมหวาน แต่ถ้าเลือกทั้งหมดข้อมูลที่ส่งไปจะเป็นเครื่องหมาย * ( ดอกจัน )
-
3. สร้างไฟล์ html สำหรับแสดงไอเทมอาหาร วิธีการคือให้นำข้อมูล data-filter ที่เราได้เขียนไว้ในข้อ 2 มาใส่กำกับไปในคลาสที่ครอบไอเทมนั้น ๆ ที่มีข้อมูลตรงกัน ตัวอย่างเช่น
<ul class="isotope_container"> // isotope_container คือคลาสหลักที่จะนำไปเขียนเขียนใน js <li class="element-item dessert">กล้วยเชื่อม</li> // element-item คือคลาสที่กำหนดไว้ให้สามารถ filter ได้ <li class="element-item dessert">ฝอยทอง</li> <li class="element-item dessert">ทองหยิบ</li> <li class="element-item dinner">ต้มยำ</li> <li class="element-item dinner">แดงส้มชะอมไข่</li> <li class="element-item snack">มันฝรั่งทอด</li> </ul>
-
4. เขียน javascript เพื่อใช้งาน isotope filtering
var $isotope_container = $('.isotope_container').isotope({ // กำหนด container ที่ครอบไอเทมทั้งหมดอยู่ itemSelector: '.element-item' // กำหนด element class ที่จะให้สามารถ filter ได้ }); $('#isotope_category').on('change', function() { // จับ event change ของ select option var selected = $(this).find('option:selected'); // ตรวจสอบว่าเลือกไปที่หมวดหมู่อาหารอะไร var filterValue = selected.attr('data-filter'); // เก็บข้อมูล attribute data-filter $isotope_container.isotope({ filter: filterValue }); // ใช้คำสั่ง filter ของ isotope });
นอกจากการ filtering ข้อมูลแล้ว isotope ยังสามารถจัดเรียงข้อมูล sorting การจัดรูปแบบของ html element ( layout ) โดยใช้ javascript ในการจัดการ