jQuery mobile : לעבוד עם Toolbars

(השיעור שלהלן מבוסס על פרק 3 מהספר: jQuery Mobile Web Development Essentials)

כבר ראינו כיצד ניתן להוסיף header לדף שלנו, לדוגמא:

<div data-role="header"><h1>My Header</h1></div>

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

<div data-role="header">
<a href="index.html">Home</a>
<h1>My Header</h1>
<a href="contact.html">Contact</a>
</div>

קיימים רק שני מקומות להוספת הכפתורים ב – header שהן ימין ושמאל (המרכז "תפוס" עבור טקסט).
התוצאה:
Buttons

 

 

 

 

 

 

 

 

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

Buttons_1

 

 

 

 

 

הכפתור עדיין מוצג בצד שמאל.
כדי להציג אותו בימין, צריך להוסיף לו את מחלקה (class) של css.

<div data-role="header">
<h1>My Header</h1>
<a href="contact.html" class="ui-btn-right">Contact</a>
</div>

התוצאה:

Buttons_2

 

 

 

 

 

 

 

 

אפשר להוסיף תמונה קטנה (icon) לכפתור.
ל – JQM אוסף של תמונות כאלה מובנות:

 <a href="#aboutPage" class="ui-btn-right" data-icon="home">About</a>

והתוצאה:

Buttons_3

 

 

 

 

 

 

 

Back

טלפוני Android מכילים כפתור Back.
לחיצה על הכפתור מובילה אל המסכים באפליקציה שהוצגו קודם.
JQM מחקה פעולה זו בדפדפן.
לעומת זאת, טלפוני iOS לא מכילים כפתור כזה, ואז אפשר להציג להם כפתור back.
JQM מכילה אופציה אוטומטית להצגת כפתור back (כלומר הכפתור יוצג רק ב iOS).
הנה כך:

<div data-role="page">
<div data-role="header"><h1>My Header</h1></div>
<div data-role="content">
<p>
<a href="#subpage">Go to the sub page...</a>
</p>
</div>
</div>
<div data-role="page" id="subpage" data-add-back-btn="true">
<div data-role="header"><h1>Sub Page</h1></div>
<div data-role="content">
<p>
<a href="" data-rel="back">Go back...</a>
</p>
</div>
</div>

בעוד שבטלפוני Android לא תראו את הכפתור, ב iOS זה אמור להיראות כך:

Auto_Back

 

 

 

 

כפתורים ב – footer

דומה למדי לכפתורים ב – header.
ההבדלים:

  • ב footer אין טקסט, ולכן הכפתורים נערמים בצד שמאל.
  • כדי לרווח אותם מעט, אפשר להוסיף class="ui-bar" ל – footer

דוגמא:

<div data-role="footer" class="ui-bar">
<a href="credits.html">Credits</a>
<a href="contact.html">Contact</a>
</div>

 

fixed position

לפעמים ברצוננו לקבע את ה – header וה-footer בראש ותחתית המסך, גם אם התוכן גדול יותר מאשר אורך הדף.

אפשר לעשות זאת באמצעות התכונות:

data-position="fixed" 
datafullscreen="true"

הנה דוגמא:
(הדוגמא והתכונות הנ"ל לא יעבדו בסימולטור opera-mini אך יוצגו נכון במקומות האחרים):

<div data-role="page">
    <div data-role="header" data-position="fixed" datafullscreen="true"><h1>My Header</h1></div>
    <div data-role="content">
        Content  1<br>
        Content  2<br>
        Content  3<br>
        Content  4<br>
        Content  5<br>
        Content  6<br>
        Content  7<br>
        Content  8<br>
        Content  9<br>
        Content  10<br>
        Content  11<br>
        Content  12<br>
        Content  13<br>
        Content  14<br>
        Content  15<br>
        Content  16<br>
        Content  17<br>
        Content  18<br>
        Content  19<br>
        Content  20<br>
        Content  21<br>
        Content  22<br>
        Content  23<br>
        Content  24<br>
        Content  25<br>
        Content  26<br>
        Content  27<br>
        Content  28<br>
        Content  29<br>
        Content  30<br>
        Content  31<br>
        Content  32<br>
        Content  33<br>
        Content  34<br>
        Content  35<br>
        Content  36<br>
        Content  37<br>
        Content  38<br>
    </div>
    <div data-role="footer" data-position="fixed" datafullscreen="true" >
        <a href="credits.html">Credits</a>
        <a href="contact.html">Contact</a>
    </div>
</div>

אפשר לגלגל את הדף למעלה ולמטה והכותרות יישארו במקומם.

 NavBars

ל JQM יש פתרון מובנה ל footer עם כפתורים, הנקרא NavBar.
הנה דוגמא:

<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="header_and_footer__with_navbar.html" class="uibtn-
active">Home</a></li>
<li><a href=" header_and_footer__with_navbar_credits.html "
>Credits</a></li>
<li><a href=" header_and_footer__with_navbar_contact.html "
>Contact</a></li>
</ul>
</div>
</div>

התוצאה:

navbar_1

 

 

 

 

 

במקרה שלמעלה, הקשתי על הכפתור האמצעי (שלא מוביל כרגע לשום מקום) והוא מוצג כ – current (הכפתור הנוכחי).

נסיים בדוגמא מלאה עם NavBar ובו שלושה כפתורים המוליכים לשלושה דפים.
בדוגמא זו, ה NavBar בשלושת הדפים מכיל את התכונה ui-state-persist (מאפשרת ל footer להיות קבוע אם מוסיפים אנימציות, שאותן נכיר בהמשך):

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
    <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>

    <title></title>
</head>
<body>
<div data-role="page" id="indexPage">
    <div data-role="header" ><h1>My Header</h1></div>
    <div data-role="content">
        Home

    </div>
    <div data-role="footer" data-position="fixed" data-id="footernav">
        <div data-role="navbar">
            <ul>
                <li><a href="#indexPage" class="ui-btnactiveui-state-persist">Home</a></li>
                <li><a href="#creditPage">Credits</a></li>
                <li><a href="#contactPage">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page"  id="creditPage">
    <div data-role="header" ><h1>My Header</h1></div>
    <div data-role="content">
        Credit

    </div>
    <div data-role="footer" data-position="fixed" data-id="footernav">
        <div data-role="navbar">
            <ul>
                <li><a href="#indexPage">Home</a></li>
                <li><a href="#creditPage" class="ui-btnactiveui-state-persist">Credits</a></li>
                <li><a href="#contactPage">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="contactPage">
    <div data-role="header" ><h1>My Header</h1></div>
    <div data-role="content">
        Contact

    </div>
    <div data-role="footer" data-position="fixed" data-id="footernav">
        <div data-role="navbar">
            <ul>
                <li><a href="#indexPage">Home</a></li>
                <li><a href="#creditPage">Credits</a></li>
                <li><a href="#contactPage" class="ui-btnactiveui-state-persist">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

 


כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *