בתצוגה Design או Code של מסמך Dreamweaver, בחר את הרכיב שעליו ברצונך להחיל אפקט של jQuery.
עצב אתרי אינטרנט מרתקים באמצעות אפקטים מגניבים של jQuery. השילוב של Dreamweaver עם jQuery מאפשר לך לכלול אפקטים כגון מחוונים ללא צורך בכתיבת קוד.
הוספת אפקטים של jQuery
בחר Windows > Behaviors כדי לפתוח את החלונית Behaviors.
לחצו על סמל הפלוס, לחצו על Effects, ולאחר מכן לחצו על האפקט הנדרש.
תוצג חלונית ההתאמה האישית שכוללת את ההגדרות עבור האפקט שנבחר.
ציין הגדרות, כגון רכיב המטרה שעליו יש להחיל את האפקט ומשך הזמן שהאפקט יפעל.
רכיב המטרה יכול להיות זהה לרכיב שבחרת בהתחלה או רכיב אחר בעמוד. לדוגמה, אם ברצונך שמשתמשים ילחצו על רכיב א' כדי להציג או להסתיר רכיב ב', רכיב ב' הוא רכיב המטרה.
כדי להוסיף אפקטים רבים של jQuery, חזור על השלבים שלעיל.
כאשר אתה בוחר אפקטים רבים, Dreamweaver מחיל את האפקטים בסדר שבו הם מוצגים בחלונית Behaviors. כדי לשנות את הסדר של האפקטים, השתמש בלחצני החיצים בחלקה העליון של החלונית.
Dreamweaver מוסיף את הקוד הרלוונטי באופן אוטומטי למסמך. לדוגמה, אם בחרת באפקט Fade, הקוד הבא יתווסף למסמך:
- הפניות לקבצים חיצוניים עבור הקבצים הנלווים הנדרשים לפעולה של אפקטי jQuery:
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
- הקוד הבא יוחל על הרכיב בתג Body:
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
- יתווסף לו תג Script עם הקוד הבא:
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
אפקטים מבוססי אירוע של jQuery
כאשר אתה מחיל אפקט של jQuery, כברירת מחדל, הוא מוקצה לאירוע onClick. באפשרותך לשנות את האירוע המפעיל עבור האפקט בחלונית Behaviors.
בחר את רכיב העמוד הנדרש.
בחלונית Windows > Behaviors לחץ על הסמל של Show Set Events.
לחץ על השורה המתאימה לאפקט הקיים כעת. שים לב שהעמודה הראשונה הופכת לרשימה נפתחת שבה מוצגים האירועים שבאפשרותך לבחור מביניהם.
לחץ על האירוע הנדרש.
הסרת אפקטים של jQuery
בחר את רכיב העמוד הנדרש.
בחלונית Behaviors מפורטים כל האפקטים שקיימים כעת ברכיב העמוד שנבחר.
לחצו על האפקט שברצונכם למחוק ולאחר מכן לחצו על סמל המחיקה.
בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.