עיצוב יישומים ניידים / התפתחות אישית ערכות נושא עם jQuery נייד
ב jQuery הנייד שלנו קודם לכן היה לי הציג הרבה של המסגרת הבסיסית ואיך ללכת על הגדרת האתר הראשון שלך. הספרייה JS הוא קל משקל וקל טנדר לגבי קשיי למידה. יש גם הגנרית CSS styleheet כלול עם הקבצים, כך שתוכל להתאים אישית את האלמנטים בפריסה שלך.
עבור קטע זה השני אני רוצה לבלות קצת זמן delving עמוק לתוך רעיון זה של נושאים jQuery נייד. כל תעשיית העיצוב כבר מהפכה על ידי jQM ואת תהליך בניית תבנית נייד מאפס כבר שיפור משמעותי. jQuery נייד הוא לא רק ספריית scripting, אלא מסגרת הקרקע כולה לבנות על לייצר תבניות סלולרי יעיל.
תוכן גליון סגנונות
אני צריך להתחיל על ידי הבהרת בדיוק איזה סוג של קוד CSS כלול עם קבצי ברירת המחדל. גיליון הסגנונות מ jQM 1.0 נחלק לשני חלקים עיקריים - מבנה ו ערכות נושא.
קוד המבנה הוא הדברים שאתה יכול להתעלם בעיקר. זה משמש כדי להגדיר שולי, ריפוד, גובה / רוחב, גרסאות גופן, יחד עם ברירות מחדל רבות אחרות של הדפדפן. הנושאים הפנימיים נפרקים אז מ- A-E אשר כל שליטה אפקטים חזותיים שונים בעיצוב שלך. זה יכול לכלול צבעי רקע, gradients, ירידה הצללים, וכו '.
כל אחד מן המרכיבים הפנימיים הללו יכול גם להיקרא דוגמיות. כאשר אתה בונה תבנית לנייד, בדרך כלל תידבק עם נושא אחד. אבל כמעט בכל תרחיש העיצוב ניתן לשפר עם צבעים שונים. ברירת המחדל של גיליון הסגנונות כוללת דוגמיות צבע בלבד, אך ניתן לבנות דוגמיות צבע F-Z כדי להוסיף עוד 21 חלופות לספריית העיצובים. רק כדי להבהיר את התנאים האלה שוב א נושא נחשב 1 קובץ יחיד CSS אשר יכול לכלול עד 26 שונים דוגמיות שכותרתו A-Z.
החלפת סגנונות
אם לא תבחר לציין דוגמיות כלשהן, jQuery Mobile ידביק את דוגמית הצבע A כברירת מחדל. אם לא היית מודע כבר את המסמכים jQuery Mobile לנצל תכונות נתונים HTML5 עבור פונקציות פנימיות רבות. אחד מאלה כולל שינוי דוגמיות צבע באמצעות המאפיין theme-data. בדוק את קוד הקוד שלהלן כדי לראות למה אני מתכוון.
דף jQM ברירת מחדל
הנה כמה תוכן פנימי.
שים לב שהצבתי את התכונה 'נושא נתונים' בדף div של השורש. משמעות הדבר היא שצבע הדוגמא החדש ישפיע על כל מה שבתוכו, הכולל את הכותרת ואתרי התוכן. אני יכול לכלול גם data-theme = "c" לתוך הכותרת div לשנות רק את התוכן משאר הדף שלי.
מרכיבי Swatch
זה צריך להיות פשוט למדי כיצד ליישם אלה דוגמיות שונות בתוך פריסה אחת. אז עכשיו תסתכל על קוד jQM CSS כדי שנוכל לשבור רכיבים בודדים של דוגמית. בדוק את האחרונה jQuery Mobile 1.4.5 CSS קובץ מתארח על CDN שלהם.
אתה צריך לשים לב איך כל דוגמית מופרדים על ידי הערה ברורה וכל אחד הכיתות הפנימיות מסתיימת עם האות המתאימה. לדוגמה .ui-bar-a ו .ui-body-a מוחלים בכותרת העליונה / תחתונה ובתחומי תוכן כברירת מחדל. רוב המאפיינים מיישמים איפוס על גופן וקישור צבעים, gradients רקע, ופרטים קטנים אחרים. כללתי בפשטות את ui-bar-a קודים כדי לתת לך מושג על אילו אלמנטים אנו מכוונים.
/ * A ----------------------------------------------- ---------------------------------------------- * / -bar-a border: 1px solid # 2A2A2A; רקע: # 111111; צבע: #ffffff; מודגש; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; background-image: -webkit-gradient (ליניארי, שמאלי למעלה, תחתית שמאל, מ (# 3c3c3c), אל (# 111)); / * Saf4 +, Chrome * / background-image: -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / background-image: -ms-linear-gradient (# 3c3c3c, # 111); / * IE10 * / background-image: -i-linear-gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / background-image: ליניארי-שיפוע (# 3c3c3c, # 111); .-bar-a, .ui-bar-a-input, .ui-bar-a select, .ui-bar-a textarea, .i-bar-a button font-family: Helvetica, Arial, sans- serif; .ui-bar-a .ui-link-inherit color: #fff; .ui-bar-a .ui-link color: # 7cc4e7 / * a-bar-link-color * /; מודגש; .ui-bar-a .ui-link: העבר את העכבר color: # 2489CE / * a-bar-link-hover * /; .ui-bar-a .ui-link: פעיל color: # 2489CE / * a-bar-link-active * /; .ui-bar-a .ui-link: visit color: # 2489CE / * a-bar-link-visits * /;
אם אתה רק מחפש ליצור דוגמית מותאמת אישית אני ממליץ לבסס את התבנית על אחד מסמכי המקור. התהליך ילך הרבה יותר חלקה אם תתחיל לכתוב קודים במסמך CSS חדש. לא תהיה לך טרחה של עריכה בקובץ המקורי ואתה יכול להתחיל לעבוד על לוח נקי. אבל תחומי המפתח שאתה רוצה להתמקד יכלול את הדברים הבאים:
- ברים הכותרת התחתונה
- תוכן הגוף & טקסט הדף
- סגנונות רשימה
- כפתור ברירת המחדל / רחף / פעיל
- בקרות קלט טופס (נוסף)
קידוד עיצוב בר חדש
מתוך אותו קובץ CSS הסתכלנו קודם כל להעתיק / להדביק את כל דוגמית קוד (שורות 12-150) לתוך קובץ חדש. אנו יכולים להשתמש בשם ה- Swatch G כדי ליישם סגנונות חדשים אלה. עכשיו לאחר העתקת הקוד אתה רוצה לשנות את שם כל מקרה בכיתה מסתיים ב -א ל -ז, כמו זה איך jQuery נייד יהיה לזהות אילו סגנונות להשתמש.
אני רוצה להתחיל על ידי עיצוב מחדש של סרגל הכותרת bg כדי לחקות שיפוע iOS מוכר יותר. זה יכול להיעשות אך ורק בתוך .ui-bar-g 28. אנחנו רוצים לערוך את הרקע ואת מאפייני הרקע התמונה לשנות את השפעות שיפוע. בדוק את הקוד שלהלן ואת מסך ההדגמה של שיפוע חדש.
.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; border-left: 0px; border-right: 0px; רקע: # 6d83a1; צבע: #fff / * a-bar-color * /; מודגש; טקסט-צל: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; (0, 0% 100%, מ # b4bfce), color-stop (0.5, # 899cb3), color-stop (0.505, # 7e94b0), to (# 6d83a1)); background-image: -webkit-linear-gradient (למעלה, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / background-image: -Moz-linear-gradient (למעלה, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / background-image: -ms-linear-gradient (למעלה, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / background-image: -o-linear-gradient (למעלה, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * אופרה 11.10+ * / background-image: שיפוע לינארי (למעלה, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);
אני משתמש בסכימת הצבעים הכחולה שנמצאת ברוב יישומי iOS המשמשים כברירת מחדל. הרקע שלי מוגדר תחילה לצבע מוצק עבור התקנים שאינם יכולים לעבד גרדי CSS3. ואז למטה אני משתמש צבע מפסיק סביב 50% סמן לשחזר את אפל בסגנון מסורתי אפקט מבריק. גם בתוך אותו בורר אני קצת שונה את צבע הטקסט עם צבע עדין יותר טווח.
לחצנים וטקסטים אפקטים
זה חשוב כאשר קידוד דוגמיות לשקול במיוחד אילו אזורים בממשק צריך תשומת לב. סרגל הכותרת נראה נהדר עם הרקע החדש הזה, אך שינוי אחרון אחד שהייתי רוצה לבצע יתאים לסגנונות הלחצנים הקרובים יותר לזו של אפליקציות iOS.
.ui-btn-up-g border: 1px solid # 375073; רקע: # 4a6c9b; מודגש; צבע: #fff; טקסט צל: 0 / * a-bup-shadow-x * / -1x / * * a-bup-shadow-y * * / 1px / * a-bup-shadow-radius * / # 40536d; תיבה-צל: none; -webkit-box-shadow: none; -Moz-box-shadow: none; (0, 0% 0, 100% 0, 100% 0, 100% 0, 0) 4a6c9b)); background-image: -webkit-linear-gradient (למעלה, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (למעלה, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / background-image: -ms-linear-gradient (למעלה, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / background-image: -O-linear-gradient (למעלה, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / background-image: ליניארי-שיפוע (למעלה, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; .i-btn-up-g -ui-btn-Internal, .ui-btn-hover-g .ui-btn-Internal, .ui-btn-down-g .ui-btn-internal border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; .ui-btn-hover-g border: 1px solid # 1b49a5; רקע: # 2463de; מודגש; צבע: #fff; טקסט צל: 0 / * a-bup-shadow-x * / -1x / * * a-bup-shadow-y * * / 1px / * a-bup-shadow-radius * / # 40536d; תיבה-צל: none; -webkit-box-shadow: none; -Moz-box-shadow: none; (0, 0% 0, 0% 100%, מ (# 779be9), color-stop (0.5, # 376fe0), color-stop (0.505, # 2260dd), to (# 2463de)); background-image: -webkit-linear-gradient (למעלה, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / background-image: -Moz-linear-gradient (למעלה, # 779be, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / background-image: -ms-linear-gradient (למעלה, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / background-image: - ליניארי - שיפוע (למעלה, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / background-image: ליניארי-שיפוע (למעלה, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
אזור הקוד שאנו עורכים כעת נמצא בתוך הכפתורים של לחצן ממשק המשתמש. ישנם 3 מצבים שונים כדי להיות מודאג עם: .ui-btn-up-g, .ui-btn-hover-g, ו .ui-btn-down-g. אני מתמקדת בעיקר על תקן (btn-up) ו לרחף (btn- לרחף) אפקטים על ידי עריכת צל תיבת ו gradients ליניארי. כמו כן הרחבתי את פינות מעוגל אפקט כך הכפתורים מופיעים מלבני יותר.
בגלל זה אני צריך להסיר את רדיוס הגבול הפנימי מתוך הכיתה שכותרתו .ui-btn- פנימי. מחלקה זו מקושרת אל אלמנט span בתוך כל קישור עוגן בסרגל הכותרת. מבלי לאפס את מאפייני רדיוס הגבול תבחין תקלות קטנות בעיצוב בכל פעם שאתה מרחף מעל כפתור. כפי שאתה מבלה זמן רב יותר קידוד ב נושאים jQuery נייד תוכל לזכור את הניואנסים הקטנים האלה עבור פרויקטים עתידיים.
מבוא ל - ThemeRoller
אם אתה נהנה לקבל את הידיים מלוכלך בקוד אז אני ממליץ מאוד דבק עריכות מותאמות אישית. לא רק שיש לך יותר שליטה אבל זה הרבה יותר קל באגים בעיות בתוך CSS אם אתה עושה את כל העריכות עצמך. אבל עבור מעצבים רבים תהליך זה הוא מייגע ופשוט ייקח יותר זמן מהנדרש. למרבה המזל צוות jQuery נייד פרסמה עורך מקוון תחת השם ThemeRoller.
מדף זה יש לך גישה לערוך את 3 הדוגמאות הראשונות של A-C או אפילו ליצור אחת משלך. אם אתה מסתכל בסרגל הצד השמאלי תוכל לעבור בין 3 הגדרות אלה או לבצע במהירות שינויים באפשרויות ערכת הנושא הגלובלית. אלה כוללים מאפייני CSS כגון רדיוס גבול, צללי תיבות או גופני דף ברירת מחדל. שים לב כאשר אתה בוחר את כל דוגמיות מראש שאנו יכולים לערוך רק את אותם אזורים כמו קודם - ברים עליון / תחתון, תוכן הגוף, ומצב 3 קובע.
אבל התכונה האהובה עלי צריכה להיות גישה ישירה Adobe דוגר דוגמיות. אתה יכול למעשה ליצור כמה צבעים בתוך חשבון Kuler שלך ולייבא אותם ThemeRoller. ממשק תומך גרור ושחרר פונקציונליות אז זה ממש פשוט לנסות כמה רעיונות שונים בתוך דקות.
בסופו של דבר אין שיטה מוחלטת של בניית הדוגמאות שלך. כמה מעצבים מעדיפים קוד CSS קשה בעוד שאחרים יאהבו את היישום אינטרנט אינטואיטיבי ThemeRoller. כל עוד אתה עוקב אחר מבנה הכיתה אז אתה צריך לקבל את אותן תוצאות בכל מקרה.
משאבים מועילים
- נושאים ניידים - תיעוד
- שימוש והתאמה אישית של נושאים jQuery Mobile
