אני לא יכול לעזור לעצמי לכתוב על התוסף הזה. זה אחד מהדברים היצירתיים ביותר שראיתי שנעשה עם jQuery. כפי שהשם אומר לך, לפני אחרי, אתה יכול להריח כמה פעולות, נכון? תסתכל על התמונה כאן:

התוסף מאפשר לך להציג שתי תמונות של אותו הדבר בזמנים שונים מראים כמה הבדלים. כמובן שאנו יכולים להבין את ההבדלים כאשר שתי תמונות מוצגים זה לצד זה אבל superimposing על השני ויש מחוון כדי להחליק אותם ולראות את ההבדל הוא פשוט מדהים וזה מה שאנחנו קוראים ליצירתיות. סדרה של הדגמה היא כאן http://www.catchmyfame.com/jquery/demo/8/. יתר על כן את המחוון חלק וכאשר אתה לוחץ על כל חלק של התמונה, המחוון מגיע לסמן בצורה חלקה - די מרשים.

הבחור בhttp://www.catchmyfame.com עשה עבודה ממש נחמדה. אנו מצפים מחוון אנכי אם אפשר מהמהדורה הבאה של התוסף הזה. להשתעשע עם זה.

תמיד הייתי מעריץ גדול של jQGrid תוסף גריד jQuery. הוא יכול להתמודד עם משימות מורכבות למדי ומתוחכמות. אבל אני לא אוהב את ממשק המשתמש שהיה לפני. הייתי צריך לשנות css שלהם כדי להיות מסוגל להציג אותם ללקוחות. אני גם משתמש flexigrid למשימות פשוטות. זה די קל לעבוד איתו. אבל אף אחד מהם לא היה שום מקום קרוב יותר כדי להביס גריד JS EXT של ג'ק סלוקום. שלוחה הייתה כבדה בשבילי כמו שאני לומד אותם וסופו של דבר גילה שהיישומים שלי לא מחייבים את רגשות שולחן העבודה כextjs שסופק. ולהיות מעריץ גדול של jQuery, אני תמיד רציתי שאהיה לי תוסף רשת שפועל קרוב לרשת ExtJS. עכשיו תסתכל על זה.

Awsome, נכון? כן, jqGrid בtrirand כעת מופעל על ידי ממשק משתמש jQuery. זה די מסודר ומהיר עכשיו. ניתן להתאים אישית את ערכת נושא מאתר של ממשק משתמש jQuery גם כן. לא מדבר יותר עכשיו, פשוט לאכול אותו כאן http://www.trirand.com/jqgrid35/jqgrid.html

כך שזה לא יהבהב אחרי כל לעשות את כל הקסמים! שראינו ועדיין רואה את הבזק עושה פלאים וקסמים. אחד הדברים מגניבים שפותחו היה pageflip. ראיתי שכאשר אני ראשון שיחק עם הבזק בשנתי 2002-2003 אני מניח בflashkit וactionscripts.org. אתה יכול לראות את גרסה הפרו טובה מאוד של דבר כזה כאן. אבל בשבילנו, שרוצה את רוב הדברים שעשו בjQuery - סוף סוף יש אלטרנטיבה שלדבר להעיף הדף. זה לא תחליף מלא של פלאש אבל לא רעה לאפקט הדף להעיף שימוש מינימאלי.

ככה זה נראה עם תוסף בשם jFlip נכתב על ידי רנאטו בפורמט http://www.jquery.info/scripts/jFlip/demo.html

יש הדגמות שבדפי מערכים שונים עם כמה אפשרויות. ואני יצרתי את אחד עם חלק ממכוניות החלום שלי כאן

מקווה שאתה אוהב את היוזמה על ידי רנאטו.

זהו פוסט של איך אנחנו יכולים ליצור בקלות תפריט ניווט אנימציה עם jQuery ללא כל תוסף קצר מאוד. אתה חייב לראות תפריטי ניווט אופקיים או veritical שמתרחב ומתכווץ בגודלה בגלגול. לפני אלה מסגרת JavaScript באה, שהיינו צריכים לעשות די הרבה קוד כדי לקבל את הדברים. למה? שטיפול דפדפנים מטופש. אני לא רוצה להתחיל מחדש באינטרנט אקספלורר.

אוקיי, הנה זה הדבר. אנחנו פשוט באמצעות רשימה לא מסודרת כדי להפוך את תפריט אופקי שמתרחב ומתכווץ. קוד הוא פשוט מת. בואו נסתכל על הסימון ראשון.

 <div id="navcontainer"> <ul id="navlist"> <li> <a href="http://www.google.com"> גוגל </ a> </ p> <li> <a href = "Http://www.yahoo.com"> יאהו </ a> </ p> <li> <a href="http://www.msn.com"> MSN </ a> </ p> <li> <a href="http://www.lycos.com"> Lycos </ a> </ p> <li> <a href="http://www.baidu.com"> אידו </ > </ p> </ ul> </ p> 

