Mobile App עיצוב / התפתחות למתחילים מדריך jQuery נייד

במהלך 2-3 השנים האחרונות ראינו גידול עצום בדפדפן ובתמיכה במערכת ההפעלה עבור אתרים לנייד. הבולט ביותר של אפל iOS ו- Google פלטפורמות אנדרואיד לעלות על הדעת. אבל אחרים כמו PalmOS ו אוכמן הם עדיין בתערובת. עד לאחרונה זה היה מאוד קשה להתאים נושא סלולרי אחד לתוך כל הפלטפורמות האלה.

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

תכונות ותמיכה במערכת ההפעלה

הסיבה שאני מציע ללמוד jQuery Mobile על כל המסגרות האחרות היא הפשטות. הקוד נבנה על הליבה jQuery ויש לו צוות פעיל של מפתחים כתיבת סקריפטים ועריכת באגים. של תכונות רבות כוללות תמיכה HTML5, אייאקס מופעל קישורים ניווט, ומגע / לסחוב האירוע המטפלים.

התמיכה משתנה בין טלפונים והוא שבור לתרשים של 3 קטגוריות מ- A-C. A הוא הדף שכבת אשר מתגאה תמיכה מלאה של jQuery נייד, B יש הכל מלבד Ajax בעוד C הוא HTML בסיסי עם מעט ל- JavaScript. למרבה המזל רוב מערכות ההפעלה הפופולריות נתמכות במלואן - הוספתי רשימה להלן של כמה דוגמאות.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• טלפון Windows 7
• 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

אם אתה רוצה ללמוד עוד נסה לקרוא בדף המסמכים הרשמי שלהם. זה לא כתוב ב gibberish ו מרגיש ממש קל לעקוב אחריו. עכשיו בואו להתמקד ביסודות של כתיבת דף נייד jQuery וכיצד אנו יכולים לבנות יישום קטן!

תבנית HTML סטנדרטית

כדי לקבל את היישום הראשון הנייד עובד יש תבנית להגדיר אתה צריך להתחיל עם. זה כולל את קוד הבסיס jQuery יחד עם JS ניידים ו- CSS, כל חיצוני מתארח CDN jQuery. עיין בקוד לדוגמה שלי להלן.

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

תג ה- meta הבא X-UA-Compatible רק כוחות Internet Explorer כדי לעבד את ה- HTML זה איטרציה האחרונה. דפדפנים ישנים ובמיוחד ניידים ינסו לעקוף באגים לא מוכרים.

בניית תוכן הגוף

עכשיו זה איפה הנייד jQuery יכול לקבל מסובך. כל דף HTML אינו בהכרח דף אחד באתר לנייד. המסגרת עושה שימוש במאפייני הנתונים של HTML5, אשר ניתן ליצור בגחמה על ידי צירוף נתונים- לפני כן. באופן דומה data-role = "page" ניתן להגדיר מספר divs בקובץ HTML יחיד, נותן לך יותר מעמוד אחד.

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

בדוק את קוד הקוד להלן אם אתה אבוד.

 
 
 
סרגל הכותרת למעלה
 
 
 
הצג דף נוסף??
 
רמז: לחץ על הכפתור למטה!
 
עלינו
 
  
 
 
 
עמוד 2 כאן
 
 
 
רק קצת תוכן נוסף גם כן.
 
אני מתכוון, אתה יכול תחזור בכל זמן.
 
 
   

תסתכל על הקישור עוגן מדף אינדקס לרגע. שים לב הוספתי את התכונה data-role = "כפתור" כדי להגדיר את הקישור כפתור. אבל במקום להשתמש סגנונות ברירת המחדל שאנו כוללים data-theme = "c". זה עובר בין 1 מתוך 5 (נושאים a-e) תבניות אשר מגיעים ארוז כברירת מחדל כמו סגנונות CSS בתוך jQ Mobile.

הכפתור שלי משתרע גם על רוחב הדף כולו. כדי להסיר את ההתנהגות עלינו להגדיר את הרכיב מחלון לתצוגה מוטבעת. התכונה לשם כך היא data-inline = "true" אשר תוכל לצרף לכל כפתור עוגן.

