מאמר זה ידגים את הסבר הכלים באמצעות JavaScript רגיל.
כיצד ליצור טיפים פשוטים ל-JavaScript?
כדי ליצור הסבר כלים באמצעות JavaScript, השתמש ב-' העברה בעכבר ' ו' יציאה בעכבר 'אירועים. עקוב אחר הדוגמאות הבאות להבנה טובה יותר.
דוגמה 1: הסבר על שימוש ב-JavaScript
בדוגמה הנתונה, ניצור הסבר כלים ב-JavaScript טהור וגם נעצב את הסבר הכלי באמצעות ' סִגְנוֹן ' תכונה.
ראשית, צור טקסט שבו אנו רוצים להציג הסבר על אירוע העכבר:
< h5 מזהה = 'טֶקסט' > לינוקס h5 >
קבל את הטקסט שבו יופיע הסבר הכלי באמצעות ' getElementById() ' שיטה:
איפה lh = מסמך. getElementById ( 'טֶקסט' ) ;
עכשיו, התקשר ל' addEventListener() שיטת ' על ידי העברת ' העברה בעכבר ” event ופונקציה() כפרמטר. בפונקציה המוגדרת, ראשית, ניצור הסבר על ידי יצירת ' div רכיב ', הגדר את הטקסט שיוצג בריחוף, וקבע סגנון מסוים של הסבר הכלי באמצעות ' סִגְנוֹן ' תכונה. לבסוף, הוסף את הסבר הכלי באמצעות ' appendChild() ' שיטה:
lh. addEventListener ( 'העכבר מעל' , פונקציה ( ) {היה טיפים = מסמך. createElement ( 'div' ) ;
הסבר כלים. innerHTML = 'אתר הטוב ביותר ללמוד מיומנויות' ;
הסבר כלים. סִגְנוֹן . רְאוּת = 'גלוי' ;
הסבר כלים. סִגְנוֹן . עמדה = 'מוּחלָט' ;
הסבר כלים. סִגְנוֹן . צבע רקע = 'rgb(107, 101, 101)' ;
הסבר כלים. סִגְנוֹן . ריפוד = '5 פיקסלים' ;
הסבר כלים. סִגְנוֹן . borderRadius = '3 פיקסלים' ;
הסבר כלים. סִגְנוֹן . צֶבַע = 'לבן' ;
הסבר כלים. סִגְנוֹן . שמאלה = 'חמישים%' ;
הסבר כלים. סִגְנוֹן . רוֹחַב = '200 פיקסלים' ;
מסמך. גוּף . appendChild ( הסבר כלים ) ;
} ) ;
כאן, השתמש ב' הוצאת עכבר ' אירוע שיסיר את הסבר הכלי בזמן שהסמן יתרחק מהטקסט:
lh. addEventListener ( 'יציאה מהעכבר' , פונקציה ( ) {
מסמך. גוּף . RemoveChild ( הסבר כלים ) ;
} ) ;
תְפוּקָה
דוגמה 2: הסבר על שימוש ב-JavaScript עם CSS
אתה יכול גם ליצור הסבר כלים ב-JavaScript עם CSS.
לשם כך, צור אזור להצגת הטקסט של הסבר הכלי באמצעות התג והקצה מזהה ' #עצת הכלים שלי ”:
< מזהה span = 'myTooltip' > לְהַקִיף >קבל את ההפניות של הטקסט ואת הסבר הכלי באמצעות ' getElementById() ' שיטה:
איפה lh = מסמך. getElementById ( 'טֶקסט' ) ;היה טיפים = מסמך. getElementById ( 'myTooltip' ) ;
התקשר להסבר על ' העברה בעכבר אירוע על ידי הגדרת הטקסט בפונקציה באמצעות ' innerHTML ' תכונה:
lh. addEventListener ( 'העכבר מעל' , פונקציה ( ) {הסבר כלים. סִגְנוֹן . רְאוּת = 'גלוי' ;
הסבר כלים. innerHTML = 'אתר הטוב ביותר ללמוד מיומנויות' ;
} ) ;
הסתר את הסבר הכלי ב' יציאה בעכבר אירוע על ידי הגדרת ' רְאוּת 'נכס ל' מוּסתָר ”:
lh. addEventListener ( 'יציאה מהעכבר' , פונקציה ( ) {הסבר כלים. סִגְנוֹן . רְאוּת = 'מוּסתָר' ;
} ) ;
צור מזהה ' #עצת הכלים שלי ' בגיליון הסגנונות שיעצב את הסבר הכלי:
#עצת הכלים שלי {רְאוּת : מוּסתָר ;
רוֹחַב : 200 פיקסלים ;
עם - אינדקס : 1 ;
רקע כללי - צֶבַע : rgb ( 107 , 101 , 101 ) ;
טֶקסט - ליישר : מֶרְכָּז ;
צֶבַע : לבן ;
ריפוד : 5 פיקסלים 0 ;
גבול - רַדִיוּס : 3 פיקסלים ;
שמאלה : חמישים %;
}
כפי שניתן לראות שהסבר הכלי יושם בהצלחה על הטקסט:
כיצד ליצור הסבר קצר באמצעות HTML ו-CSS?
אתה יכול גם ליצור הסבר כלים ללא JavaScript. בקובץ HTML, צור את הטקסט ' לינוקס ', שבו תיאור הכלי יוצג תוך כדי ריחוף עליו. צור אלמנט כדי להגדיר את הטקסט עבור הסבר הכלי בתוך תג הכותרת/טקסט :
לינוקס
< לְהַקִיף מעמד = 'טקסט כלים' >
פלטפורמה ללימוד מיומנויות
לְהַקִיף >
h5 >
בגיליון הסגנונות, צור מחלקה או מזהה שיוקצו לרכיבי HTML. כאן, ניצור כיתה ' הסבר כלים ' שמוקצה לכותרת:
. הסבר כלים {עמדה : קרוב משפחה ;
לְהַצִיג : בשורה - לַחסוֹם ;
}
הגדר מחלקה ' טקסט כלים ' כדי לעצב את הטקסט של הסבר הכלי ולהקצות לו את ה-HTML ' 'תג:
. טקסט כלים {רְאוּת : מוּסתָר ;
רוֹחַב : 150 פיקסלים ;
רקע כללי - צֶבַע : rgb ( 107 , 101 , 101 ) ;
צֶבַע : #fff ;
טֶקסט - ליישר : מֶרְכָּז ;
ריפוד : 5 פיקסלים 0 ;
גבול - רַדִיוּס : 3 פיקסלים ;
עמדה : מוּחלָט ;
עם - אינדקס : 1 ;
תַחתִית : 125 %;
שמאלה : חמישים %;
שולים - שמאלה : - 60 פיקסלים ;
אֲטִימוּת : 0 ;
מַעֲבָר : אטימות 0.3 שניות ;
}
הגדר ' לְרַחֵף ' אפקט עם ' הסבר כלים ' מחלקה כדי להציג את הסבר הכלי על אפקט הרחף:
. הסבר כלים : לרחף . טקסט כלים {רְאוּת : גלוי ;
אֲטִימוּת : 1 ;
}
תְפוּקָה
ריכזנו את כל ההוראות הרלוונטיות להסבר הכלי הפשוט של JavaScript.
סיכום
כדי ליצור הסבר כלים באמצעות JavaScript, השתמש ב-' העברה בעכבר ' ו' הוצאת עכבר ” events, אשר מציג את הסבר הכלי בעת ריחוף על האלמנט ומסתיר אותו כאשר אירוע ה-mouseout מופעל. לעיצוב הסבר הכלי, השתמש ב-' סִגְנוֹן ' תכונה ב-JavaScript. במאמר זה, הדגמנו את הדוגמאות הטובות ביותר האפשריות ליצירת הסבר כלים באמצעות JavaScript רגיל, JavaScript עם CSS והסבר ללא JavaScript.