אז יש לנו כמה פריטים ברשימה שם. אז לגרום להם להיראות כמו תפריט אופקי שהיינו צריכים קצת CSS שנראה כך

 : inline ; } #navcontainer ul li li {display: inline;} # navcontainer ul li 

והחלק האחרון .. מה שהופך אותם הריקודים במעבר עכבר. די פשוט עם הפונקציה להנפיש. רק כמה שורות מתחת אלה יעשו את העבודה. יש להסתכל.

  ( ) { $ (פונקציה () {
		 ) . hover ( function ( ) { $ ("# Navlist"). ריחוף (פונקציה () {
			 ) . css ( "background-color" , "#369" ) ; $ (זה) CSS ("צבע רקע", "# 369").
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (זה) הנפשת ({רוחב: '200px '}, {משך: 200, תור: שקר}).
		 },
		 פונקציה () {
			 ) . css ( "background-color" , "#222" ) ; $ (זה) CSS ("צבע רקע", "# 222").
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (זה) הנפשת ({רוחב: '100px '}, {משך: 200, תור: שקר}).
		 });		
	 }); 

זהו זה! ראה בפעולתו

האם אתה משועמם עם lightboxes רבים מדי, thickboxes, שכבות חלון? האם אתה רוצה דבר די גלריה מוטבעת? יכול להיות שאתה עושה. שמעתי מכמה מלקוחות (לקוחות מבוגרים יותר) שהם לא אוהבים את זה, הפסקות חשמל כאשר lightboxes thickboxes. אז מה לעשות לאחר מכן? דבר אחד בטוח, כאשר U לחשוב על משהו, נסה טוב ראשון, ב -80% מהמקרים תמצאו פתרון שמישהו כבר עשה. זה לא המאה של ניוטון, זה של המאה ה -21. כל כך הרבה אנשים אחרי כל כך הרבה דברים. ובחור גרמני בשם כריסטוף Schüßler בא להציל אותנו מlightboxes הרגיל. זה נקרא jQuery פופאי.

אני לא רוצה לעשות הסיפור ארוך יותר. רק לראות אותו בפעולה. ואני בטוח שאתה מתכנן להשתמש בתוסף זה בחלק מהפרויקטים הבאים שלך.

אז AJAX AJAX ו-AJAX, זה מה שאנחנו עושים באופן נרחב בימים אלה. זה חוסך זמן, מוסיף דינמיקה ונותן לך תחושה של שימוש בתוכנה מסוג יישום של תחושה. יש עוד דרכים רבות להשתמש AJAX עם ספריות רבות. אבל כפי שאתה יכול לראות באתר הזה הוא בשביל jQuery, אנחנו מסתכל על כמה שימושים מתקדמים AJAX בסיסיים או אולי.

מה אתה צריך אותנו?

ספריית jQuery (כמובן)
סקריפט PHP קטן

בואו התחלנו לדבר. בjQuery, יש בעצם 6 סוגים של שיטה לעשות פעולות AJAX. אלה הם

1. $. AJAX (אפשרויות)
2. $. לקבל (כתובת אתר, נתונים, קריאה חוזרת)
3. $. GetJSON (URL, נתונים, קריאה חוזרת)
4. $. GetScript (URL, קריאה חוזרת)
5. עומס (URL, נתונים, הקריאה החוזרת)
6. $. הודעה (כתובת אתר, נתונים, קריאה חוזרת,

מלבד מספר 1, כל השיטות האחרות להשתמש $. AJAX באופן פנימי. אז זה אומר $. AJAX () הוא פונקצית האמא שלנו לפעולות jQuery AJAX. בואו נסתכל על איך $. AJAX () נראה כמו

 msg ) ; } } ) ; תגובה "+ MSG);}}); 

זה די בו. סוג הפרמטר לוקח "לקבל" או "פוסט" שאומר שאתה יכול לשלוח requestion AJAX כPOST או GET (אני מעדיף תמיד POST). שאר הפרמטרים הם די מסביר עצמי אם תסתכל על הקוד שוב.

עכשיו אנחנו הולכים לעשות את תסריט AJAX קטן שקורא את הקישור של תגי קישור (<a>) וטוען את הבקשה על כמה אלמנטי div במסמך.

ראשית אנחנו לוקחים HTML רגיל של מסמך PHP שייראה כך

  <DOCTYPE HTML PUBLIC! "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
 <head>
	 בדיקת קישור אייאקס <title> </ a>
	 <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
	 <script type="text/javascript" src="jquery-1.2.6.min.js"> </ script>	
 </ ראש>
 <body>
 </ Body> </ html> 

עכשיו בואו נוסיף כמה קישורים למסמך. לסוג תפריט טוב יותר של מראה אנו נשתמש UL> LI וקישור. שייראה כך

  <ul id="nav">
	 <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> טען ב1 דיב </ a> </ p>
	 <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> טען בדיב 2 </ a> </ p>
	 <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> טען בדיב 3 </ a> </ p>
	 <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> טען בדיב 4 </ a> </ p>
 </ Ul> 

כפי שניתן לראות יש לנו לשים קישורים באלמנטים רשימה בתוך אובייקט רשימה לא מסודרת. קח מבט מקרוב על המאפיינים של תג <a>. יש לנו href, כיתה וrel תכונה שנראית דבר שונה מאשר קישור רגיל. אם אתה רואה, יש לנו נתון תכונה rel לכמה שמות div כלומר div1, div2 .. כן הלאה. זה אומר שאנחנו רוצים את התגובה של href להיות טעונים לתוך divs אלה. איך לעשות את זה? בואו נוסיף divs האלה ראשון

  <span> DIV -1 </ a>
 <div id="div1" class="content_loader"> </ p>
 <span> DIV -2 </ a>
 <div id="div2" class="content_loader"> </ p>
 <span> DIV -3 </ a>
 <div id="div3" class="content_loader"> </ p>
 <span> DIV -4 </ a>
 <div id="div4" class="content_loader"> </ p> 

והחלק האמיתי עכשיו - יש לנו לתת את הקישורים בכיתה "ajax_link". אנחנו רק נוסיף דינמי פעולות ajax רק קישורים שיש שם מחלקה שנקראת "ajax_link". לעזאזל, לא את כל הקישורים מעמוד שיש לנו פעולות AJAX, נכון?

