הספוילר הוא כלי נוח לאתר. הוא נמצא בשימוש נרחב בפורומים ובלוגים שונים, מה שמאפשר למשתמש להסתיר אלמנט ספציפי בזמן לחיצה על הכפתור. יתר על כן, הספוילר נראה טוב באתר ועוזר להסתיר את אותם חלקים שמעמיסים יתר על המידה את הדף.
זה הכרחי
ספריית Jquery
הוראות
שלב 1
ניתן ליישם את הספוילר באמצעות ספריית התוספות הפופולרית jquery שנכתבה בשפת התכנות Java Script. הוא משמש ליישום אינטראקציה מלאה של שפת התכנות עם קוד הסימון HTML של הדף. חיבור jquery נעשה באמצעות HTML באמצעות התג . עליך לציין את המיקום שבו נמצא הסקריפט ולהגדיר את סוגו: $ (document).ready (function ()
שלב 2
קטע הטקסט שצוין בפסקה מסוימת חייב להיות כלוא בשכבה נפרדת - div, בעזרתו ישלט הספוילר עצמו: סשה הלך לאורך הכביש המהיר ומצץ ייבוש.
שלב 3
לאחר מכן, עליך ליצור מול כל המחלקות בשם לחצנים המתאימים לקלקל שיתמוטטו וירחיבו את הטקסט. ראשית, הספוילר עצמו מוסתר באמצעות הפונקציה הסטנדרטית "הסתר ()": $ ("div [name = 'spoil']"). הסתר (); לאחר מכן עליך ליצור טקסט ותמונה לכל הספוילרים, שישמש כרקע ללחצנים: $ ("P [name = 'spoilbutton']"). Html ("הצג טקסט");
שלב 4
מצא את כל הכפתורים בעמוד ובדוק אם הכותרות בדרגה הראשונה מול הכפתור. לשם כך, צור תנאי שיחפש תגי h1 לפי שם. טקסט הכותרת שצוין עוטף את ה- div עצמו: $ ("p [name = 'spoilbutton']"). כל (פונקציה () {If ($ (this).prev (this).get (0).tagName == "H1") {Var NewSpoilButton = " + $ (this).prev (this).html () + "Show text"; $ (this).prev (this).replaceWith ("); $ (this).replaceWith (NewSpoilButton);}})
שלב 5
לאחר מכן עליך לטפל בלחיצת כפתור העכבר בלחיצה. אם מתגלה קליק, ניתן להציגו: $ ("div [name = 'spoilbutton']"). לחץ על (פונקציה () {אם ($ (זה). הבא (זה). Css ("תצוגה") = =”חסום”) {
שלב 6
ואז כתוב ירושה. בתוך div, הטקסט נמצא בפסקה p, שתוכנו ממוקם בתג span: $ (זה).ילדים ("p"). ילדים ("span"). HTML ("הצג טקסט"); כיווץ ספוילר פתוח. אם הוא לא פתוח, הרחב את הטקסט. שלב זה מבוסס על כלל הירושה: $ (this).next (this).slideUp ("רגיל");} אחר {$ (this).ילדים ("p"). ילדים ("span"). Html ("הסתר טקסט"); $ (זה). הבא (זה). SlideDown ("רגיל");} להחזיר שקר; })
שלב 7
ואז מתועד עצם לחיצת העכבר על הכפתור, לפיו התסריט יסתיר ויפרוש את הספוילר. $ ("P [name = 'spoilbutton']"). לחץ על (פונקציה () {If ($ (this).next (this).css ("display") = "block") {$ (this).next (זה).slideUp ("רגיל"); $ (זה).html ("הסתר");} להחזיר שקר;}); ספוילר מוכן. הוא יופיע כאשר נמצא חסימת DIV תואמת.
