תפריט עיני דג – jqDock

 

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

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

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

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

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

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

1
2
3
4
5
6
7
<div id='menu'>
<img src='image1.gif' alt='image1.png' title="" />
...
<a href='page.html' title="">
<img src='imageN.png' alt="" title="" /></a>
...
</div>

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

בואו נביט בקוד, אנחנו רואים שבאלמנט התמונה תחת המאפיין 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 מציעה, לבנתיים לא נוסיף אותו ונשאיר סוגריים ריקים. זהו התפריט מוכן.

במאמר הבא אני אסביר לכם על האופציות ש-jqDock מציעה.

שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

עוד באותו נושא:

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

תגובות
מאורNo Gravatar 13 בספטמבר

מגניב האפקט :-)

אגב באיזה תוסף אתה משתמש לאייקונים עצמם?
אני ניסיתי את sexysharing או משהו דומה לזה, אבל היו איתו כל מיני בעיות אז נשארתי בינתיים עם ה sociable.

[תגובה]

אורן רוטNo Gravatar 13 בספטמבר

תודה רבה,
השתמשתי ב- SocioFluid והוספתי עוד שלוש כפתורים שלא היו שם (אימייל, הדפסה, הוספה למעודפים)

[תגובה]

najehoNo Gravatar 15 בספטמבר

נחמד מאוד.
השאלה אם זה לא מכביד מאוד על העמוד ובכך פוגע בזמן עלייה ובקידום.

[תגובה]

אורן רוטNo Gravatar 15 בספטמבר

אם אתה משתמש בספריית jquery בכל מקרה אז זה לא מכביד בכלל (ספריית jqDock שוקלת רק 10.2 KB).
לדעתי אין עם זה בעיה.

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

[תגובה]

גלעדNo Gravatar 24 ביוני

זה נראה ממש מגניב ממש תודה =]!!
אבל איפה מוסיפים את הקוד:

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

בין תגיות body במסמך html רגיל או שצריך לשים לו תגית script מיוחדת ב-head כי זה לא עבד לי ואני לא מתמצא כל כך ב-jqdock!
בבקשה עזרה!!!

[תגובה]

אורן רוט

תכניס את הקוד לתגיות script ותשים איפה שבא לך…

[תגובה]

גלעד

לשים בתגית ?? כי זה לא עובד לי!!

[תגובה]

גלעד

הכוונה לתגית של גאווה סקריפט..
[האנגלית לא עובדת פה לכן כתבתי פעמיים]

גלעדNo Gravatar 25 ביוני

הכוונה לתגית

[תגובה]

אורן רוטNo Gravatar 27 ביוני

אז יש לך כנראה טעות אחרת.

תוריד את הקבצים שצירפתי באתר ותשחק עם זה..

[תגובה]

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון