ในการสร้างเว็บไซต์ที่ตอบสนองแบบไดนามิก นักพัฒนาจำเป็นต้องจัดการกับท่าทางบนมือถือ เช่นเดียวกับการบีบ การแตะ และการปัด ท่าทางเหล่านี้ได้รับการจัดการโดยภาษาการพัฒนามือถือเช่น “ กระพือปีก ' หรือ ' ตอบสนองพื้นเมือง ” และจาวาสคริปต์ การเขียนโปรแกรมเว็บอื่นไม่รองรับเหตุการณ์ประเภทนี้ โชคดี! ด้วยความช่วยเหลือของ jQuery “ เหตุการณ์สัมผัส ” ปลั๊กอิน เหตุการณ์หรือท่าทางเหล่านี้ก็สามารถจัดการได้เช่นกัน
บล็อกนี้จะแสดงกระบวนการใช้ปลั๊กอินเหตุการณ์ jQuery touch สำหรับโทรศัพท์มือถือ
วิธีใช้ปลั๊กอิน jQuery Touch Events สำหรับมือถือ
jQuery สรุปความแตกต่างระหว่างเหตุการณ์การสัมผัสและกิจกรรมมือถือเพื่อใช้ API หรือปลั๊กอินที่สอดคล้องกันเช่น “ เหตุการณ์สัมผัส '. มีหลายเหตุการณ์ที่จัดทำโดยปลั๊กอินนี้ซึ่งระบุไว้ด้านล่างในรูปแบบตาราง:
| วิปปิ้งเป็ด | เรียกใช้ฟังก์ชันเฉพาะที่ส่วนท้ายของการปัดเหนือองค์ประกอบ |
| เลื่อนเริ่มต้น | เรียกใช้ฟังก์ชันเฉพาะเมื่อเริ่มต้นการเลื่อนบนองค์ประกอบที่เลือก |
| เลื่อน | เรียกใช้ฟังก์ชันเฉพาะเมื่อสิ้นสุดการเลื่อนบนองค์ประกอบ |
| การวางแนวการเปลี่ยนแปลง | เรียกใช้ฟังก์ชันเมื่อการวางแนวของอุปกรณ์หรืออุปกรณ์เคลื่อนที่เปลี่ยนไป เช่น การย้ายแนวตั้งจากเค้าโครงแนวนอน |
ไวยากรณ์
ไวยากรณ์สำหรับเหตุการณ์การสัมผัส jQuery มีการระบุไว้ด้านล่าง:
$ ( 'นี้' ) .touchEvent ( ฟังก์ชั่น ( ) {
// รหัสของคุณ
} )
ในไวยากรณ์ข้างต้น:
-
- “ นี้ ” คือตัวเลือกซึ่งเป็นการดำเนินการในฐานะผู้เรียกการดำเนินการหรือองค์ประกอบที่เลือก
- “ สัมผัสเหตุการณ์ ” คือชื่อเหตุการณ์เฉพาะที่ใช้อยู่ ซึ่งสามารถเกิดขึ้นได้จากตารางที่กล่าวข้างต้น
- “ ฟังก์ชั่น() ” คือฟังก์ชันแบบกำหนดเองที่จะดำเนินการโดยเหตุการณ์การสัมผัสที่ให้มา
ตอนนี้ มาดูตัวอย่างบางส่วนเพื่อทำความเข้าใจเหตุการณ์การสัมผัสกันดีกว่า
ตัวอย่างที่ 1: การใช้ Tap และ DoubleTap
ในตัวอย่างนี้ “ สัมผัสเหตุการณ์ ' เหตุการณ์ ' แตะ ' และ ' แตะสองครั้ง ” จะถูกใช้เพื่อเรียกใช้หรือดำเนินการฟังก์ชันบางอย่างเหนือองค์ประกอบที่เลือก:
< html >< ศีรษะ >
< สคริปต์ src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > สคริปต์ >
< สคริปต์ src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
สคริปต์ >
ศีรษะ >
< ร่างกาย >
< h3 สไตล์ = 'สี: นักเรียนนายร้อยสีฟ้า;' > ลินุกซ์ h3 >
< ปุ่ม รหัส = 'ที' > แตะ ปุ่ม >
< ปุ่ม รหัส = 'ดีที' > แตะสองครั้ง ปุ่ม >
< พี รหัส = 'เป้า' > ตัวอย่างเหตุการณ์ DoubleTap และ Tap Touch พี >
< สคริปต์ >
$ ( '#ที' ) .แตะ ( การทำงาน ( ) {
$ ( '#เป้า' ) .ซ่อน ( ) ;
} )
$ ( '#ดีที' ) .แตะสองครั้ง ( การทำงาน ( ) {
$ ( '#เป้า' ) .แสดง ( ) ;
} )
สคริปต์ >
ร่างกาย >
html >
คำอธิบายของโค้ดข้างต้น:
-
- ประการแรก CDN “ เครือข่ายการจัดส่งเนื้อหา ” สำหรับ jQuery และ touch events จะถูกแทรกเข้าไปใน “ <หัว> ” เพื่อให้สามารถเข้าถึงได้ CDN สามารถพบได้อย่างเป็นทางการ ของ jQuery และผ่านการเยี่ยมชม cdnjs ตามลำดับ
- ถัดไป สององค์ประกอบปุ่มจะถูกสร้างขึ้นโดยมีรหัสเป็น “ ที ' และ ' dt '. นอกจากนี้ ให้สร้าง “ พี ” องค์ประกอบที่มีรหัสเป็น “ เป้า '. การดำเนินการโดยเหตุการณ์การสัมผัสจะดำเนินการในองค์ประกอบนี้
- ข้างใน ' <สคริปต์> ” เลือกองค์ประกอบที่มีรหัสเป็น “ ที ” และแนบ “ แตะ ” สัมผัสกับเหตุการณ์ด้วย เหตุการณ์นี้เลือกองค์ประกอบ html อื่นที่มีรหัสเป็น “ เป้า ” และใช้ “ ซ่อน() ” วิธีการเกี่ยวกับมัน
- นอกจากนี้ ให้เลือก “ dt ” องค์ประกอบและใช้ “ แตะสองครั้ง ” เหตุการณ์การสัมผัส และในลักษณะเดียวกันให้ใช้ “ แสดง() ” วิธีการใน “ เป้า ” องค์ประกอบรหัส
ผลลัพธ์ที่สร้างขึ้นหลังจากการคอมไพล์โค้ดแสดงไว้ด้านล่าง:
ผลลัพธ์ข้างต้นแสดงให้เห็นว่ามีการดำเนินการกับเหตุการณ์การสัมผัสแบบ 'แตะ' และ 'แตะสองครั้ง'
ตัวอย่างที่ 2: การใช้กิจกรรมการปัดและการปัดนิ้ว
ในตัวอย่างนี้ การดำเนินการของ “ ปัด ' และ ' วิปปิ้งเป็ด ” จะมีการสาธิตกิจกรรมการสัมผัส:
< สคริปต์ >$ ( '#ที' ) .ปัด ( การทำงาน ( ) {
$ ( '#เป้า' ) .ซ่อน ( ) ;
} )
$ ( '#ที' ) . ปัดเป็ด ( การทำงาน ( ) {
$ ( '#เป้า' ) .ซ่อน ( ) ;
} )
สคริปต์ >
คำอธิบายของโค้ด jQuery ข้างต้นมีดังนี้:
-
- ขั้นแรก องค์ประกอบที่เลือกจะถูกเลือกผ่านรหัส “ ที ' และ ' ปัด ” มีแนบเหตุการณ์มาด้วย เหตุการณ์นี้จะยิงฟังก์ชันและฟังก์ชันที่ยิงจะเลือกองค์ประกอบเป้าหมายผ่านรหัส “ เป้า ” และใช้ “ ซ่อน() ” เพื่อทำให้เนื้อหามองไม่เห็น
- ต่อไป “ วิปปิ้งเป็ด ” เหตุการณ์ถูกนำไปใช้กับองค์ประกอบเดียวกันและฟังก์ชันของมันถูกนำไปใช้กับ “ แสดง() ” วิธีการเหนือองค์ประกอบที่เลือกด้วยรหัสของ “ เป้า ” เพื่อทำให้เนื้อหามองเห็นได้เมื่อเหตุการณ์การปัดสิ้นสุดลง
ผลลัพธ์สำหรับโค้ดด้านบนจะถูกสร้างขึ้นเป็น:
ผลลัพธ์แสดงให้เห็นว่าเนื้อหาองค์ประกอบเป้าหมายถูกซ่อนในขณะที่ปัดและปรากฏขึ้นเมื่อเหตุการณ์การปัดสิ้นสุดลง
ตัวอย่างที่ 3: การใช้ scrollstart และ scrollend Touch Events
ในกรณีนี้ “ เลื่อนเริ่มต้น ' และ ' เลื่อน ” กิจกรรมการสัมผัสจะถูกนำไปใช้:
< สคริปต์ >$ ( '#ที' ) .scrollstart ( การทำงาน ( ) {
$ ( '#เป้า' ) .ซ่อน ( ) ;
} )
$ ( '#ที' ) .เลื่อน ( การทำงาน ( ) {
$ ( '#เป้า' ) .แสดง ( ) ;
} )
สคริปต์ >
คำอธิบายสำหรับโค้ดข้างต้นระบุไว้ดังนี้:
-
- การเปลี่ยนแปลงในตัวอย่างนี้เพียงอย่างเดียวคือการใช้ “ เลื่อนเริ่มต้น ' และ ' เลื่อน ” กิจกรรมที่จะดำเนินการ “ ซ่อน() ' และ ' แสดง() ” วิธีการบนองค์ประกอบและโค้ดที่เหลือจะยังคงเหมือนเดิมในตัวอย่างข้างต้น
- ข้อความเป้าหมายจะถูกซ่อนเมื่อเริ่มต้นหรือระหว่างการเลื่อน และจะมองเห็นได้เมื่อการเลื่อนสิ้นสุดลง
ผลลัพธ์ที่สร้างขึ้นหลังจากการคอมไพล์โค้ดข้างต้นแสดงไว้ด้านล่าง:
ผลลัพธ์แสดงให้เห็นว่าเนื้อหาองค์ประกอบถูกซ่อนอยู่ในขณะที่เลื่อน และจะมองเห็นได้เมื่อสิ้นสุดการเลื่อน
บล็อกนี้ได้อธิบายปลั๊กอินเหตุการณ์ jQuery touch สำหรับอุปกรณ์มือถือ
บทสรุป
เจคิวรี่” เหตุการณ์สัมผัส ” ปลั๊กอินสำหรับมือถือ อนุญาตให้ jQuery เพิ่มกิจกรรมที่จัดการเหตุการณ์ที่เกิดขึ้นบนมือถือระบบสัมผัสโดยเฉพาะ เช่น การปัด การแตะ การเปลี่ยนการวางแนว ฯลฯ กิจกรรมที่จัดทำโดยปลั๊กอินนี้ถูกนำไปใช้เหมือนแบบดั้งเดิม “ เมื่อคลิก ” หรืองานอื่นๆ ด้วยการใช้ปลั๊กอินนี้ นักพัฒนาสามารถใช้ฟังก์ชันบางอย่างตามการโต้ตอบของผู้ใช้กับมือถือได้อย่างง่ายดาย บล็อกนี้ได้อธิบายการเสียบเหตุการณ์ jQuery touch สำหรับอุปกรณ์เคลื่อนที่