עיצוב יישומים ניידים / התפתחות בניין ניווט עם jQuery

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

במדריך זה אני אראה איך אתה יכול לבנות מבוסס אינטרנט מבוססי אינטרנט / webapp. נשתמש בשאילתות מדיה של CSS3 למיקוד למכשירים ספציפיים ולרזולוציות מסך. פלוס קצת jQuery מסייע להנפיש את התפריט לטעון תוכן דף חיצוני באמצעות שיחות Ajax. אפילו יותר מכך, הפריסה יכולה אפילו להתרחב כך שתוצג כהלכה בדפדפנים רגילים של שולחן העבודה, כגון Chrome או Firefox.

• דמו ישיר
• קוד מקור

הגדרת מבנה הדף

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

X-UA-Compatible משמש לתיאור האופן שבו המסמך שלך אמור להופיע בדפדפנים מסוימים. זה תרחיש מעניין כאשר קידוד ב- HTML5, אז לא הייתי מודאג יותר מדי על זה. עם זאת meta נוף תג חשוב מאוד. זה קובע את חלון הדפדפן הנייד 100% במקום אפקט זום רגיל.

כמו כן, ניתן להשבית זום משתמש עם ערך התוכן user-scalable = no. אבל במקרה זה אנחנו רק רוצים להגדיר את רוחב המסך המלא להיות זהה רוחב המכשיר שלנו. תגי App האינטרנט של אפל יאפשרו לאתר להישמר כסמל מסך הבית ל- iPhone או ל- iPod Touch. לא הכרחי לחלוטין אבל בהחלט שווה שיש.

תוכן גוף פנימי

בתוך תג הגוף אני כבר הגדרת עטיפה div עם מזהה #w. בפנים שברתי את הפריסה לשתי דיירות נוספות באמצעות תעודות זהות #pagebody ו #navmenu. רוחב הדף כולו מוגבל ל -640 פיקסלים על ידי בחירה, כך שהפריסה תתדרג למספר קפדני.

 
  
HK נייד
 
 
 
ברוכים הבאים לאתר לנייד!
 
 
 
 
 
קישורים לתפריט
 
 
 
בית
 
עלינו
 
פרסם
 
כתוב לנו
 
אנשי קשר
 
מדיניות פרטיות
 
 
 

תפריט הניווט מקבל ערך z-index נמוך יותר כך #pagebody הוא תמיד על העליונה. זה חיוני מאז קוד JavaScript יחליק על גוף הדף מספר מסוים של פיקסלים לחשוף את הניווט מתחת.

השתמשתי סמל hash (#) מול כל דף. HTML כדי לעצור כמה התנהגות גרועה ספארי נייד. בכל פעם שתלחץ על קישור יופיע סרגל כתובת האתר ודוחף את התוכן. אבל כאשר מתייחסים ID לא נטען מחדש אלא באמצעות שיחות JavaScript.

מיקום CSS

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

/ ** @ group core body ** / #w #pagebody עמדה: יחסית; משמאל: 0; max-width: 640px; min-width: 320px; z-index: 99999;  #w #navmenu background: # 475566; גובה: 100%; בלוק תצוגה; מיקום: קבוע; רוחב: 300px; משמאל: 0px; top: 0px; z-index: 0; 

פלח עליון זה מגדיר סגנונות עבור שני חלקי הדף. תפריט הניווט שלנו הוא ברוחב 300 פיקסלים בלבד, ולכן זה משאיר קצת מקום לתוכן הדף עדיין נראה. לחצן התפריט הפתוח / סגור ממוקם גם הוא ישירות בצד שמאל ותמיד נגיש. היצירה החשובה כאן היא ערך הנכס z- מדד ושימוש מיקום: קבוע; על navmenu שלנו.

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

/ ** @ group header ** / #w #pagebody header # toolbarnav display: block; מיקום: קבוע; משמאל: 0px; top: 0px; z-index: 9999; רקע: # 0b1851 כתובת האתר ('img / tabbar-solid-bg.png') למעלה שמאל לא לחזור; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; גובה: 44px; רוחב: 100%; max-width: 640px;  #w #pagebody כותרת # toolbarnav h1 text-align: center; padding-top: 10px; padding-right: 40px; צבע: # e6e8f2; מודגש; font-size: 2.1em; טקסט בצל: 1px 1px 0px # 313131; 

כללים לנייד

קל להבחין שאני משתמש גם בתמונת רקע למרקם הכחול של כותרת העמוד. זה גודל ב 640 × 44 פיקסלים לשמור עם מבנה הפריסה עקבית. אבל אני גם פיתחה תמונה @ 2x עבור iPhone / iPad מציג הרשתית. תוכל לראות את שתי התמונות למטה, או לתפוס אותן מקוד המקור של הדגמה שלי.

• System/demo/img/[email protected]
• System/demo/img/[email protected]

אני מגדיר את ה- CSS לנייד עבור פונקציונליות זו בקובץ אחר בשם Respive.css. הוא מכיל שתי שאילתות מדיה אשר מחליפים את סרגל הכותרת bg ואת סמל לחצן התפריט עבור התקני רשתית.

/ ** מסך רשתית ** / @media מסך בלבד ו- (-webkit-min-device-pixel-ratio: 2), רק מסך ו- (min - moz-device-pixel-ratio: 1.5), רק מסך ו- min-device-pixel-ratio: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') למעלה ללא שמאל; background-size: 640px 44px;  #w # pagebody header # menu-btn background: url ('img/[email protected] ') no-repeat; background-size: 53px 30px; 

עיצוב חצים בתפריט

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

#w # navmenu ul li a :: after content: "; display: block; width: 6px; height: 6px; border-right: 3px solid # d0d0d8; border-top: 3px solid # d0d0d8; : סיבוב (45deg); סיבוב (45deg); סיבוב (45deg); -o-transform: סיבוב (45deg), להפוך: לסובב (45deg); #w # navmenu ul li a: hover :: after border-color: # cad0e6;

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

אבל עכשיו בואו לזוז לתוך חתיכות ופיסות קוד JavaScript. זכור זה לדרוש לכלול את הספרייה jQuery עבור הקוד שלי לפעול כראוי.

jQuery אנימציה

כתיבת קודים מותאמים אישית אלה יצרתי מסמך חדש בשם script.js. אתה מוזמן לכתוב את אלה ישירות > תגים או להוריד את הדוגמה שלי מקוד המקור של ההדגמה.

$ var ($) (= "navmenu"); var topbar = $ ("# toolbarnav"); var תוכן = $ (" # width): var viewport = width: $ (window) .width (), height: $ (window) .height (); / אחזור משתנים כמו // Viewport.width / viewport.height 

(: left: "290px", Duration: 300, queue: false); pagebody.animate (left: "290px", משך: 300 , תור: שקר);); (left: 0px, Duration: 180, queue: false); pagebody.animate (left: 0px, משך: 180, תור: false);); 

(// e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = '' 

Closeeme (); $ (פונקציה () topbar.css ("top", "0px"); window.scrollTo (0, 1););

content.html (imgloader); setTimeout (function () content.load (linkhtmlurl, function () / * no callback * /), 1200);