Domača » Oblikovanje spletnih strani » Dodajte oznake preproste podobe z oznako Taggd

    Dodajte oznake preproste podobe z oznako Taggd

    Saj veste, kako vam Facebook omogoča nalepke na fotografijah? No, Taggd je nekako kot CSS / JS ekvivalent z uporabo pik za označevanje kjer naj bodo na sliki prikazani opisi orodij.

    Knjižnica je popolnoma brezplačna in ne zahteva nobenih odvisnosti kot je jQuery. To deluje na čisti vanilji JavaScript, in zelo enostavno ga je nastaviti.

    Nekaj ​​več se lahko naučite na domači strani Taggd vključuje predstavitev in nekaj osnovnih korakov za začetek.

    Obstaja tudi povezava do spletna dokumentacija z uporabo Docletsa, čedno malo spletno aplikacijo za dokumentacijo JS. Ti lahko iščite različice Taggd, ali brskajte po trenutni različici v glavni veji.

    Od tam boste dobili ogromen seznam lastnosti lahko uporabiš. Vsak dokument je razdeljen na funkcije, ki delujejo na sliki (kot naprimer addTag () ali getTag ()), ki jim sledijo funkcije, ki vam pomagajo manipulirati s posebnimi oznakami (kot naprimer setPosition ()).

    Spet vse deluje na vanilji JavaScript zato vam ni treba skrbeti za vprašanja sintakse.

    Za začetek Oglejte si GitHub repo, in sledite navodilom za nastavitev.

    Dodate samo datoteke Taggd CSS in JS v svoj oddelek , in potem ustvarite nov primer elementov Taggd. Te je mogoče opredeliti enega za drugim ali v matriki.

    Potem pa dodajte jih na sliko, in presto! Vsi ste pripravljeni iti.

    Rad bi videl dodatne funkcije za prilagoditev oznak nalepk, in spremenijo svojo obliko. To bi bilo super, da ustvarite kvadratno oznako, ki obkroža predmet, namesto majhne rožnate pike. Toda za brezplačno knjižnico z ničelnimi odvisnostmi se ne morem veliko pritoževati.

    Do sedaj je ta knjižnica narejena samo za moderne brskalnike, in ne podpira milostne degradacije. Vendar pa lahko vedno odprete vprašanje na repo strani ali poskusite rešiti druge težave, če vidite preproste. Kljub temu je Taggd še vedno vraga za vtičnik in je praktičen za vsak projekt.

    Oglejte si domačo stran avtorja za vzorčna koda in DL povezave skupaj z povezavo na stran z dokumentacijo.

    In če imate kakršnakoli vprašanja ali predloge, vas prosimo, da sporočite ustvarjalcu Timu Severienu na njegovi Twitter @TimSeverien.