ใช้งาน isotope javascript สำหรับการกรองข้อมูล filtering

ใช้งาน isotope javascript สำหรับการกรองข้อมูล filtering



ใช้งาน isotope javascript สำหรับการกรองข้อมูล filtering

isotope เป็น javascript library ใช้สำหรับคัดกรองข้อมูลให้แสดงผลเฉพาะข้อมูลที่เราต้องการ ยกตัวอย่างเช่น หากเราทำเว็บไซต์เกี่ยวกับอาหาร ภายในเว็บไซต์อาจจะมีอาหารอยู่หลากหลายประเภท อาหารคาว อาหารหวาน ของทานเล่น อารทะเล เป็นต้น



เราสามารถใช้ความสามารถของ isotope ในการกรองข้อมูลอาหารในขั้นตอนของการค้นหาได้ ตัวอย่างเช่น ถ้าเราต้องการให้แสดงเฉพาะอาหารประเภทของทานเล่น ระบบของ isotope จะสามารถ filter ข้อมูล รายละเอียด รูปภาพ ราคา และแสดงผลเฉพาะข้อมูลที่ตรงกับที่เราเลือกได้แบบไม่ต้องเปลี่ยนหน้า


ตัวอย่างการกรองข้อมูลด้วย isotope filtering


isotope_javascript_filtering

วิธีใช้งาน isotope

  • 1. ดาวน์โหลดและเรียกใช้งานไฟล์ isotope library ที่เว็บไซต์ https://isotope.metafizzy.co

  • 2. สร้างไฟล์ html select option ทำตัวเลือกสำหรับกรองข้อมูล

    จากโค๊ดตัวอย่างด้านบนจะเห็นว่า เรามีหมวดหมู่ของอาหารอยู่ 3 ประเภท ข้อมูลที่จะนำไปใช้สำหรับกรองข้อมูลจะอยู่ในส่วนของ attribute data-filter ข้อมูลจะเป็นชื่อคลาส เช่น .dessert คือขนมหวาน แต่ถ้าเลือกทั้งหมดข้อมูลที่ส่งไปจะเป็นเครื่องหมาย * ( ดอกจัน )

  • 3. สร้างไฟล์ html สำหรับแสดงไอเทมอาหาร วิธีการคือให้นำข้อมูล data-filter ที่เราได้เขียนไว้ในข้อ 2 มาใส่กำกับไปในคลาสที่ครอบไอเทมนั้น ๆ ที่มีข้อมูลตรงกัน ตัวอย่างเช่น

  • 4. เขียน javascript เพื่อใช้งาน isotope filtering

นอกจากการ filtering ข้อมูลแล้ว isotope ยังสามารถจัดเรียงข้อมูล sorting การจัดรูปแบบของ html element ( layout ) โดยใช้ javascript ในการจัดการ

กระทู้ใกล้เคียง

ตัดข้อความภาษาไทยใน php ไม่ให้มีเครื่องหมายสี่เหลี... ตัดข้อความภาษาไทยใน php ไม่ให้มีเครื่องหมายสี่เหลี่ยม ตัดข้อความภาษาไทยใน php ไม่ให้มีเครื่องหมายสี่เหลี่ยม ในภาษา PHP จะมีคำสั่งอยู่คำสั่งหนึ่ง...
สอน Laravel 5 : ใช้งาน Controller ร่วมกับ Router... สอน Laravel : ใช้งาน Controller ร่วมกับ Router โดยทั่วไปแล้ว Controller คือหัวใจหลักของการทำงานใน PHP MVC Framework เป็นส่วนที่ทำหน้าที่เชื่อมโยง ...
PHP Codeigniter เน้นใช้งาน : ตอน 2 รับส่งค่าระหว่า... PHP Codeigniter เน้นใช้งาน : ตอน 2 รับส่งค่าระหว่าง views และ controllers จากบทความที่แล้วเราได้ทำความเข้าใจเบื้องต้น ตั้งแต่การดาวน์โหลดไฟล์ จนถึง...
PHP Codeigniter เน้นใช้งาน : ตอน 1 ดาวน์โหลดและติด... PHP Codeigniter : ตอน 1 ดาวน์โหลดและติดตั้ง codeinginter PHP Codeigniter เป็น MVC framework ที่ได้รับความนิยมและใช้ในงานพัฒนาเว็บไซต์กันอย่างแพร่หล...