מדריך jQuery Mobile – ניווט וכפתורים

15 באוקטובר 2011

3 comments

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

ניווט בסיסי בין דפים באפליקציה

נוסיף לאפליקציה 3 דפים נוספים: products.html, services.html ו- about.html.

מדריך jQuery Mobile - ניווט וכפתורים

בתור תוכן לדפים האלה, נשתמש בתבנית הבסיסית של עמוד באפליקציית 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 - ניווט וכפתורים

איך jQuery Mobile מטפלת בניווט בין דפים?

אם נריץ את האפליקציה בדפדפן Desktop ולא בדפדפן מובייל, ונלחץ על הקישור About נקבל אמנם את התוצאה הרצויה, אך נשים לב שבשורת הכתובת לא קיבלנו את הכתובת אותה ציפינו לקבל: מדריך jQuery Mobile - ניווט וכפתורים

 
הסיבה היא ש- 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
>

ונקבל את התוצאה הבאה, שהיא הרבה יותר ידידותית למגע:

מדריך jQuery Mobile - ניווט וכפתורים

הוספת Icons לכפתורים

לכפתורים ב- jQuery Mobile ניתן להוסיף אייקונים ולמקם אותם במיקומים שונים, ע”י שימוש בהגדרה "data-icon="delete כאשר "delete" מציין את שם האייקון לכפתור.

מדריך jQuery Mobile - ניווט וכפתורים

jQuery מגיעה עם רשימת אייקונים בסיסית אותם ניתן להוסיף לאפליקציה בצורה הזאת, כאשר שמות הכפתורים (משמאל לימין) הם:

מדריך jQuery Mobile - ניווט וכפתורים

  • 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
>

יביא לתוצאה הזאת:

מדריך jQuery Mobile - ניווט וכפתורים

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

<a href="/" data-role="button" data-icon="home" data-iconpos="notext">Home</a>

תביא להוספת הכפתור העליון:

מדריך jQuery Mobile - ניווט וכפתורים

תהנו!

Add comment
facebook linkedin twitter email

3 comments

  1. BnayaA15 באוקטובר 2011 ב 22:11

    פוסט נהדר!

  2. yohanan16 באוקטובר 2011 ב 12:09

    האם זה מתאים לכל מערכת הפעלה ?

  3. גיא בורשטיין17 באוקטובר 2011 ב 12:08

    רשימת הפלטפורמות הנתמכות נמצאת כאן:
    http://jquerymobile.com/gbs

    שימו לב ש- Windows Phone נמצאת ברשימת הפלטפורמות עם תמיכה מקסימלית!

Comments are closed.