jQuery: למצוא ()
jQuery היא מסגרת גדולה JavaScript. אם עדיין לא הזדמן לי לעבוד איתו, אני מקווה כי פרסום הבאה, יעודד אתכם לנצל את הפתרון הזה. כי זה מתאפיין במהירות, אופטימיזציה של קוד כדי להתאים אותו כמו דפדפנים רבים, כמו גם, שרבים כנראה המעניינת ביותר - קל לבנות פתרונות מורכבים.
במאמר הנוכחי נתמקד בשיטה יעילה מאוד למצוא ().
אם לא עוסקת במסגרת זו, אני קורא לכם להכיר את היסודות של סלקטורים, באמצעות API הרשמי על selectorów , או שהוכן על ידי ברטוש Medonia כמובן jQuery יסודות . ידע זה יהיה מאוד להקל על ההבנה של הפתרונות שהוצגו כאן.
הטוב ביותר בואו לקבל קצת דוגמה מוחשית של שיטה זו. ברוב הדפים, אחד המרכיבים הבסיסיים ניווט בתפריט. אנחנו ננסה ליצור תפריט אנימציה משלהם תוך שימוש במספר מינימלי של רכיבים הפועלים תחת כל דפדפן התומך ב-JavaScript.
ראשון הכנת אלמנטים
נתחיל על ידי יצירת מסמך HTML ריק:
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> תפריט </ title> </ Head> <body> </ Body> </ Html>
ואז לתפוס את הגרסה האחרונה של jQuery מתוך האתר הרשמי של הפרויקט (ייצור) ולהעתיק אותו לתיקייה של קבצי HTML שלנו.
במסמך זה, יכול להשתמש בחלק תוכן המדגם, והתפריט שלנו. משמש div זה תגיות תוחלת. כמובן, את הפריטים בתפריט שלנו, צריך להיות קישורים, ובכך לחסום אותם. כל מכניסים div בלוק עם התפריט = id. הוסיפו את הקובץ באמצעות תג סקריפט jQuery. כולה צריך להיראות בערך כך:
<div id="menu"> <div> # 1 href תפריט </ a> <span> # href 1.1 תפריט </ a> # href 1.2 תפריט </ a> # href 1.3 תפריט </ a> </ Span> </ P> <div> # 2 href תפריט </ a> <span> # href 2.1 תפריט </ a> # href 2.2 תפריט </ a> # href 2.3 תפריט </ a> # href 2.4 תפריט </ a> # 2.5 href תפריט </ a> </ Span> </ P> <div> # 3 href תפריט </ a> <span> # href 3.1 תפריט </ a> # href 3.2 תפריט </ a> # href 3.3 תפריט </ a> # href 3.4 תפריט </ a> </ Span> </ P> <div> # 4 href תפריט </ a> <span> # href 4.1 תפריט </ a> # href 4.2 תפריט </ a> </ Span> </ P> </ Span> <- # תפריט סוף -> יש קצת תוכן המדגם. יש קצת תוכן המדגם. יש קצת תוכן המדגם. יש קצת תוכן המדגם. יש קצת תוכן המדגם. יש קצת תוכן המדגם. יש קצת תוכן המדגם. יש קצת תוכן המדגם. יש קצת תוכן המדגם. יש קצת תוכן המדגם. <script type="text/javascript" src="jquery.js"> </ script>
במיוחד להכניס פריטים רבים בתפריט כדי להראות כמה קל ימשכו רבים מהם jQuery, תלוי באיזה בלוק לנו להזיז את העכבר.
שני להגדיר את המראה של התפריט (CSS)
בסעיף זה, אנו מגדירים את המראה בשימוש ה-HTML, חוסם קובץ הקוד. הכנתי את עצמי, את הקוד הבא בסגנון, הממוקם באזור הראש:
<style type="text/css"> <! - * {Margin: 0px ריפוד,: 0px;} כמה {text-decoration: none; גופן: 20px גאורגיה "Times New Roman", פעמים,-serif;} html, body {margin: 10px;} תפריט # {למעלה: 0px; float: שמאל, רוחב: 100%;} # DIV התפריט {position: relative; float: שמאל;} # DIV התפריט: פעיל, התפריט div #: הקישור, div # התפריט: ביקר {תצוגה: לחסום; position: relative; אנכי-align: התיכון; הרקע: # ccc; צבע: # fff; ריפוד: 5px 10px; רוחב: 150px;} # DIV התפריט: hover {background: # 999;} # DIV התפריט span {display: none; position: absolute, מלמעלה: 100%, שמאל: 0; float: none;} Div # DIV התפריט: פעיל, # div div התפריט: קישור, div # התפריט אורך: ביקר {position: relative; תצוגה: לחסום; float: שמאלה, למעלה: 0px; הרקע: # DDD: צבע: # fff; ריפוד: 5px 10px; רוחב: 150px;} Div # DIV התפריט: hover {background: # 999;} -> </ Style>
בדוגמה שלנו, אנו יוצרים פשוט רק 2 ברמת התפריט, אבל אין שום דבר בדרך לשנות אותם ולהתאים לכל מספר רמות.
אם אנחנו בשלב זה, כדאי גם להתייחס במסגרת ליצור תפריט css'owego .
שלישי המסמר של התוכנית - למצוא.
על ידי אמצעים, אנחנו מוכנים ליישם קוד עמוד שלם JavaScript. אנו יודעים גם, כאמור, אומר בורר. במקרה שלנו, למשל היא די פשוטה, שכן יש רק 4 התפריט הראשי, אבל זה לא קשה להעלות על הדעת כי ייתכן שיהיו יותר, וכל אחד מהם יכול לקבל מספר רב של סניפים. זה פוסל את שיטת לולאה, מרחיקה גם כוח פראי, לאחר שנבדקו כל המקרים בנפרד. אבל בזכות השיטה למצוא את הבעיה, את שחין, עד קו אחד ברור מאוד של הקוד לבצע את העבודה כולה בשבילנו. זה טוב כי קוד JavaScript שלנו היה $ (מסמך). מוכן, להבטיח שאנחנו מתייחסים אליו, כאשר הדף נטען, כל התסריטים, סגנונות חיצוניים וקבצים אחרים.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (מסמך). מוכן (הפונקציה () { $ ("תפריט # דיב"). רחף ( הפונקציה () { . $ (זה) מצא ("תוחלת") CSS ({אטימות: 0.98}) SlideToggle ("מהיר").. } הפונקציה () { . $ (זה) מצא ("תוחלת") SlideToggle ("מהיר"). } ); }); / /]]> -> </ Script>
הקוד הנ"ל אני ממליץ לשים את תג סקריפט, שאנו מתייחסים jQuery, על הקרקעית.
בבורר הראשי, עיין תג של id = "תפריט", שבתוכה יש div. שיטה. העבר (), כלומר התרחשות לפלוש העכבר, הפריט הנבחר כפרמטרים, לוקח אחד או שניים פונקציות המבוצעות במהלך ייזום של אירוע זה. המאפיין השני הוא אופציונלי מתבצע כאשר העכבר לעזוב את האזור של היסוד שלנו. ניסו להציג את הקוד, כך הפונקציות הן שקופות לקורא, אך אני ממליץ להקטין את קוד בפרויקטים קיימים.
עכשיו תן לנו לנתח את הקוד בתוך הפונקציה. שוב, כאן אנו משתמשים בורר, הפעם אנו מתייחסים לנושא בו אנו חיים. כל חוזר jQuery בורר, אשר ניתן לטפל על ידי סעיף זה. אבל אם אתה רוצה בתוך אלמנט, עיין בסעיף בתוך פריט, השתמש בשיטה מצא, אשר מוצאת ומחזירה את כל הרכיבים המתאימים. זכור זאת, כי אם אתה רוצה להפנות לפריט מסוים, עליך להשתמש כזה בכיתה ואחרי הערעור. מצא (". ClassNazwa"). כמובן, בתוך למצוא, אנו עשויים להתייחס גם כמה אלמנטים מבנה מסובך יותר, כמו גם את סלקטורים jQuery.
התכונה הראשונה כפי שאתם יכולים לראות, לשנות את השיטה מחזירה אובייקט ולשנות את השקיפות שלו, ולאחר מכן להשתמש slideToggle השיטה (), יהיה יזם אנימציה, במקרה זה, זה אנימציה, "יורד" למטה, אשר קובע את הפרמטר מוגדר להציג אף בהגדרות של אלמנט (אלמנט בלתי נראה, כדי להחליק את הדבר היחיד שניתן לעשות הוא להראות את זה).
תכונה 2, הכל נראה דומה מאוד, חוץ מזה אנחנו כבר לא צריכים לשנות אטימות, כי זה כבר השתנה. עשינו את זה על jQuery, כולל כי ב-CSS, לא יהיה אפשרי, בצורה כזאת כדי להשיג ציות מלא validator W3C, וכי שקיפות הוצגה כראוי על כל הדפדפנים המודרניים כי JavaScript תמיכה.
4 תקציר
מטרת מאמר זה, הוא ללמוד כיצד ליצור תפריטים אנימציה, אבל, היכרות עם נושאים מעניינים רבים לגבי שיטת למצוא (), כמו גם jQuery. ההזדמנויות הן עצומות, ואני מקווה כי לאחר קריאת מאמר זה, הוא יזכה חובבי ספורות.
אמנם ההשפעה של העבודה שלנו, אנו יכולים לראות את ההפגנה .
מאמר יפה מאוד - שיטה יעילה תיאר jQuery, ו - דוגמה מעשית מאוד. ברור ונעים, אני מחכה האמנים הבאים