תפריט עיני דג - jqDock | Htm - אחלה טיפים לבניית אתרים

לאחרונה הוספתי לאתר שלי רשימת כפתורי שיתוף בסוף כל פוסט (אתם מוזמנים לראות למטה), כפתורים שאפשר באמצעותם לפרסם מודעות בפייסבוק, טוויטר, להדפיס ולשלוח את הפוסט במייל.
עכשיו למה אני מספר לכם את זה? כי הוספתי גם אפקט ממש מגניב לכפתורים האלה – שעוברים עם העכבר על כל אייקון הוא גדל וכשמורידים את העכבר האייקון קטן חזרה לגודל המקורי.
האפקט הזה מופעל באמצעות ספריית ה-javascript המוכרת jquery וספרייה javascript נוספת בשם: jqDock.

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

<דוגמא><קוד>

חשוב להבין את דרך הפעולה של jqDock. מה ש-jqDock עושה הוא דבר פשוט, היא מוסיפה אירוע של mouseOver לכל תמונה (בין אם היא קישור או לא קישור) בתוך ה-Div הרלוונטי, וכאשר מעבירים את העכבר על התמונה, מימדי התמונה גדלים וכן התמונה מתחלפת לתמונה גדולה יותר, וזאת בשביל למנוע פיקסול של התמונה. צפו בדוגמא:

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

jqDock כמובן שומרת גם על יישור האלמנטים בתוך הDiv.

איך גורמים לזה לפעול?

ובכן,דבר ראשון יוצרים div עם ID יחודי ובתוכו מכניסים את התמונות שיכילו את תפריט ה-jqDock.

1
2
3
4
5
6
7

שימו לב שאפשר לשלב גם לינקים וגם תמונות פשוטות ללא לינקים כלל.

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

כעת נעבור להוספת ספריות ה-JS (את הקוד הבא רצוי להוסיף בין תגיות הhead):

1 2	<script type='text/javascript' src='jquery-1.2.3.min.js'></script> <script type='text/javascript' src='jquery.jqDock.js'></script>

הקישור לספריות צריך להיות קישור למיקום האמיתי של הספריות, כלומר, לאן שהעלאתם אותם בשרת שלכם.

ולסיום הקוד שמאתחל את jqDock:

1
2
3

$(document).ready(function(){
$('#menu').jqDock(options);
});

המילה menu# פונה לאלמנט ה-DIV שלנו, וכך הוא מבצע את האפקט על כל התמונות שה-Div מכיל. options הוא אופציונלי והוא בעצם אחראי לברור בין האפשרויות ש-jqDock מציעה, לבנתיים לא נוסיף אותו ונשאיר סוגריים ריקים. זהו התפריט מוכן.