אז, על עומס מסמך היינו לעשות את זה.

  . ready ( function ( ) { $ (מסמך). מוכנים (פונקציה () {
         ) . click ( function ( ) { $ ("A.ajax_link"). לחץ (פונקציה () {
             this ) ; $ Current_link = $ (זה);
             $. AJAX ({
                 , סוג: "הודעה",
                 ( "href" ) , כתובת אתר:. $ current_link attr ("href"),
                 ( e ) { הצלחה: פונקציה (ה) {
                     + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (ה);
                 }
             });
             ; בתמורת שווא;
         });
     }); 

תן לי להסביר את התסריט קצת. אירוע document.ready הוא אירוע אשר מופעל בטעינה של דף. ואז אנחנו הקצאה כלשהי של קודים באירוע לחיצה על הקישורים שיש להם מעמד "ajax_link". עושים את זה $ current_link = $ (זה); מאפשר לי להיות אובייקט הקישור הנוכחי זמין בתוך הפונקציה של קריאה חוזרת. ויש לנו

$ ("#" + $ Current_link.attr ("rel")). Html (ה)

מה שאומר $ ("div_id") HTML (server_response) ויש לנו להגדיר את פרמטר URL של פונקצית $ AJAX דינמי עם כתובת אתר:.. current_link.attr $ ("href"). אז עכשיו כל האמצעים האלה, "כל אלה שיש להם הקישורים בכיתה" ajax_link "- הוספת מטפל אירוע לחץ - ולאחר מכן לבצע בקשת AJAX לוקחת את קישורי href poperty ולטעון את התגובה לdiv id שתואם את" מאפיין rel "של לקשר ". וחזרת השווא מונעת עבודת הקישור כמו קישור רגיל

רוצים לראות אותו בפעולה? הנה זה הולך.

ואתה יכול להוריד את המקור גם כן.

בחלק הבא של המדריך הקטן הזה אנחנו ניתן יהיו להשתמש באותו הדבר, אבל עם קצת נחמה.

החלת שיטה קלה יותר

כל מה שנשאר כמעט אותו הדבר. אנחנו פשוט לשנות את שיטת AJAX כאן. אז במקום לכתוב את כל אגף AJAX $. אנחנו יכולים להשיג את אותו דבר עם באות.

  . ready ( function ( ) { $ (מסמך). מוכנים (פונקציה () {
 ) . click ( function ( ) { $ ("A.ajax_link"). לחץ (פונקציה () {
 + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (זה) attr ("rel")) עומס ($ (זה) attr ("href").);
 ; בתמורת שווא;
 });
 }); 

זה הרבה פחות מסובך עכשיו, נכון? שיטת העומס טוענת את תוכן AJAX בתוך הרכיב שהוא מחובר אליו. אם $ ("# somediv_id"). עומס ("mypage.php"), הוא ינסה לטעון את התוכן של mypage.php בו. די פשוט, הא? אבל אני מציע לך להתרגל לשיטה העיקרית (המוצג בחלק הראשון).

בקובץ zip יש קובץ נוסף שנקרא ajax2.php אשר מדגים methos זה שיש לו את אותה תוצאה.

אז, AJAX היא לא קשה כמו שזה נשמע, נכון? כאשר אתה הופך מאוד רהוט עם פעולות AJAX, תוכל ליצור קסמים.

תודה על קריאה אגב.

עם ההתקדמות של DHTML, אנחנו יכולים לעשות הרבה דברים עם רק כהרף עין. כולנו השתמשנו בשכבות חלון או lightboxes בשלב מסוים של זמן בימים אלה. אבל לפעמים הוא הופך להיות נחוץ כדי לחסום חלק מהעמוד או כל אלמנט מסוים, למשל DIV כך שאנשים לא מסוגלים לשחק עם הדף שלך כאשר אתה לא רוצה אותם. כמו שאם מישהו עושה תגובה בתיבת תגובות, אתה לא רוצה אנשים ללחוץ על הערות אחרות בעת מילוי אותו. מה לעשות אז? ובכן יש פתרון jQuery מסודר. אתה פשוט לחסום אותם בזמן הערות. וייתכן שיש הרבה מקרים כמו שכאשר אנו רוצים לחסום את הדף כולו או אלמנטים מסוימים. jQuery BlockUI בא להציל.

הוא היה עשוי בתחילה כדי לחסום את הדף כולו עם הודעה אבל עכשיו, זה יכול לחסום את רכיב דף או אפילו להראות כמו נהמת הודעה. בדקו את דוגמאות כאן. התיעוד הוא סכום מאוד נחמד והוגן של דוגמאות קוד מקבלות. השתמש בו ביישום שלך. אם יש לך בעיות להשתמש בו, להשאיר לי תגובה כאן.

עושה דף תיק עם פלאש באתר האינטרנט שלך הפך להיות סוג של מיושן. בימים אלה עם מכונות מהירות יותר ודפדפן הדור חדש באמת יכולים לבעוט בכמה ישבנים עם Javascript ו-CSS. JQuery יש דרך מאוד מסודרת כדי להתמודד עם כמה אפקטים. כל הנפשות נובעות מבסיס השיטה שנקראת "חי". הוא מפיח, tweens את המאפיינים של אלמנטי DOM. כדי להפוך סיפור הארוך קצר תסתכל על זה.

אז, יש לך כבר לחץ וראה נכון? אוקי, אם אתה מסתכל על הקוד, זה פשוט למדי.

  $ (מסמך). מוכנים (פונקציה () {
		 var hover_in_easing = "easeOutExpo";
		 var hover_out_easing = "easeOutBounce";
		 . $ (". Info_container") מראה ();
		 $ ("Div.portfolio_div"). לרחף (פונקציה () {
			 . (זה) מוצא $ ("info_container.") הנפשת ({עליון: "0px"}, {משך: 400, הקלה: hover_in_easing}).
		 }, פונקציה () {
			 . (זה) מוצא $ ("info_container.") הנפשת ({עליון: "100px"}, {משך: 500, הקלה: hover_out_easing}).
		 });
                 / / 100 px הוא בגודל של המסכה
	 }); 

היא משתמשת בפונקצית הנפשת להנפיש את המסכה מעל התמונה שהוסתרה על ידי מיצוב יחסית. ומה עם הקלת תוסף, אנו להשיג את האפקט מגניב חלק של הקפצה כשאתה מרחף החוצה מהתמונה. אתה יכול לשים את כל אלמנטי HTML בתוך DIV info_container כל עוד זה לא ללכת מעבר לגבולות. תראה סגנונות ומאתה תמצא את זה gramatical מאוד. ניתן להתאים אישית את הגודל על ידי שינוי מעמדות div.

הורד את המקור

השראה: http://dibusoft.com/portfolio

אי פעם ראה את הכיתובים שקופים האלה בתמונות? כיתובי poping החוצה מהחלק התחתון או העליון המתאר את התמונה? אני בטוח שיש לך. ישנם הרבה תסריטים כאלה. והנה מגיעה גרסת jQuery האהובה שלנו לכך.

אתה יכול לשים רגיל, טקסט, HTML או כל דבר על שם. פשוט תסתכל בדף הבית של התוסף שלהם וזה די יפה תואר. אין צורך בשום טריקים מגעילים.

http://masterfidgeter.com/projects/captify/

להפוך את דפי התמונות שלך נראים טובים עם זה.

השבוע - מרץ 20,09 jQueryMagic בוחר colorbox jQuery כבחירה של השבוע. כל מה שאתה שמעת הרבה Lightbox, ThickBox, greyboxes ושכבות שונות חלון. זה משתפר במשחרר התוסף החדש ביותר. זה באמת אחד סלעים. באופן מלא להתאמה אישית וקל לשימוש. זה קל משקל ונראה מגניב. יתר על כן חבורה של ירושלים ומוצעת עם הספרייה.

colorbox

עבור לדף הפרויקט כאן.