כותרת ותחתונה ברים

לאורך החלק העליון והתחתון של היישומים שלך, עליך לצרף תוכן כותרת עליונה ותחתונה. סגנון עיצוב זה מיוחס לעתים קרובות לאפליקציות iOS שהפכו פופולריות לראשונה באמצעות Apple App Store של אפל. jQ Mobile משתמשת בתכונות של תפקיד נתונים כדי להגדיר את הכותרת, הכותרת התחתונה ותוכן הדף. בואו ניקח מבט קצר על אזורים אלה.

למעלה לחצנים בר

כברירת מחדל, הסרגל העליון תומך בקבוצה של שני קישורים (2) באופן דומה לאפליקציות אחרות לנייד. ברירת המחדל של iOS באמצעות “חזור” כפתור שמאלה ולעתים קרובות “אפשרויות” או “config” בצד ימין.

 
 הגדרות 
עמוד 2 כאן
 
 

הקוד לעיל הוא רק התמקדות מיכל div עבור דף אודות שלנו יחד עם תוכן כותרת. מאפיין ה- HTML הנוסף data-add-back-btn = "true" יפעל רק כאשר יתווסף לתפקיד של נתוני הדף. המטרה היא לכלול באופן אוטומטי לחצן 'הקודם' שעובד בדומה ללחצן הקודם של הדפדפן.

יכולנו להוסיף לחצן חזרה באופן ידני עם קוד דומה, כפי שהשתמשנו באזור התוכן. אבל אני מרגיש את זה לוקח הרבה יותר זמן ההתקנה במיוחד על מספר עמודים. כל קישורי העוגן שבקטע הכותרת יהיו ברירת המחדל למיקומי הלחצנים שמאלה / ימינה. על ידי שימוש ב class = "ui-btn-right" זה מחדש מיקומו כפתור ההגדרות שלי, כך שיש מקום פנוי עבור כפתור הקודם. גם אני משתמש סגנונות נושא משני לתת לו כמה spunk נוסף!

ניווט תחתונה

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

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

• תצוגה מקדימה של הדגמה חיה

אז הנה כמה קוד תחתונה עבור סעיף על דף. data-role = "navbar" יש להוסיף אל הרכיב המכיל רשימה לא מסודרת ולא את הרכיב UL עצמו. כל קישור ברשימה מטופל כמו סרגל לשונית, אשר לאחר מכן מחולק באופן שווה על בסיס המספר הכולל של קישורים. המעמד הנוסף של ui-body-b רק מוסיפה אפקטים אסתטיים כשאנו עוברים בין הסגנונות הזמינים.

אם אתה שם לב על הכפתור הראשון יש לי את התכונה data-direction = "לאחור". למרות שאני יכול להשתמש בלחצן הכפתור האחורי כמו קודם כדי לחזור אל דף הבית, אני במקום זאת נעשה שימוש בדף מזהה של #אינדקס. כברירת מחדל את חלון היישום יהיה מעבר ימינה אשר נראה די tacky מאז אתה מצפה אנימציה לנוע אחורנית. אתה יכול לשחק עם עוד יותר של אלה אפקטים אנימציה אם יש לך זמן. בדוק את דף פרטי המעברים בתיעוד jQuery.

אייאקס & דפים דינמיים

הקטע הראשון באמת פתח את נקודות המפתח לבניית אפליקציה לנייד עם jQuery. אבל אני רוצה להתחיל יישום חדש אשר טוען נתונים מדף חיצוני. אני יהיה באמצעות סקריפט PHP פשוט מאוד להשיג את $ _REQUEST [] משתנה ולהציג Dribbble ירו קטן בהתאם. Screenshow להלן צריך לתת לך מושג מה אנחנו הולכים לבנות.

