Tambah Label Tooltip Imej Mudah dengan Taggd
Anda tahu bagaimana Facebook membolehkan anda label wajah dalam foto? Baiklah, Taggd agak seperti persamaan CSS / JS menggunakan titik untuk notate di mana petua alat akan muncul pada imej.
Perpustakaannya adalah percuma, dan tidak memerlukan sebarang kebergantungan seperti jQuery. Ia berjalan pada JavaScript vanila tulen, dan ia sangat mudah untuk ditubuhkan.
Anda boleh belajar sedikit lagi dari halaman rumah Taggd yang termasuk demo dan beberapa langkah asas untuk bermula.
Terdapat juga pautan ke dokumentasi dalam talian menggunakan Doclets, aplikasi web kecil yang kemas dibuat untuk dokumentasi JS. Awak boleh cari versi Taggd, atau semak imbas versi semasa di cawangan utama.
Dari situ, anda akan mendapat senarai besar hartanah anda boleh gunakan. Setiap dokumen dipisahkan oleh fungsi tersebut beroperasi pada imej (seperti addTag () atau getTag ()) diikuti dengan fungsi yang membantu anda memanipulasi tag tertentu (seperti setPosition ()).
Sekali lagi, semuanya berjalan di JavaScript vanila jadi anda tidak perlu bimbang tentang isu sintaks.
Untuk memulakan semak repo GitHub, dan ikuti arahan persediaan.
Anda hanya menambah fail CSS dan JS Taggd ke dalam anda seksyen , dan kemudian buat contoh baru daripada unsur Taggd. Ini boleh ditakrifkan satu demi satu atau dalam pelbagai.
Kemudian tambah mereka kepada imej, dan presto! Anda bersedia untuk pergi.
Saya ingin melihatnya ciri tambahan untuk menyesuaikan label tag, dan menukar bentuknya. Ia akan menjadi hebat untuk membuat tag persegi untuk mengelilingi objek dan bukan titik merah jambu kecil. Tetapi untuk perpustakaan percuma dengan kebergantungan sifar, saya tidak boleh mengadu banyak.
Setakat ini perpustakaan ini dibuat untuk pelayar moden sahaja, dan tidak menyokong degradasi anggun. Bagaimanapun, anda sentiasa boleh membuka masalah di halaman repo atau cuba menyelesaikan masalah lain jika anda melihat apa-apa yang mudah. Walau bagaimanapun, Taggd masih menjadi plugin, dan praktikal untuk digunakan untuk sebarang projek.
Lihat laman utama penulis untuk kod sampel dan Pautan DL bersama dengan a pautan ke halaman dokumentasi.
Dan jika anda mempunyai sebarang pertanyaan atau saran, sila bebas mesej kepada pencipta Tim Severien di Twitter @TimSeverien.
