למד כיצד להוסיף פונקציונליות דמוית יישום לפרויקטי אינטרנט של 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, כיוון שקובץ זה נכלל אוטומטית בעת הוספת אפקט.

  1. ודא שהסמן שלך נמצא במיקום בדף שבו ברצונך להוסיף את רכיב ה-Widget.

  2. בחר Insert‏ >‏ jQuery UI ולאחר מכן בחר את רכיב ה-Widget שברצונך להוסיף.

    אם אתה משתמש בחלונית Insert, רכיבי ה-Widget יימצאו במקטע jQuery UI של החלונית Insert.

כאשר אתה בוחר רכיב Widget של jQuery, המאפיינים שלו מוצגים בחלונית Properties.

באפשרותך ליצור תצוגה מקדימה של רכיבי Widget של jQuery בתצוגה Live או בדפדפן שתומך ברכיבי Widget של jQuery.

שינוי רכיבי Widget של jQuery

  1. בחר את רכיב ה-Widget שברצונך לשנות.

  2. בחלונית Properties, שנה את המאפיינים.

    לדוגמה, כדי להוסיף כרטיסייה נוספת לרכיב ה-Widget‏ של Tabs, בחר את רכיב ה-Widget ולחץ על "+" בחלונית Properties.

הוספת רכיבי Widget של jQuery לנייד

  1. על מנת שתוכל להשתמש באחד מרכיבי ה-Widget של jQuery לנייד, עליך להגדיר תחילה דף jQuery Mobile על-ידי בחירת Insert >‏ jQuery Mobile >‏ Page.

    נפתחת תיבת הדו-שיח jQuery Mobile Files.

    תיבת הדו-שיח jQuery Mobile Files
    תיבת הדו-שיח jQuery Mobile Files

  2. שנה את הגדרות ברירת המחדל בתיבת הדו-שיח jQuery Mobile files או השאר את ההגדרות של נתיבי ברירת המחדל ולחץ על OK.

  3. בתיבת הדו-שיח Page שנפתחת, הקלד שם בשדה ID וסמן או בטל את הסימון בתיבות הסימון לצד Header ו-Footer כדי לבחור אם להשתמש בכותרת עליונה ובכותרת תחתונה בדף לנייד.

    תיבת הדו-שיח Page
    תיבת הדו-שיח Page

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

    הערה:

    הזן טקסטים קצרים ותמונות קטנות שמתאימים להצגה במסכים קטנים של התקנים ניידים.

  5. הוסף עוד רכיבי Widget של jQuery לנייד לפי הצורך.

  6. הצג את הדף בתצוגה מקדימה בהתקן.

    לקבלת מידע נוסף, ראה תצוגה מקדימה של דפי אינטרנט ב-Dreamweaver בהתקנים מרובים.

  7. שמור את הדף של jQuery לנייד ואת כל הקבצים הקשורים.

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת