ודא שהסמן שלך נמצא במיקום בעמוד שבו ברצונך להוסיף את רכיב ה- Widget.
עודכן לאחרונה בתאריך
30 באפריל 2026
למד כיצד להוסיף פונקציונליות דמוית יישום לפרויקטי אינטרנט של Dreamweaver באמצעות רכיבי Widget של jQuery לנייד ולממשק המשתמש. הוסף רכיבים מסוג אקורדיון, כרטיסיות, מחוונים ותיבות השלמה אוטומטית מבלי לכתוב קוד.
רכיבי Widget הם יישומי אינטרנט קטנים שנכתבים בשפות כגון DHTML ו-JavaScript וניתן להוסיף אותם לדף האינטרנט ולהפעיל אותם בתוכו. בין היתר, רכיבי Widget באינטרנט מסייעים לספק אופן שבו ניתן לחקות חווייה של שולחן עבודה בדף אינטרנט.
רכיבי Widget של ממשק משתמש של jQuery, כגון Accordion, Tabs, Datepicker, Slider ו- Autocomplete, מסייעים להביא את חוויית שולחן העבודה לאינטרנט.
לדוגמה, ניתן להשתמש ברכיב ה- Widget של Tabs כדי לחקות את תכונת הכרטיסיות בתיבות דו-שיח ביישומי שולחן עבודה.
Dreamweaver כולל גם אוסף של רכיבי widget של jQuery לנייד שניתן להשתמש בהם כדי ליצור רכיבי טופס ותכונות אחרות שנמצאות בשימוש נפוץ ביישומי אינטרנט להתקנים ניידים. לדוגמה, ניתן להשתמש ברכיב Widget של jQuery לנייד כדי להוסיף אלמנטים של טופס ידידותיים למכשירים ניידים, כגון אזורי טקסט ותיבות סימון.
הוספת רכיב Widget של jQuery
כאשר אתה מוסיף רכיב Widget של jQuery, הרכיבים הבאים מתווספים לקוד באופן אוטומטי:
- הפניות לכל הקבצים התלויים
- תג Script שכולל jQuery API עבור רכיב ה- Widget רכיבי Widget נוספים יתווספו לאותו תג Script.
לקבלת מידע נוסף על רכיבי Widget של jQuery, עיינו בכתובת http://jqueryui.com/demos/
פתק
עבור אפקטים של jQuery, לא נוספת הפניה חיצונית לקובץ jquery-1.8.24.min.js, כיוון שקובץ זה נכלל אוטומטית בעת הוספת אפקט.
בחר Insert > jQuery UI ולאחר מכן בחר את רכיב ה- Widget שברצונך להוסיף.
אם אתה משתמש בחלונית Insert, רכיבי ה- Widget יימצאו במקטע jQuery UI של החלונית Insert.
כאשר אתה בוחר רכיב Widget של jQuery, המאפיינים שלו מוצגים בחלונית Properties.
באפשרותך ליצור תצוגה מקדימה של רכיבי Widget של jQuery בתצוגה Live או בדפדפן שתומך ברכיבי Widget של jQuery.
שינוי רכיבי Widget של jQuery
בחר את רכיב ה- Widget שברצונך לשנות.
בחלונית Properties, שנה את המאפיינים.
לדוגמה, כדי להוסיף כרטיסייה נוספת לרכיב ה- Widget של Tabs, בחר את רכיב ה- Widget ולחץ על "+" בחלונית Properties.
הוספת רכיבי Widget של jQuery לנייד
כדי להשתמש באחד מרכיבי ה-Widget של jQuery לנייד, יש להגדיר תחילה דף של jQuery Mobile על-ידי בחירת Insert > jQuery Mobile > Page.
נפתחת תיבת הדו-שיח jQuery Mobile Files.
יש לשנות את הגדרות ברירת המחדל בתיבת הדו-שיח jQuery Mobile files או להשאיר את ההגדרות של נתיבי ברירת המחדל וללחוץ על OK.
בתיבת הדו-שיח Page שנפתחת, הקלד שם בשדה ID וסמן או בטל את הסימון בתיבות הסימון לצד Header ו-Footer כדי לבחור אם להשתמש בכותרת עליונה ובכותרת תחתונה בדף לנייד.
בדף שנפתח ב-Dreamweaver, יש להחליף את הטקסט שמופיע בכותרת העליונה, בתוכן, ובכותרת התחתונה ולהזין במקומו את הטקסט הרצוי, את התמונות הרצויות ורכיבים רצויים אחרים עבור הדף לנייד.
פתק
הזינו טקסטים קצרים ותמונות קטנות שמתאימים להצגה במסכים קטנים של מכשירים ניידים.
הוסיפו עוד רכיבי Widget של jQuery לנייד לפי הצורך.
הציגו את הדף בתצוגה מקדימה במכשיר.
לקבלת מידע נוסף, עיינו במאמר על תצוגה מקדימה של דפי אינטרנט ב-Dreamweaver במכשירים מרובים.
שמרו את הדף של jQuery לנייד ואת כל הקבצים הקשורים.
עיצובי jQuery mobile לא מוחלים עם גרסאות חדשות יותר של jQuery
בעיה
עיצובי jQuery Mobile, כולל Swatches (דוגמיות צבע) ולוחות, לא מוחלים בעת שימוש בגרסאות חדשות יותר של jQuery, כמו jQuery 3.7.1. כתוצאה מכך, העיבוד של ערכות נושא של jquery עלול להתבצע בצורה לא תקינה וההתנהגות שלהן עלולה להיות לא צפויה.
סיבה
jQuery Mobile הוצא משימוש ואינו מתוחזק יותר באופן פעיל. הוא אינו תומך בגרסאות jQuery 3.x, מה שמוביל לבעיות תאימות עם מהדורות חדשות יותר.
פיתרון/מעקף
כדי להמשיך להשתמש בתכונות jQuery Mobile (עיצובים, Swatches (דוגמיות צבע) ולוחות), השתמשו בגרסה תואמת וישנה יותר של jQuery.
גרסה מומלצת: jQuery 1.11.1 (או גרסאות נתמכות אחרות של 1.x)
דוגמה
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
הוסיפו גרסת jQuery נתמכת. לדוגמה, 1.11.1.
ודאו שספריית jQuery Mobile נטענת לאחר תסריט jQuery.
טענו מחדש את הדף ובדקו שהעיצובים, ה-Swatches (דוגמיות צבע) והלוחות מעובדים כראוי.
פתק
מכיוון ש-jQuery Mobile הוצא משימוש ואינו מעודכן יותר, המשיכו להשתמש בגרסת jQuery מדור קודם תואמת עבור פרויקטי jQuery Mobile קיימים.
בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.
