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

<h2>ใช้งาน isotope javascript สำหรับการกรองข้อมูล filtering<&sol;h2>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>ใช้งาน isotope javascript สำหรับการกรองข้อมูล filtering<&sol;strong><&sol;p>&NewLine;<p>isotope เป็น javascript library ใช้สำหรับคัดกรองข้อมูลให้แสดงผลเฉพาะข้อมูลที่เราต้องการ ยกตัวอย่างเช่น หากเราทำเว็บไซต์เกี่ยวกับอาหาร ภายในเว็บไซต์อาจจะมีอาหารอยู่หลากหลายประเภท อาหารคาว อาหารหวาน ของทานเล่น อารทะเล เป็นต้น <&excl;--more--><&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;เราสามารถใช้ความสามารถของ isotope ในการกรองข้อมูลอาหารในขั้นตอนของการค้นหาได้ ตัวอย่างเช่น ถ้าเราต้องการให้แสดงเฉพาะอาหารประเภทของทานเล่น ระบบของ isotope จะสามารถ filter ข้อมูล รายละเอียด รูปภาพ ราคา และแสดงผลเฉพาะข้อมูลที่ตรงกับที่เราเลือกได้แบบไม่ต้องเปลี่ยนหน้า<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<b>ตัวอย่างการกรองข้อมูลด้วย isotope filtering<&sol;b><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img width&equals;"600" src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;08&sol;isotope&lowbar;javascript&lowbar;filtering&period;gif" alt&equals;"isotope&lowbar;javascript&lowbar;filtering" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>วิธีใช้งาน isotope<&sol;h4>&NewLine;<ul>&NewLine;<li>1&period; ดาวน์โหลดและเรียกใช้งานไฟล์ isotope library ที่เว็บไซต์ <a href&equals;"https&colon;&sol;&sol;isotope&period;metafizzy&period;co" target&equals;"&lowbar;blank">https&colon;&sol;&sol;isotope&period;metafizzy&period;co<&sol;a>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;script type&equals;"text&sol;javascript" src&equals;"js&sol;isotope&sol;isotope&period;pkgd&period;min&period;js"&gt&semi;&lt&semi;&sol;script&gt&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>&NewLine;2&period; สร้างไฟล์ html select option ทำตัวเลือกสำหรับกรองข้อมูล<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;select id&equals;"isotope&lowbar;category"&gt&semi; &NewLine; &lt&semi;option data-filter&equals;"&ast;"&gt&semi;ทั้งหมด&lt&semi;&sol;option&gt&semi; &NewLine; &lt&semi;option data-filter&equals;"&period;dessert"&gt&semi;ขนมหวาน&lt&semi;&sol;option&gt&semi; &NewLine; &lt&semi;option data-filter&equals;"&period;snack"&gt&semi;ของทานเล่น&lt&semi;&sol;option&gt&semi; &NewLine; &lt&semi;option data-filter&equals;"&period;dinner"&gt&semi;อาหารเย็น&lt&semi;&sol;option&gt&semi; &NewLine;&lt&semi;&sol;select&gt&semi;<&sol;pre>&NewLine;<p>จากโค๊ดตัวอย่างด้านบนจะเห็นว่า เรามีหมวดหมู่ของอาหารอยู่ 3 ประเภท ข้อมูลที่จะนำไปใช้สำหรับกรองข้อมูลจะอยู่ในส่วนของ attribute data-filter ข้อมูลจะเป็นชื่อคลาส เช่น &period;dessert คือขนมหวาน แต่ถ้าเลือกทั้งหมดข้อมูลที่ส่งไปจะเป็นเครื่องหมาย &ast; &lpar; ดอกจัน &rpar;&NewLine;<&sol;li>&NewLine;<li>&NewLine;3&period; สร้างไฟล์ html สำหรับแสดงไอเทมอาหาร วิธีการคือให้นำข้อมูล data-filter ที่เราได้เขียนไว้ในข้อ 2 มาใส่กำกับไปในคลาสที่ครอบไอเทมนั้น ๆ ที่มีข้อมูลตรงกัน ตัวอย่างเช่น<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;ul class&equals;"isotope&lowbar;container"&gt&semi; &sol;&sol; isotope&lowbar;container คือคลาสหลักที่จะนำไปเขียนเขียนใน js &NewLine; &lt&semi;li class&equals;"element-item dessert"&gt&semi;กล้วยเชื่อม&lt&semi;&sol;li&gt&semi; &sol;&sol; element-item คือคลาสที่กำหนดไว้ให้สามารถ filter ได้ &NewLine; &lt&semi;li class&equals;"element-item dessert"&gt&semi;ฝอยทอง&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li class&equals;"element-item dessert"&gt&semi;ทองหยิบ&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li class&equals;"element-item dinner"&gt&semi;ต้มยำ&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li class&equals;"element-item dinner"&gt&semi;แดงส้มชะอมไข่&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li class&equals;"element-item snack"&gt&semi;มันฝรั่งทอด&lt&semi;&sol;li&gt&semi; &NewLine;&lt&semi;&sol;ul&gt&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>&NewLine;4&period; เขียน javascript เพื่อใช้งาน isotope filtering<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >var &dollar;isotope&lowbar;container &equals; &dollar;&lpar;'&period;isotope&lowbar;container'&rpar;&period;isotope&lpar;&lbrace; &sol;&sol; กำหนด container ที่ครอบไอเทมทั้งหมดอยู่ &NewLine; itemSelector&colon; '&period;element-item' &sol;&sol; กำหนด element class ที่จะให้สามารถ filter ได้ &NewLine;&rcub;&rpar;&semi; &NewLine; &NewLine;&dollar;&lpar;'&num;isotope&lowbar;category'&rpar;&period;on&lpar;'change'&comma; function&lpar;&rpar; &lbrace; &sol;&sol; จับ event change ของ select option &NewLine; var selected &equals; &dollar;&lpar;this&rpar;&period;find&lpar;'option&colon;selected'&rpar;&semi; &sol;&sol; ตรวจสอบว่าเลือกไปที่หมวดหมู่อาหารอะไร &NewLine; var filterValue &equals; selected&period;attr&lpar;'data-filter'&rpar;&semi; &sol;&sol; เก็บข้อมูล attribute data-filter &NewLine; &dollar;isotope&lowbar;container&period;isotope&lpar;&lbrace; filter&colon; filterValue &rcub;&rpar;&semi; &sol;&sol; ใช้คำสั่ง filter ของ isotope &NewLine;&rcub;&rpar;&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p>นอกจากการ filtering ข้อมูลแล้ว isotope ยังสามารถจัดเรียงข้อมูล sorting การจัดรูปแบบของ html element &lpar; layout &rpar; โดยใช้ javascript ในการจัดการ<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;