1. Home
  2. กรอง jQuery มือถือ

บทช่วยสอน กรอง jQuery มือถือ ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ คุณสามารถกรององค์ประกอบ,องค์ประกอบค้นหารายการ,ตัวอย่าง,กรองแบบกำหนดเอง,ตัวอย่างเพิ่มเติม,

กรอง jQuery มือถือ

คุณสามารถกรององค์ประกอบ

องค์ประกอบทั้งหมดหากหนึ่งหรือมากกว่าองค์ประกอบย่อยสามารถกรอง

วิธีการสร้างช่องค้นหา:

  • คุณต้องการกรององค์ประกอบต้องใช้ข้อมูลกรองแอตทริบิวต์ = "true"
  • สร้าง <input> และระบุ ID รวมทั้งข้อมูลประเภทในองค์ประกอบ = "ค้นหา" แอตทริบิวต์ นี้จะสร้างช่องค้นหาขั้นพื้นฐาน ก <input> จะอยู่ในรูปแบบรูปแบบ <form> องค์ประกอบที่ใช้ "UI กรอง" ชั้น - ชั้นนี้จะมีการปรับนอกช่องค้นหาและอยู่ห่างจากไส้กรอง
  • จากนั้นเพิ่มแอตทริบิวต์ข้อมูลป้อนสำหรับไส้กรอง ค่านี้จะต้องมี ID <input> องค์ประกอบ

ต่อไปเราจะสร้างรายการกรอง:

องค์ประกอบค้นหารายการ

<แบบฟอร์มคลา = "UI กรอง ">
<input id = "myFilter" ข้อมูล ประเภท = "ค้นหา">
</ form>

<ul ข้อมูลบทบาท = "ListView " data-กรอง = "true" ข้อมูลอินพุต = "# myFilter">
<li> <a href="#"> Adele </a> </ li>
<li> <a href="#"> บิลลี่ </a> </ li>
<li> <a href="#"> Calvin </a> </ li>
</ ul>

ลอง»

เคล็ดลับ: คุณสามารถใช้แอตทริบิวต์ตัวยึดในช่องค้นหาเพื่อตั้งค่าข้อความ:

ตัวอย่าง

<input id = "myFilter" ข้อมูล ประเภท = "ค้นหา" ยึด = " ตามค้นหาชื่อ th ">

ลอง»

กรองแบบกำหนดเอง

แทรกลงในข้อความโดยทั่วไปของรายการแต่ละรายการคือการใช้เป็นข้อความตัวกรอง (เช่นสอดคล้องกับ "อเดล" หรือ "B" สอดคล้องกับ "บิลลี่") แต่ถ้าคุณต้องการที่จะระบุตัวกรองข้อความที่กำหนดเองคุณจะต้องใช้แอตทริบิวต์ข้อมูล filtertext ในองค์ประกอบของเด็ก:

ตัวอย่าง

<li ข้อมูล filtertext = "ชอบ "> <a href="#"> Adele </a> </ li>

ลอง»
หมายเหตุ ถ้าคุณใช้แอตทริบิวต์ข้อมูล filtertext ในองค์ประกอบขององค์ประกอบเนื้อหาแหล่งที่มาของข้อความจะถูกละเว้นเมื่อกรองแล้วถ้าคุณต้องมองหารายชื่อของรายการ "อเดล" ที่ต้องใช้คำหลักเป็น: F, A, V หรือ ชอบ
ตัวอย่าง

ตัวอย่างเพิ่มเติม

กรองรายการพับ
วิธีพับรายการตัวกรอง

กรองตาราง
วิธีการกรองเนื้อหาตาราง

ตัวกรอง <div>
วิธีการกรองเด็ก <div> มี <p> องค์ประกอบ

บทแนะนำยอดนิยม

Contact US

กรอง jQuery มือถือ
10/30