Advertisement
Guest User

jquery.tooltip.js

a guest
Oct 27th, 2012
301
0
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);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement