מדריך jQuery Mobile - ניווט וכפתורים
בפרק הקודם במדריך jQuery Mobile יצרנו אפליקציה בסיסית המורכבת מדף בודד וראינו את המבנה הבסיסי שלו. בפרק הזה נרחיב את האפליקציה למספר דפים ונדבר על הניווט ביניהם.
ניווט בסיסי בין דפים באפליקציה
נוסיף לאפליקציה 3 דפים נוספים: products.html, services.html ו- about.html.
בתור תוכן לדפים האלה, נשתמש בתבנית הבסיסית של עמוד באפליקציית jQuery Mobile עם מעט תוכן, כדי שנוכל להבדיל בין הדפים (שינוי ה- title ותוכן ה- h1 באיזור ה- header). לדוגמא, תוכן עמוד ה- about יהיה:
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="Scripts/jquery.mobile-1.0rc1.js" type="text/javascript"></script>
<link href="Content/jquery.mobile-1.0rc1.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>About Us</h1>
</div>
<div data-role="content">
Here is some content for the "About Us" page.
</div>
<div data-role="footer">
Copyright 2011
</div>
</div>
</body>
</html>
כעת, בעמוד הראשי (index.html) נוסיף רשימת קישורים לדפים האחרים ע”י שימוש בתגיות HTML סטנדרטיות.
<div data-role="content">
<a href="about.html">About Us</a><br />
<a href="products.html">Products List</a><br />
<a href="services.html">Services</a><br />
</div>
נריץ ונראה את האפליקציה בדפדפן הסלולרי, ונראה את רשימת הקישורים מוצגת באופן בסיסי.
איך jQuery Mobile מטפלת בניווט בין דפים?
אם נריץ את האפליקציה בדפדפן Desktop ולא בדפדפן מובייל, ונלחץ על הקישור About נקבל אמנם את התוצאה הרצויה, אך נשים לב שבשורת הכתובת לא קיבלנו את הכתובת אותה ציפינו לקבל:
הסיבה היא ש- jQuery Mobile לא מבצע גלישה אל דף היעד, אלא התשתית טוענת את תוכן דף היעד, ומכניסה אותו לתוך ה- DOM של הדף הנוכחי. התשתית מוסיפה את הנתיב אליו רצינו להגיע לשורת הכתובת כחלק ממנגנון הסטוריית הגלישה, שמאפשרת לנו לחזור אחורה לדפים קודמים בהם ביקרנו. למעשה אפליקציית jQuery Mobile היא אפליקציה של עמוד אחד.
שימוש בכפתורים
באתרי אינטרנט המותאמים לדפדפן Desktop אנחנו רגילים להשתמש בקישורים, אך באתרים סלולרים השימוש בהם אינו נוח כיוון שהם דורשים רמת דיוק כלשהי שקשה להגיע אליה בממש מבוסס מגע. לכן, בדר”כ נרצה שפעולות נפוצות באפליקציות המובייל שלנו יופעלו דרך כפתורים שמותאמים ללחיצת אצבע ולא דורשים דיוק רב.
כדי להפוך קישור פשוט לכפתור, נוסיף את ההגדרה "data-role=”button לקישורים:
<div data-role="content">
<a href="about.html" data-role="button">About Us</a><br />
<a href="products.html" data-role="button">Products List</a><br />
<a href="services.html" data-role="button">Services</a><br />
</div>
ונקבל את התוצאה הבאה, שהיא הרבה יותר ידידותית למגע:
הוספת Icons לכפתורים
לכפתורים ב- jQuery Mobile ניתן להוסיף אייקונים ולמקם אותם במיקומים שונים, ע”י שימוש בהגדרה "data-icon="delete כאשר "delete" מציין את שם האייקון לכפתור.
jQuery מגיעה עם רשימת אייקונים בסיסית אותם ניתן להוסיף לאפליקציה בצורה הזאת, כאשר שמות הכפתורים (משמאל לימין) הם:
-
arrow-l, arrow-r, arrow-u, arrow-d
-
delete, plus, minus, check
-
gear, refresh, forward, back
-
grid, star, alert, info
-
home, search
מיקום ה- Icon ע”ג הכפתור
ניתן למקם את האייקון ע”ג הכפתור במספר מקומות ע”י שימוש בהגדרה data-iconpos וציון המיקום.
לדוגמא תוכן הדף הבא:
<div data-role="content">
<a href="about.html" data-role="button"
data-icon="arrow-l" data-iconpos="left">About Us</a>
<a href="products.html" data-role="button"
data-icon="star" data-iconpos="top">Products List</a>
<a href="services.html" data-role="button"
data-icon="home" data-iconpos="right">Services</a>
</div>
יביא לתוצאה הזאת:
כמוכן, ניתן גם להציג כפתור ללא טקסט ועם אייקון בלבד. הוספת הקישור:
<a href="/" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
תביא להוספת הכפתור העליון:
תהנו!