SHARE
TWEET

jquery.tooltip.js

a guest Oct 27th, 2012 126 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function($){
  2.         $.tooltip = function(text, action, element){ // נגדיר את הפלאגין עם 3 משתנים, הראשון מכיל את תוכן הטולטיפ, השני יכיל איזו פעולה יבצע הטולטיפ (פתיחה או סגירה) והשלישי יכיל את האובייקט של האלמנט
  3.                 if(!$('#tooltip').length) // נבדוק אם יצרנו כבר את האלמנט של הטולטיפ עצמו
  4.                 {
  5.                         var tooltip = $('<div></div>', { // נגדיר משתנה שיכיל את האלמנט של הטולטיפ עצמו
  6.                                 id: 'tooltip' // נגדיר איידי בשביל זיהוי עתידי והחלת סגנון
  7.                         }).appendTo('body'); // ונוסיף אותו לבאדי, אחרת הוא סתם נמצא כאן
  8.                        
  9.                         var tooltipText = $('<span></span>').appendTo(tooltip); // ניצור את האלמנט שמכיל את הטקסט עצמו בטולטיפ ונכניס אותו לאלמנט הראשי
  10.                         var tooltipArrow = $('<i></i>').appendTo(tooltip); // ניצור גם את האלמנט שיהיה החץ של הטולטיפ
  11.                 }
  12.                 else // אם יצרנו כבר את הטולטיפ בעבר, אז נסתפק בלהגדיר כמה משתנים וזהו
  13.                 {
  14.                         var tooltip = $('#tooltip'); // נגדיר את המשתנה של הטולטיפ בתור האלמנט שכבר קיים בף לפי האיידי
  15.                         var tooltipText = tooltip.find('span'); // נבחר את האלמנט שיכיל את הטקסט של הטולטיפ
  16.                         var tooltipArrow = tooltip.find('i'); // וכמובן שנבחר גם את האלמנט שיהיה החץ בטולטיפ
  17.                        
  18.                         /*
  19.                         טיפ: תשימו לב שהשתמשתי בפונקצית החיפוש במקום לרשום את הנתיב של הסלקטור. כלומר, במקום לעשות
  20.                         $('#tooltip span')
  21.                         העדפתי לחפש את הספאן בתוך האלמנט שכבר בחרנו. יש 2 סיבות לכך:
  22.                         1) דוגרי, כבר בחרנו את האלמנט הראשי, אז הנה כבר חסכנו חצי עבודה
  23.                         2) חיפוש באמצעות הפונקציה פינד יותר יעיל מאשר בחירה לפי הנתיב של הסלקטור מבחינת מהירות
  24.                         */
  25.                 }
  26.                
  27.                 switch(action) // עכשיו, נבדוק איזו פעולה רצינו לבצע מלכתחילה
  28.                 {
  29.                         case 'show': // החל מכאן, נבצע את מה שיקרה כשנרצה להציג את הטולטיפ
  30.                                 tooltipText.text(text); // כבר בהתחלה נגדיר את הטקסט בכדי שנוכל לדעת מה פחות או יותר הרוחב והגובה של הטולטיפ
  31.                                
  32.                                 var offset = element.offset(); // נגדיר את המיקום הבלתי מוגדר של האלמנט שממנו יוצא הטולטיפ
  33.                                
  34.                                 var top = offset.top - (tooltip.outerHeight()/2 - element.outerHeight()/2); // נחשב את המיקום מלמעלה בכך שנמרכז את הטולטיפ לאמצע של האלמנט שממנו נפתח הטולטיפ
  35.                                 var left = offset.left - tooltip.outerWidth() - 5 - 2; // נמקם את הטולטיפ משמאלו של האלמנט שממנו הטולטיפ יוצא
  36.                                
  37.                                 /*
  38.                                 הערה: הורדתי בנוסף 5 פיקסלים בגלל הרוחב של החץ, ועוד 2 פיקסלים בשביל עוד רווח קטנטן
  39.                                 */
  40.                                
  41.                                 if(left < 1) // נבדוק אם הטולטיפ יוצא מהמסך בחלקו השמאלי
  42.                                 {
  43.                                         tooltipArrow.addClass('left'); // נוסיף לחץ קלאס שישנה את הכיוון שלו לצד השני
  44.                                         left = offset.left + element.outerWidth() + 5 + 2 // נהפוך את המיקום השמאלי של הטולטיפ כך שיופיע מימינו של האלמנט
  45.                                 }
  46.                                
  47.                                 tooltip.css({ // כעת, נגדיר את המידות שחישבנו מקודם
  48.                                         left: left + 'px', // פה נגדיר את המיקום משמאל
  49.                                         top: top + 'px', // ופה נגדיר את המיקום מלמעלה
  50.                                         display: 'block' // אל תגידו ששכחתם שמישהו צריך לראות את כל מה שעשינו
  51.                                 });
  52.                                
  53.                         break; // עד לפה החלטנו מה נעשה כשנרצה להציג את הטולטיפ
  54.                        
  55.                         case 'hide': // החל מפה נגדיר מה יקרה כשנרצה להסתיר את הטולטיפ
  56.                                 tooltip.hide(); // קודם כל, כמובן שנרצה להסתיר אותו מהדף. ניתן להשתמש גם באפקטים חמודים, אני העדפתי שלא
  57.                                 tooltipText.empty(); // נמחק את הטקסט שהופיע בתוך הטולטיפ, סתם שלא יהיה משהו מיותר בדף
  58.                                
  59.                                 tooltipArrow.removeClass('left'); // אם בבדיקה מקודם שינינו את המיקום של החץ, כעת הרי שנרצה להחזירו בחזרה
  60.                         break; // פה נגמרת הפעולה של ההסתרה של הטולטיפ
  61.                 }
  62.         };
  63. })(jQuery);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top