צור אתר סלולרי באמצעות jQuery Mobile

תוֹכֶן

• כיצד לקודד מספר עמודים בקובץ HTML יחיד
• תיאור
• כיצד להשתמש בתיבות דו-שיח ובמעברים
• המעברים בהם ניתן להשתמש
• תיאור
• כיצד ליצור כפתורים
• תיאור
• כיצד ליצור סרגל ניווט
• כיצד מקודדים את ה- HTML עבור סרגל ניווט:
• כיצד לעצב תוכן באמצעות jQuery Mobile
• סגנונות ברירת המחדל בהם משתמשים jQuery Mobile
• תיאור
• כיצד להחיל ערכות נושא על רכיבי HTML
• שתי דרכים ליישם נושא:
• תיאור
• נקודת מבט

זהו קטע ערוך מפרק 15 של HTML5 ו- CSS3 של מוראך מאת זאק רוולבקבה ואן בוהם.

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

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

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

כיצד לקודד מספר עמודים בקובץ HTML יחיד

בניגוד לאופן שבו אתה מפתח דפי אינטרנט עבור אתר אינטרנט מסך, jQuery Mobile מאפשר לך ליצור מספר עמודים בקובץ HTML אחד. זה מודגם באיור 15-7. כאן תוכל לראות שני עמודים באתר יחד עם ה- HTML של דפים אלה. מה שמפתיע הוא ששני הדפים מקודדים בתוך קובץ HTML יחיד.

עבור כל עמוד, אתה מקודד אלמנט div אחד עם "עמוד" כערך של תכונת תפקיד הנתונים. לאחר מכן, בתוך כל אחד מאותם רכיבי div, אתה מקודד את רכיבי ה- div לכותרת, לתוכן ולכותרת התחתונה של כל עמוד. מאוחר יותר, עם טעינת קובץ ה- HTML, מוצג העמוד הראשון בגוף הקובץ.

כדי לקשר בין הדפים בקובץ ה- HTML, אתה משתמש במצייני מיקום כפי שמוצג באיור 7-11 בפרק 7. לדוגמה, האלמנט a> בעמוד הראשון בדוגמה זו עובר ל "#toobin" כאשר המשתמש מקיש על אלמנט h2 או img שמקודד כתוכן לקישור זה. זה מתייחס לאלמנט div עם "toobin" כתכונת id שלו, כלומר הקשה על הקישור מעבירה את הקורא לדף השני בקובץ.

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

ה- HTML לשני העמודים בגוף קובץ HTML אחד:

div data-role = "page"> header data-role = "header"> h1> SJV Town Town / h1> / header> section data-role = "content"> h3> הרמקולים 2011-2012 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 באוקטובר 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - האלמנטים לשאר הדוברים - -> / קטע> כותרת תחתונה data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> בית העירייה של SJV / h1> / כותרת> סעיף data-role = "content"> h3> The Nine Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> מחבר רב המכר שזכה לשבחי הביקורת, i> The Nine:! - העתק ממשיך -> / קטע> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

תיאור

• כאשר אתה משתמש ב- jQuery Mobile, אינך צריך לפתח קובץ HTML נפרד לכל עמוד. במקום זאת, בתוך אלמנט הגוף של קובץ HTML יחיד, אתה מקודד אלמנט div אחד עבור כל עמוד עם תכונת תפקיד הנתונים שלו מוגדרת כ"עמוד ".
• עבור כל רכיב div, אתה מגדיר את תכונת id לערך מציין מיקום אליו ניתן לגשת באמצעות תכונות href באלמנטים a> בדפים אחרים.

כיצד להשתמש בתיבות דו-שיח ובמעברים

איור 15-8 מראה כיצד ליצור תיבת דו-שיח שנפתחת כאשר מקישים על קישור. לשם כך, אתה מקודד את תיבת הדו-שיח בדיוק כמו בכל דף. אך ברכיב a> העובר לדף זה, אתה מקודד תכונה הקשורה לנתונים עם "דיאלוג" כערכה.

כפי שמראים הדוגמאות באיור זה, קובץ ה- jQuery Mobile CSS מעצב תיבת דו-שיח שונה מדף אינטרנט רגיל. כברירת מחדל, לתיבת דו-שיח תהיה רקע כהה עם טקסט חזית לבן, והכותרת העליונה והכותרת התחתונה לא תשתרע על רוחב הדף. בתיבת דו-שיח תהיה גם כותרת "X" שעל המשתמש להקיש כדי לחזור לדף הקודם.

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

המעברים בהם ניתן להשתמש

HTML שפותח את הדף כתיבת דו-שיח עם המעבר "פופ":

a href = "# toobin" data-rel = "dialog" data-transition = "pop">

HTML שפותח את הדף עם המעבר "דוהה":

a href = "# toobin" data-transition = "fade">

תיאור

• ה- HTML עבור א תיבת דיאלוג מקודד באופן שמקודד כל דף. עם זאת, האלמנט a> המקשר לדף כולל את התכונה rel-data עם הערך "שיח". כדי לסגור את תיבת הדו-שיח, המשתמש מקיש על ה- X בכותרת התיבה.
• כדי לציין את אופן פתיחת הדף או תיבת הדו-שיח, ניתן להשתמש במאפיין מעבר הנתונים עם אחד הערכים בטבלה לעיל. אם מכשיר אינו תומך במעבר שציינת, התכונה מתעלמת.
• העיצוב של תיבת דו-שיח נעשה על ידי קובץ ה- CSS הנייד jQuery.

כיצד ליצור כפתורים

איור 15-9 מראה כיצד להשתמש בכפתורים לנווט מעמוד אחד למשנהו. לשם כך, אתה פשוט מגדיר את מאפיין תפקיד הנתונים עבור אלמנט a ל "כפתור", ו- jQuery Mobile עושה את השאר.
עם זאת, אתה יכול גם להגדיר כמה תכונות אחרות עבור כפתורים. אם, למשל, אתה רוצה ששני כפתורים או יותר יופיעו זה לצד זה, כמו שני הכפתורים הראשונים באיור זה, אתה יכול להגדיר את מאפיין הנתונים המוטבע ל"אמיתי ".

אם ברצונך להוסיף אחד מ -18 הסמלים המסופקים על ידי jQuery Mobile לכפתור, אתה גם מקודד את מאפיין סמל הנתונים. לדוגמה, הכפתור השלישי בדוגמה זו משתמש בסמל "מחק", והכפתור הרביעי משתמש בסמל "הבית". כל הסמלים האלה נראים כמו הסמלים שאתה עשוי לראות ביישום נייד מובנה. אגב, סמלים אלה אינם קבצים נפרדים שהדף חייב לגשת אליהם. במקום זאת, הם מסופקים על ידי ספריית jQuery Mobile.

אם ברצונך לקבץ שני כפתורים או יותר בצורה אופקית, כמו הלחצנים כן, לא, ואולי באיור זה, תוכל לקודד את האלמנטים a> עבור הלחצנים בתוך אלמנט div שיש לו "קבוצת הבקרה" כתכונת תפקיד הנתונים שלו "אופקי" כתכונה מסוג הנתונים שלה. לחלופין, כדי לקבץ את הכפתורים אנכית, תוכל לשנות את מאפיין סוג הנתונים ל"אנכי ".

אם תגדיר את המאפיין rel-data עבור כפתור ל"גב "ואת התכונה href לסמל הלירה (#), הלחצן יחזור לדף שקרא לו. במילים אחרות, הכפתור עובד כמו כפתור חזרה. זה מתואר באמצעות הכפתור האחרון בתוכן העמוד.

שני הכפתורים האחרונים מראים כיצד כפתורים מופיעים בכותרת התחתונה של דף. כאן, הסמלים והטקסט לבנים על רקע שחור. במקרה זה, תכונת class לכותרת התחתונה מוגדרת כ- "ui-bar", שאומרת ל- jQuery Mobile שהיא צריכה לשים קצת יותר מקום סביב תוכן הכותרת התחתונה. תוכלו ללמוד עוד על כך באיור 15-12.

ה- HTML של הכפתורים בחלק:

! - עבור לחצנים מוטבעים, הגדר את תכונת שורת הנתונים ל- true -> a href = "#" data-role = "button" data-inline = "true"> ביטול / a> נתונים href = "#" -role = "button" data-inline = "true"> OK / a>! - כדי להוסיף סמל לכפתור, השתמש בתכונה icon-icon -> כפתור href = "#" data-role = " "data-icon =" delete "> מחק / a> a href =" # "data-role =" button "data-icon =" home "> דף הבית / a>! - כדי לקבץ לחצנים, השתמש באלמנט div עם התכונות הבאות -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> כן / a> a href = "#" data-role = "button" data-icon = "arrow-d"> No / a> a href = "#" data-role = "button"> אולי / a> / div>! - אל קידד כפתור Back, הגדר את מאפיין data rel לאחור -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> חזרה לדף הקודם / a >

ה- HTML עבור הכפתורים בכותרת התחתונה:

כותרת תחתונה data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> הוסף לפייסבוק / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> ציוץ דף זה / a> / footer>

תיאור

• כדי להוסיף כפתור לדף אינטרנט, אתה מקודד אלמנט a> שתכונת תפקיד הנתונים שלו מוגדרת כ"כפתור ".

כיצד ליצור סרגל ניווט

איור 15-10 מראה כיצד ניתן להוסיף סרגל ניווט לדף אינטרנט. לשם כך, אתה מקודד אלמנט div עם תפקיד הנתונים שלו מוגדר כ- "navbar". בתוך אלמנט זה אתה מקודד אלמנט ul המכיל אלמנטים li המכילים את האלמנטים a> עבור הפריטים בסרגל הניווט. שים לב, עם זאת, אינך מקודד את תכונת תפקיד הנתונים עבור האלמנטים a>.

כדי לשנות את הצבע של הפריטים בסרגל הניווט, הקוד בדוגמה זו כולל את המאפיין data-theme-b עבור כל פריט. כתוצאה מכך, jQuery Mobile משנה את צבע הרקע של כל פריט משחור, שהוא ברירת המחדל, לכחול אטרקטיבי. בנוסף, קוד זה מגדיר את תכונת הכיתה של הכפתור הפעיל ל- "ui-btn-active" ולכן jQuery Mobile משנה את צבע הכפתור הפעיל לכחול בהיר יותר. זה מראה כיצד ניתן לשנות את העיצוב המשמש את jQuery Mobile ותוכל ללמוד עוד על כך בהמשך.

ה- HTML עבור סרגל הניווט:

header data-role = "header"> h1> SJV Town Town / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> בית / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" b "> רמקולים / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> צור קשר / a> / li> / ul> / div> / header>

כיצד מקודדים את ה- HTML עבור סרגל ניווט:

• קוד אלמנט div בתוך אלמנט הכותרת. לאחר מכן, הגדר את מאפיין תפקיד הנתונים של אלמנט div כ- "navbar".
• בתוך אלמנט div, קוד אלמנט ul שמכיל אלמנט li אחד לכל קישור.
• בתוך כל אלמנט li, קידם אלמנט a> עם תכונה href המשתמשת במציין מיקום עבור הדף שאליו צריך לעבור הקישור. לאחר מכן, הגדר את מאפיין סמל הנתונים לסמל שבחרת.
• עבור הפריט הפעיל בסרגל הניווט, הגדר את תכונת הכיתה ל- "ui-btn-active".לאחר מכן, צבע פריט זה יהיה בהיר יותר משאר הפריטים בסרגל הניווט.
• עליך להשתמש גם במאפיין data-theme כדי להחיל נושא jQuery Mobile על כל פריט בסרגל הניווט. אחרת, הכפתורים בסרגל יהיו באותו צבע כמו שאר הכותרת. למידע נוסף על יישום נושאים, ראה איור 15-12.

כיצד לעצב תוכן באמצעות jQuery Mobile

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

סגנונות ברירת המחדל בהם משתמשים jQuery Mobile

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

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

תיאור

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

כיצד להחיל ערכות נושא על רכיבי HTML

במקרים מסוימים, תרצה לשנות את סגנונות ברירת המחדל שבהם jQuery Mobile משתמש. כבר ראית את זה בסרגל הניווט של איור 15-10. כדי לשנות את סגנונות ברירת המחדל, תוכל להשתמש בחמשת הנושאים ש- jQuery Mobile מספק. אלה מסוכמים באיור 15-12. גם כאן, נושאים אלה נועדו לחקות את המראה של יישום סלולרי מקומי.

אחת הדרכים ליישם נושאים היא קידוד תכונה של נושא נתונים עם אות העיצוב כערכה. ראית זאת בסרגל הניווט באיור 15-10, ואתה יכול לראות זאת בקוד לסרגל הניווט השני באיור זה. כאן, תכונת נושא הנתונים מחילה את נושא "e" על הכותרת ואת נושא "d" על הפריטים בסרגל הניווט.

הדרך האחרת ליישם נושאים היא להגדיר את תכונת הכיתה של אלמנט לשם כיתה המציין נושא. זה מודגם על ידי הדוגמה הראשונה אחרי הטבלה. כאן, התכונה class משמשת להחלת הכיתות "ui-bar" ו- "ui-bar-b" על אלמנט div. כתוצאה מכך, jQuery Mobile מיישם תחילה את הסטיילינג המוגדר כברירת מחדל עבור סרגל על ​​האלמנט ואז מחיל את ערכת הנושא b על עיצוב זה. בדפים שלאחר מכן תראה דוגמאות אחרות לסגנון מסוג זה.

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

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

ה- HTML עבור הכותרת השנייה וסרגל הניווט:

כותרת data-role = "header" data-theme = "e"> h1> SJV Town Town / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> דף הבית / a> / li> li> a href =" # speakers "data-icon =" star "data-theme =" d "> רמקולים / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> חדשות / a> / li> / ul> / div> / כותרת>

חמשת הנושאים של jQuery Mobile:

שתי דרכים ליישם נושא:

באמצעות מאפיין של נושא נתונים:

li> a href = "# home" data-icon = "home" data-theme = "b"> בית / a> / li>

באמצעות תכונת מחלקה המציינת את הנושא:

div> בר / div>

תיאור

• באמצעות חמשת הנושאים הכלולים ב- jQuery Mobile, באפשרותך לבצע התאמות מתאימות לסגנונות ברירת המחדל עבור רכיבי ה- HTML.
• למרות שאתה יכול להשתמש בגיליון סגנונות CSS משלך עם יישום jQuery Mobile, עליך להימנע מלעשות זאת במידת האפשר.

נקודת מבט

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

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