ראשית אעשה דף index.html מוגדר על תבנית ברירת המחדל. במסך הבית הזה אני משתמש בהגדרת תצוגת רשימה כדי להציג כל קישור לפי הסדר. זה נעשה באזור התוכן עם data-role = "listview" תכונה על מיכל הרשימה. חיתוך את אותו הדבר הכותרת כמו קודם, הוספתי את כל הקוד שלי מתוך דף זה אינדקס חדש להלן.

 
 
 
אוקטובר 2011 יריות
 
 
 
 
תמונה ראשונה
 
תמונה שנייה
 
תמונה שלישית
 
תמונה רביעית
 
 
  
   

כל אחד מהקישורים העוגן בתצוגת הרשימה שלי מצביע על אותו קובץ - index.php. אבל אנחנו עוברים בפרמטר imgid כמשתנה בקשה. על הקובץ image.php אנחנו לוקחים את תעודת הזהות ולבדוק את זה נגד 4 ערכים מוגדרים מראש. אם כל התאמה אנו משתמשים כתובת תמונה תואמת וכותרת, אחרת אנחנו רק להציג מחדל Dribbble ירו.

Image Loader Script

התסריט image.php עדיין מכיל את תבנית ברירת המחדל של jQuery לנייד שנוספה בקוד. זה למעשה מניות כותרת דומה מאוד תחתונה, למעט תוספת של התכונה הקישור האחורי שלנו data-add-back-btn = "true". שים לב כפתור זה יופיע רק אם אנחנו מגיעים index.html הראשון! נסו לטעון ישירות את image.php ושום דבר לא יופיע מכיוון שאין “חזור” לעבור ל.

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

הכל נראה פשוט למדי - אפילו PHP PHP טירון צריך להיות מסוגל לעקוב יחד! ואם אתה לא מבין שזה לא חשוב בקוד jQuery בכל מקרה, אז אל תדאג. אנחנו צריכים לעבור עכשיו ולעיין בתבנית שבניתי בתוך דף חדש זה. כל קוד HTML נוסף לאחר בלוק PHP כולו לעיל. השתמשתי בתעודת הזהות של “תמונות” עבור מיכל ואפילו הגדרת הכותרת לשנות עם כל תמונה חדשה.

 
 
 
 
 
 הצג את המקור
 
 
  
 

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

עיצוב מפואר עם רשימה ממוזערת של תמונות

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

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

בדוק את הקוד הבא ואת דוגמה הדגמה שלי כדי לראות למה אני מתכוון.

[הצג הדגמה חיה]

 
 
  
משימות Wunderkit
 
מאת סבסטיאן שיירר
 
  
Colleeeeeeeeeeeeege
 
מאת סקוט היל
 
  
פורום פורום עבור Facebook
 
יונה זמיר
 
  
טוויטר
 
מאת סם ג'ונס
 
 
 

כיתות עבור ui-li-title ו ui-li-desc מתווספים כברירת מחדל לגיליון הסגנונות jQuery Mobile. זה דומה לשיעור התמונה ui-li-thumb אשר באופן אוטומטי מחדש גדלים כל שורת תצוגת רשימה לפי גובה התמונה. עכשיו מכאן אתה יכול לבנות יותר על frontend עם אנימציות, אפקטים דף, גליונות סגנונות, וכו '.

לחלופין, תוכל להתחיל לבנות מערכת backend כדי להעלות תמונות חדשות באופן אוטומטי לקצץ תמונות ממוזערות לכלול ברשימה. יש כל כך הרבה גמישות עם jQuery נייד אתה כמעט לא יכול תווית זה אך ורק כמו ספריית JavaScript. זה יותר של HTML5 / CSS / jQuery כולו מסגרת לבניית יישומים ניידים מהירה וניתן להרחבה.

סיכום

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

אבל כמו בחודשים מראש מפתחי אינטרנט בטוחים להרים על המגמה. יישומים ניידים ואפילו פריסות אינטרנט ניידים גדלים בפופולאריות עם הגידול העצום בסמארטפונים. למפתחי אינטרנט אין זמן ללמוד שפת תכנות מלאה לבניית אפליקציות Android / iOS. לכן jQuery Mobile היא חלופה רזה הכוללת תמיכה עבור רוב של תעשיית התוכנה הניידת, וממשיך לגדול כל יום עם קהילת מפתח פעיל.