คำแนะนำเครื่องมือที่มีประโยชน์และปลั๊กอิน jQuery

คำแนะนำเครื่องมือเป็นองค์ประกอบส่วนต่อประสานกราฟิกกับผู้ใช้ทั่วไป ใช้ร่วมกับเคอร์เซอร์ ซึ่งมักจะเป็นตัวชี้เมาส์ ผู้ใช้วางเคอร์เซอร์เหนือรายการโดยไม่ต้องคลิก และคำแนะนำเครื่องมืออาจปรากฏขึ้น — “กล่องโฮเวอร์” ขนาดเล็กที่มีข้อมูลเกี่ยวกับรายการที่ถูกวางเมาส์ไว้เหนือ

ฉันได้รวบรวมบทช่วยสอนและ jQuery Plugins for Tooltips บางส่วน

1. TinyTips – ปลั๊กอิน jQuery น้ำหนักเบาสำหรับคำแนะนำเครื่องมือ

TinyTips เป็นปลั๊กอิน jQuery ที่มีน้ำหนักเบามาก ซึ่งให้ความสามารถในการเพิ่มคำแนะนำเครื่องมือให้กับองค์ประกอบแทบทุกอย่างบนหน้า จัดทำเอกสารอย่างละเอียดและเป็นมิตรกับนักออกแบบ

2. การแท็กรูปภาพสไตล์ Flickr โดยใช้ jQuery

jQuery Photo Tagger มีโค้ดประมาณ 1,000 บรรทัด ดังนั้น คุณสามารถตรวจสอบหน้าโครงการหรือลองใช้การสาธิตออนไลน์ด้วยตัวคุณเอง โปรดทราบว่าคุณต้องกดปุ่ม CTRL ค้างไว้เมื่อคลิกเมาส์เพื่อสร้างฮอตสปอต

สาธิต | ดาวน์โหลด

3. TipTip Custom Tooltip jQuery Plugin พร้อม Zero Images

TipTip ใช้แอตทริบิวต์ชื่อเช่นเดียวกับคำแนะนำเครื่องมือเบราว์เซอร์ดั้งเดิม อย่างไรก็ตาม ชื่อจะถูกคัดลอกแล้วลบออกจากองค์ประกอบเมื่อใช้ TipTip เพื่อไม่ให้แสดงคำแนะนำเครื่องมือเบราว์เซอร์
TipTip สร้างองค์ประกอบป๊อปอัปทั้งหมดเพียงชุดเดียว แทนที่จะสร้างองค์ประกอบป๊อปอัปหนึ่งชุดสำหรับแต่ละองค์ประกอบโดยใช้ TipTip ซึ่งจะช่วยเร่งความเร็วและลดเวลาในการประมวลผล องค์ประกอบที่สร้างขึ้นเป็นองค์ประกอบ div ทั้งหมดและต่อท้ายองค์ประกอบเนื้อหา

4. วิธีสร้างคำอธิบายประกอบภาพใหม่ด้วย CSS3

ZURB ได้สอนเราถึงวิธีสร้างคำอธิบายประกอบภาพใหม่ การแก้ปัญหาไม่ซับซ้อนเกินไปในทางเทคนิค ด้วย Notable พวกเขาได้นำแนวคิดเรื่องการลดลงอย่างสง่างามมาใช้ พวกเขาใช้ประโยชน์จากเทคนิค CSS ใหม่ที่ลดระดับลงอย่างสมบูรณ์ในเบราว์เซอร์รุ่นเก่า

การสาธิต

5. แสดงลิงค์ของคุณเป็นรายการดรอปดาวน์ด้วย Pluralink

Pluralink เป็นปลั๊กอินจาวาสคริปต์ที่น่าทึ่งในการจัดเรียงหลายลิงก์ในข้อความของคุณ

6. เอฟเฟกต์โฮเวอร์ระดับสีเทาพร้อม CSS & jQuery

Greyscale Hover Effect ด้วย CSS & jQuery อาศัย CSS Sprites และ jQuery สองสามบรรทัด แต่ต้องมีการจัดเตรียมเล็กน้อยก่อนจึงจะสามารถใช้งานได้ ไม่แนะนำสำหรับโครงการขนาดใหญ่และอาจดีที่สุดสำหรับการแสดงผลงาน

7. มองให้ใกล้ขึ้นด้วย AnythingZoomer jQuery Plugin

คุณมีพื้นที่เล็กๆ คุณเลื่อนเมาส์ไปที่มัน พื้นที่ปรากฏขึ้นเพื่อให้คุณซูมเข้าไปใกล้ขึ้น นี่คือปลั๊กอิน jQuery ที่ทำ ฉันจะไม่บอกคุณว่าคุณควรใช้มันเพื่ออะไรหรืออธิบายสถานการณ์กรณีใช้งานอย่างละเอียด ความคิดสร้างสรรค์ของคุณสามารถช่วยคุณได้

การสาธิต

8. สร้างคำแนะนำเครื่องมือที่มีเนื้อหาสมบูรณ์ด้วย JSON และ jQuery

บทช่วยสอนนี้จะสาธิตวิธีสร้างคำแนะนำเครื่องมือที่ขับเคลื่อนโดย jQuery โดยมีข้อมูลที่ดึงมาจากอาร์เรย์ JSON

การสาธิต

9. แทนที่คำแนะนำเครื่องมือเริ่มต้นของคุณด้วย Pretty (mb)Tooltip

(mb) Tooltip เป็นคำแนะนำเครื่องมือที่สวยงามสำหรับหน้าเว็บของคุณใน jQuery

ดาวน์โหลด

10. Captify แสดงคำบรรยายภาพสวย ๆ ปรากฏบนโรลโอเวอร์

Captify เป็นปลั๊กอินสำหรับ jQuery ที่เขียนโดย Brian Reavis เพื่อแสดงคำบรรยายภาพที่เรียบง่ายและสวยงามซึ่งปรากฏเมื่อวางเมาส์เหนือ ได้รับการทดสอบบน Firefox, Chrome, Safari และ Internet Explorer ที่น่าสงสาร Captify ได้รับแรงบันดาลใจจาก ImageCaptions ซึ่งเป็นปลั๊กอิน jQuery อีกตัวสำหรับแสดงคำอธิบายภาพเช่นนี้

11. ดูตัวอย่างรูปภาพด้วย imgPreview jQuery Plugin

Peter Higgins ได้สร้าง Dojo Zoomer แบ่งออกเป็น 3 แผง เมื่อวางเมาส์เหนือรูปภาพบนแผงด้านซ้าย แผงด้านขวาจะแสดงส่วนที่ครอบตัดของรูปภาพแบบไดนามิก เพื่อให้คุณสามารถโฟกัสที่ส่วนของรูปภาพหลักที่คุณสนใจได้อย่างชัดเจน

12. jQuery Javascript Image Magnifier ภายใต้ GPL

JQZoom เป็นโปรแกรมขยายรูปภาพจาวาสคริปต์ที่สร้างขึ้นที่ด้านบนสุดของเฟรมเวิร์ก jQuery javascript ยอดนิยม jQzoom เป็นสคริปต์ที่ยอดเยี่ยมและใช้งานง่ายมากในการขยายสิ่งที่คุณต้องการ

13 คำแนะนำเครื่องมือโปร่งใสอย่างง่ายด้วย jQuery และ CSS

คำแนะนำเครื่องมือ CSS เป็นที่นิยมอย่างมากในการออกแบบเว็บสมัยใหม่ และตรงกันข้ามกับความเชื่อที่นิยมสร้างได้ง่ายมาก โดยเฉพาะอย่างยิ่งกับเฟรมเวิร์กจาวาสคริปต์ยอดนิยมตัวใดตัวหนึ่ง

การสาธิต

14. Magic Toolbox – Javascript และ Flash Image Zoom Tools

Magic Toolbox ได้สร้างเครื่องมือซูมภาพจาวาสคริปต์ที่น่าทึ่ง 2 รายการ (เมจิกซูมและเมจิกขยาย) Magic Zoom เป็นเครื่องมือซูม JavaScript เป็นวิธีที่ดีที่สุดในการแสดงภาพในรายละเอียดที่เหลือเชื่อ

15. Prototip 2 – สร้างคำแนะนำเครื่องมือที่สวยงามได้อย่างง่ายดาย

Prototip ช่วยให้คุณสร้างทั้งคำแนะนำเครื่องมือที่ง่ายและซับซ้อนได้อย่างง่ายดายโดยใช้เฟรมเวิร์กจาวาสคริปต์ต้นแบบ

การสาธิต

16. คำแนะนำเครื่องมือที่ง่ายที่สุดและการแสดงตัวอย่างรูปภาพโดยใช้ jQuery

คำแนะนำเครื่องมือที่ง่ายที่สุดและการแสดงตัวอย่างรูปภาพเป็นหนึ่งในป๊อปอัปที่คล้ายกับคำแนะนำเครื่องมือที่ปรากฏขึ้นเมื่อคุณเลื่อนลิงก์หรือภาพขนาดย่อ

การสาธิต

17. เคล็ดลับเครื่องมือ Coda Style Popup Bubble พร้อม jQuery

Coda เป็นหนึ่งในเครื่องมือพัฒนาเว็บใหม่สำหรับ Mac และเป็นที่นิยมในหมู่นักออกแบบและนักพัฒนา

18. Taggify ขอบเขตรูปภาพที่คลิกได้แสดงคำแนะนำเครื่องมือป๊อปอัป

Taggify คือวิดเจ็ตเว็บที่ช่วยให้บล็อกเกอร์และผู้เผยแพร่สามารถปรับปรุงไซต์ของตนได้โดยเพิ่มคำแนะนำเครื่องมือรูปภาพที่เชื่อมโยงกับข้อกำหนดของรูปภาพบางรูป
การสาธิต

19. เคล็ดลับเครื่องมือ Bubble ที่ไม่สร้างความรำคาญด้วย Javascript และ CSS

Bubble Tooltips เป็นวิธีที่ง่ายในการเพิ่ม (ผ่านทาง CSS และ javascript เล็กน้อย) คำแนะนำเครื่องมือแฟนซีด้วยรูปทรงบอลลูนในหน้าเว็บใดๆ

การสาธิต

20. Fade In และ Out Tooltips for Prototype and Scriptaculous

CoolTips เป็นเทคนิคการแทนที่คำแนะนำเครื่องมือเว็บเบราว์เซอร์ JavaScript ที่ไม่สร้างความรำคาญ
CoolTips ใช้เพื่อแทนที่คำแนะนำเครื่องมือเว็บเบราว์เซอร์ทั่วไป คำแนะนำเครื่องมือได้รับเนื้อหาของแอตทริบิวต์ชื่อ ดังนั้นจึงไม่สร้างความรำคาญอย่างเต็มที่ CoolTips เป็นคลาส OO ที่ใช้เฟรมเวิร์ก Prototype JS และ script.aculo.us

21. เคล็ดลับเครื่องมือที่โปร่งใสและซีดจาง

Sweet Titles Fading Tooptips ไม่ได้มาจาก NICE Titles และไม่ได้พยายามปรับปรุงความพยายามแก้ไขของ Dunstan และแน่นอนว่าไม่ได้คัดลอกมาจากสคริปต์จัดการเหตุการณ์ตัวจัดการเหตุการณ์จาก Dynamic Drive

การสาธิต

22. Prototip เคล็ดลับเครื่องมือคุณลักษณะส่วนใหญ่สำหรับ Prototype

Prototip ช่วยให้คุณสร้างทั้งคำแนะนำเครื่องมือที่ง่ายและซับซ้อนได้อย่างง่ายดายโดยใช้เฟรมเวิร์กจาวาสคริปต์ต้นแบบ หากคุณใช้ Scriptaculous คุณสามารถเพิ่มเอฟเฟกต์ดีๆ ให้กับมันได้

การสาธิต

23. คำแนะนำเครื่องมือน้ำหนักเบาของ BoxOver DHTML/Javascript

BoxOver ใช้จาวาสคริปต์ / DHTML เพื่อแสดงคำแนะนำเครื่องมือบนเว็บไซต์ อย่างไรก็ตาม การนำคำแนะนำเครื่องมือไปใช้นั้นไม่จำเป็นต้องมีความรู้เกี่ยวกับ DHTML หรือจาวาสคริปต์ มีการปรับแต่งมากมายที่สามารถตั้งค่าให้ปรับแต่งตามความต้องการของคุณโดยการตั้งค่าผ่านแอตทริบิวต์ "ชื่อ" ของแท็ก