הוספת תוויות תיאור של תמונה פשוטה עם Taggd

אתה יודע איך פייסבוק מאפשר לך פרצוף תווית בתמונות? טוב, תגגד הוא קצת כמו המקבילה CSS / JS באמצעות נקודות כדי להודיע שבו tooltips אמור להופיע על התמונה.

הספרייה חופשית לחלוטין אינו דורש שום תלות כגון jQuery. זה פועל על וניל טהור, וזה סופר קל להגדיר.

אתה יכול ללמוד קצת יותר דף הבית Taggd אשר כולל הדגמה וכמה צעדים בסיסיים לתחילת העבודה.

יש גם קישור אל תיעוד מקוון באמצעות Doclets, יישום אינטרנט מסודר קטן שנעשה תיעוד JS. אתה יכול חיפוש גרסאות Taggd, או עיין בגירסה הנוכחית בסניף הראשי.

משם, תקבל רשימה ענקית של נכסים אתה יכול להשתמש. כל דוק מחולק על ידי פונקציות לפעול על התמונה (כמו הוסף תגית() או getTag ()) ואחריו פונקציות שיעזרו לך לתפעל תגים ספציפיים (כמו setPosition ()).

שוב, הכל פועל על וניל אז אתה לא צריך לדאוג בעיות תחביר.

להתחיל לבדוק את ריפו GitHub, ופעל לפי הוראות ההתקנה.

אתה רק להוסיף את Taggd CSS ו JS קבצים 100 me סעיף , ואז ליצור מופע חדש של אלמנטים של Taggd. אלה יכולים להיות מוגדרים אחד אחד או במערך.

לאחר מכן לצרף אותם לתמונה, ו פרסטו! אתה מוכן ללכת.

אני אשמח לראות תכונות נוספות כדי להתאים אישית את תוויות התג, ולשנות את צורתם. זה יהיה מדהים ליצור תג מרובע להקיף אובייקט ולא נקודה ורודה קטנה. אבל עבור ספרייה חופשית עם תלות אפס, אני לא יכול להתלונן הרבה.

עד כה נעשה ספריה זו עבור דפדפנים מודרניים בלבד, ואינו תומך השפלה חיננית. עם זאת אתה תמיד יכול לפתוח בעיה בדף ריפו או לנסות לפתור בעיות אחרות אם אתה רואה את כל אלה פשוטים. עם זאת, Taggd הוא עדיין לעזאזל של תוסף, וזה מעשי לשימוש עבור כל פרויקט.

בדוק את דף הבית של המחבר קוד לדוגמה ו קישורים DL יחד עם קישור לדף התיעוד.

ואם יש לך שאלות או הצעות להרגיש חופשי לשלוח את היוצר טים Severien ב Twitter @ TimSeverien שלו.