Pridajte štítky s jednoduchým obrázkom na Taggd

Viete, ako vás Facebook umožňuje štítky s označením vo fotografiách? dobre, Taggd je trochu ako ekvivalent CSS / JS pomocou bodiek na zápis kde by sa na obrázku mali objaviť tipy.

Knižnica je úplne zadarmo a nevyžaduje žiadne závislosti ako napríklad jQuery. to beží na čistom javisku JavaScript, a je veľmi jednoduché nastaviť.

Môžete sa naučiť trochu viac z domovskej stránky Taggd, ktorá obsahuje demo a niekoľko základných krokov na začiatok.

K dispozícii je tiež odkaz na online dokumentáciu pomocou Doclets, úhľadnej malej webovej aplikácie vytvorenej pre dokumentáciu JS. Môžeš vyhľadať verzie Taggd, alebo prezerať aktuálnu verziu v hlavnom odbore.

Odtiaľ dostanete a obrovský zoznam nehnuteľností môžeš použiť. Každý dokument je rozdelený podľa funkcií pracovať na obrázku (ako napr addtag ​​() alebo getTag ()), za ktorými nasledujú funkcie, ktoré vám pomôžu manipulovať so špecifickými značkami (ako napr setPosition ()).

Opäť všetko beží na vanilke JavaScript takže sa nemusíte obávať syntaktických problémov.

Začať pozrite sa na repo GitHub, a postupujte podľa pokynov na nastavenie.

Stačí pridať Taggd CSS a JS súbory do svojho časť , a potom vytvorte novú inštanciu prvkov Taggd. Tie môžu byť definované jeden za druhým alebo v poli.

potom pripojte ich k obrázku, a presto! Všetci ste pripravení ísť.

Rád by som to videl ďalšie funkcie na prispôsobenie štítkov značiek, a meniť ich tvar. Bolo by úžasné vytvoriť štvorcovú značku, ktorá by obklopovala objekt a nie malý ružový bod. Ale pre bezplatnú knižnicu s nulovými závislosťami sa nemôžem veľmi sťažovať.

Táto knižnica je doteraz vytvorená iba pre moderné prehliadače, a nepodporuje pôvabnú degradáciu. Na stránke repo môžete však vždy otvoriť problém alebo sa pokúsiť vyriešiť ďalšie problémy, ak uvidíte nejaké jednoduché. Napriek tomu Taggd je stále sakra plugin, a je praktické použiť pre každý projekt.

Pozrite sa na domovskú stránku autora pre vzorový kód a DL odkazy spolu s a odkaz na stránku dokumentácie.

A ak máte akékoľvek otázky alebo pripomienky, neváhajte a podajte správu tvarodcovi Timovi Severienovi na svojom Twitter @TimSeverien.