jQuery mobile : לעבוד עם Toolbars

(השיעור שלהלן מבוסס על פרק 3 מהספר: jQuery Mobile Web Development Essentials)

כבר ראינו כיצד ניתן להוסיף header לדף שלנו, לדוגמא:

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

קיימים רק שני מקומות להוספת הכפתורים ב – header שהן ימין ושמאל (המרכז "תפוס" עבור טקסט).
התוצאה:
Buttons

 

 

 

 

 

 

 

 

לא ניתן לשלוט כך בתצוגת הכפתורים בצורה מלאה.
אם רוצים להציג כפתור יחיד – הימני למשל, לא ניתן "למחוק" את הכפתור הראשון:

Buttons_1

 

 

 

 

 

הכפתור עדיין מוצג בצד שמאל.
כדי להציג אותו בימין, צריך להוסיף לו את מחלקה (class) של css.

התוצאה:

Buttons_2

 

 

 

 

 

 

 

 

אפשר להוסיף תמונה קטנה (icon) לכפתור.
ל – JQM אוסף של תמונות כאלה מובנות:

והתוצאה:

Buttons_3

 

 

 

 

 

 

 

Back

טלפוני Android מכילים כפתור Back.
לחיצה על הכפתור מובילה אל המסכים באפליקציה שהוצגו קודם.
JQM מחקה פעולה זו בדפדפן.
לעומת זאת, טלפוני iOS לא מכילים כפתור כזה, ואז אפשר להציג להם כפתור back.
JQM מכילה אופציה אוטומטית להצגת כפתור back (כלומר הכפתור יוצג רק ב iOS).
הנה כך:

בעוד שבטלפוני Android לא תראו את הכפתור, ב iOS זה אמור להיראות כך:

Auto_Back

 

 

 

 

כפתורים ב – footer

דומה למדי לכפתורים ב – header.
ההבדלים:

  • ב footer אין טקסט, ולכן הכפתורים נערמים בצד שמאל.
  • כדי לרווח אותם מעט, אפשר להוסיף class="ui-bar" ל – footer

דוגמא:

 

fixed position

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

אפשר לעשות זאת באמצעות התכונות:

הנה דוגמא:
(הדוגמא והתכונות הנ"ל לא יעבדו בסימולטור opera-mini אך יוצגו נכון במקומות האחרים):

אפשר לגלגל את הדף למעלה ולמטה והכותרות יישארו במקומם.

 NavBars

ל JQM יש פתרון מובנה ל footer עם כפתורים, הנקרא NavBar.
הנה דוגמא:

התוצאה:

navbar_1

 

 

 

 

 

במקרה שלמעלה, הקשתי על הכפתור האמצעי (שלא מוביל כרגע לשום מקום) והוא מוצג כ – current (הכפתור הנוכחי).

נסיים בדוגמא מלאה עם NavBar ובו שלושה כפתורים המוליכים לשלושה דפים.
בדוגמא זו, ה NavBar בשלושת הדפים מכיל את התכונה ui-state-persist (מאפשרת ל footer להיות קבוע אם מוסיפים אנימציות, שאותן נכיר בהמשך):

 


כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *