Mājas lapa » Web dizains » Pievienojiet vienkāršas attēlu rīku iezīmes ar Taggd

    Pievienojiet vienkāršas attēlu rīku iezīmes ar Taggd

    Jūs zināt, kā Facebook ļauj jums etiķetes sejas fotoattēlos? Nu, Taggd tāpat kā CSS / JS ekvivalents izmantojot punktus, lai atzīmētu kur attēlā jāparādās.

    Bibliotēka ir pilnīgi bez maksas un neprasa nekādas atkarības piemēram, jQuery. Tā darbojas ar tīru vaniļas JavaScript, un tas ir super viegli uzstādāms.

    Jūs varat uzzināt nedaudz vairāk no Taggd mājas lapas ietver demo un dažus pamata soļus lai sāktu darbu.

    Ir arī saite uz tiešsaistes dokumentācija izmantojot Doclets, veikls neliels tīmekļa lietojumprogramma, kas izveidota JS dokumentācijai. Jūs varat meklēt Taggd versijas, vai pārlūkojiet pašreizējo versiju maģistra filiālē.

    No turienes jūs saņemsiet a milzīgs īpašību saraksts tu vari izmantot. Katrs dokuments ir sadalīts pa funkcijām darbojas uz attēla (piemēram, addTag () vai getTag ()), kam seko funkcijas, kas jums palīdz manipulēt ar konkrētiem tagiem (piemēram, setPosition ()).

    Atkal, viss darbojas ar vaniļas JavaScript tāpēc jums nav jāuztraucas par sintakses jautājumiem.

    Lai sāktu darbu pārbaudiet GitHub repo, un izpildiet iestatīšanas norādījumus.

    Jūs vienkārši pievienojat Taggd CSS un JS failus savā sadaļā , un tad izveidot jaunu instanci no Taggd elementiem. Tos var definēt vienu pēc otra vai masīvā.

    Pēc tam pievienojiet tos attēlam, un presto! Jūs visi esat gatavs doties.

    Es gribētu redzēt papildu funkcijas tagu etiķešu pielāgošanai, un mainīt to formu. Tas būtu awesome izveidot kvadrātveida tagu, lai ieskaidrotu objektu, nevis nelielu rozā punktu. Bet par brīvu bibliotēku ar nulles atkarībām es nevaru daudz sūdzēties.

    Līdz šim šī bibliotēka ir veidota tikai mūsdienu pārlūkprogrammām, un neatbalsta graciozs degradāciju. Tomēr jūs vienmēr varat atvērt problēmu repo lapā vai mēģināt atrisināt citas problēmas, ja redzat vienkāršus. Neskatoties uz to, Taggd joprojām ir spraudnis, un tas ir praktiski izmantot jebkuram projektam.

    Pārbaudiet autora mājas lapu parauga kods un DL saites kopā ar a saite uz dokumentācijas lapu.

    Un, ja jums ir kādi jautājumi vai ieteikumi, nekautrējieties ziņot radītājam Tims Severienam par savu Twitter @TimSeverien.