מדריך jQuery Mobile – רשימות

19 באוקטובר 2011

8 comments

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

מדריך jQuery Mobile - רשימות

בסוף הפוסט תמצאו את ה- HTML המלא של הדוגמא.

רשימה פשוטה

נתחיל מרשימה פשוטה של הכינויים בטוויטר של מספר אנשי מיקרוספוט מוכרים וכן מספר MVP’s, הבנוייה מתגיות HTML סטנדרטיות.

<div data-role="content">
  <ul>
    <li>@bursteg</li>
    <li>@maordp</li>
    <li>@scottgu</li>
    <li>@shanselman</li>
    <li>@shai_rai</li>
    <li>@gilfink</li>
    <li>@arikpoz</li>
  </ul
>
</
div
>

בגלישה לדף הזה נקבל את התוצאה הבאה:

מדריך jQuery Mobile - רשימות

הגדרת הרשימה ("data-role="listview)

כדי להפוך את הרשימה הפשוטה לתצוגת רשימה ב- jQuery Mobile נוסיף את ההגדרה "data-role="listview:

<ul data-role="listview">
  ...
</ul>

ונקבל את התוצאה הבאה:

מדריך jQuery Mobile - רשימות

תוכן פריטים ברשימה

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

<ul data-role="listview">
  <li>
    <h3>Guy Burstein</h3>
    <p>@bursteg</p>
  </li>
  <li>
    <h3>@maordp</h3>
    <p>Maor David-Pur</p>
  </li>
  ...

</
ul
>

ונקבל את התוצאה הבאה:

מדריך jQuery Mobile - רשימות

נוסיף לכל משתמש גם את מספר האנשים שהוא עוקב אחריהם, ונצמיד את המספר הזה לימין. ישנן 2 דרכים לעשות זאת: ע”י שימוש ב- class ששמו ui-li-count עבור מספר המציין מספר, וע”י ה- class ששמו ul-li-aside עבור כל טקסט אחר שנרצה להציג בצד.

<ul data-role="listview">
  <li>
    <h3>Guy Burstein</h3>
    <p>@bursteg</p>
    <p class="ui-li-count">729</p>
  </li>
  <li>
    <h3>@maordp</h3>
    <p>Maor David-Pur</p>
    <p class="ui-li-aside">533</p>
  </li>
  ...

</
ul
>

ונקבל:

מדריך jQuery Mobile - רשימות

נוסיף גם תמונה עבור כל משתמש – תמונת פרופיל הטוויטר שלו, בתור Icon לאיבר ברשימה, ונוסיף את ה- class ששמו ui-li-icon.

<ul data-role="listview">
  <li>
    <img src="http://a2.twimg.com/profile_images/1461601398/twitter_normal.JPG"
 
     
alt="Guy Burstein" class="ui-li-icon" />
    <h3>Guy Burstein</h3>
    <p>@bursteg</p>
    <p class="ui-li-count">729</p>
  </li>
  <li>
    <img src="http://a2.twimg.com/profile_images/1239419922/TechEd2008_normal.jpg"
 
     
alt="Maor David-Pur" class="ui-li-icon" />

    <h3>@maordp</h3>
    <p>Maor David-Pur</p>
    <p class="ui-li-count">533</p>
  </li>
  ...

</
ul
>

כעת, נקבל את התוצאה הבאה:

מדריך jQuery Mobile - רשימות

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

מדריך jQuery Mobile - רשימות

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

מדריך jQuery Mobile - רשימות

במקרה שלנו, נוסיף לדף את הגדרת ה- css הבאה, המשנה את העיצוה לפריטים ברשימה שיש להם Icon.

<style type="text/css">
  .ui-li-has-icon.ui-li-static
  {
   
padding-left: 60px
;
   
padding-top: 0.5em
;
   
padding-bottom: 0.5em
;
  }

</style
>

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

מדריך jQuery Mobile - רשימות

הגדרת רשימה מעוצבת פנימה (inset)

ניתן לשנות את עיצוב הרשימה כולה כך שלא תתפוס את כל שטח המסך, אלא יהיו לה גבולות, וזה ע”י הוספת התכונה "data-inset=”true להצהרת הרשימה.

<ul data-role="listview" data-inset="true">
  ...

</
ul
>

כעת תיראה הרשימה כך:

מדריך jQuery Mobile - רשימות

הוספת קטגוריות / מפרידים לרשימה (list-divider)

הרשימה מכילה משתמשים בשתי קטגוריות – אנשי מיקרוסופט ו- MVP’s. נוסיף לרשימה אלמנטים נוספים ונתייג אותם כמפרידים:

<ul data-role="listview" data-inset="true">
  <li data-role="list-divider">Microsoft</li>
  <li>
    <img src="http://a2.twimg.com/profile_images/1461601398/twitter_normal.JPG"
 
     
alt="Guy Burstein" class="ui-li-icon" />
    <h3>Guy Burstein</h3>
    <p>@bursteg</p>
    <p class="ui-li-count">729</p>
  </li>
  ...

  <li data-role="list-divider">MVP's</li>
  <li>
    <img src="http://a0.twimg.com/profile_images/57280018/Untitled_normal.jpg"
 
     
alt="Shai Raiten" class="ui-li-icon" />
    <h3>Shai Raiten</h3>
    <p>@shai_rai</p>
    <p class="ui-li-count">194</p>
  </li>
  ...

</
ul
>

עם המפרידים, הרשימה תיראה עתה כך:

מדריך jQuery Mobile - רשימות

חיפוש ברשימה (data-filter)

jQuery Mobile מאפשרת להוסיף חיפוש ברשימה באופן פשוט ביותר, ע”י הוספת המאפיין "data-filter="true להצהרת הרשימה:

<ul data-role="listview" data-inset="true" data-filter="true">
  ...

</
ul
>

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

מדריך jQuery Mobile - רשימות

שינוי עיצוב הרשימה ל- Theme אחר

jQuery Mobile תומכת במספר Themes לעיצוב האפליקציות, ששמן a עד d. ניתן להגדיר לרשימה את סגנון העיצוב ע”י הוספת המאפיין data-theme להצהרת הרשימה:

<ul data-role="listview" data-inset="true" data-filter="true" data-theme="a">
  ...
</ul
>

עם ה- Theme ששמו a, תיראה כעת הרשימה כך:

מדריך jQuery Mobile - רשימות

ה- HTML המלא של הדוגמא הנ”ל הוא:

<!DOCTYPE html>
<
html
>
<
head>
  <title>Twitter Mobile</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" />
  <style type="text/css">
    .ui-li-has-icon.ui-li-static
    {
     
padding-left: 60px
;
     
padding-top: 0.5em
;
     
padding-bottom: 0.5em
;
    }
 
</style
>
</
head
>
<
body>
  <div data-role="page">
    <div data-role="header">
      <h1>Twitter Mobile</h1>
    </div>
    <div data-role="content">
    <ul data-role="listview" data-inset="true" data-filter="true" data-theme="a">
      <li data-role="list-divider">Microsoft</li>
      <li>
        <img src="http://a2.twimg.com/profile_images/1461601398/twitter_normal.JPG"
 
         
alt="Guy Burstein" class="ui-li-icon" />
        <h3>Guy Burstein</h3>
        <p>@bursteg</p>
        <p class="ui-li-count">729</p>
      </li>
      <li>
        <img src="http://a2.twimg.com/profile_images/1239419922/TechEd2008_normal.jpg"
 
         
alt="Maor David-Pur" class="ui-li-icon" />
        <h3>@maordp</h3>
        <p>Maor David-Pur</p>
        <p class="ui-li-count">533</p>
      </li>
      <li>
        <img src="http://a0.twimg.com/profile_images/565139568/redshirt_normal.jpg"
 
         
alt="Scott Guthrie" class="ui-li-icon" />
        <h3>Scott Guthrie</h3>
        <p>@scottgu</p>
        <p class="ui-li-count">729</p>
      </li>
      <li>
        <img src="http://a2.twimg.com/profile_images/1463303502/image_normal.jpg"
          alt="Scott Hanselman" class="ui-li-icon" />
        <h3>Scott Hanselman</h3>
        <p>@shanselman</p>
        <p class="ui-li-count">49,061</p>
      </li>
      <li data-role="list-divider">MVP's</li>
      <li>
        <img src="http://a0.twimg.com/profile_images/57280018/Untitled_normal.jpg"
 
         
alt="Shai Raiten" class="ui-li-icon" />
        <h3>Shai Raiten</h3>
        <p>@shai_rai</p>
        <p class="ui-li-count">194</p>
      </li>
      <li>
        <img src="http://a1.twimg.com/profile_images/1311002472/GilFink100_150_normal.jpg"
          alt="Gil Fink" class="ui-li-icon" />
        <h3>Gil Fink</h3>
        <p>@gilfink</p>
        <p class="ui-li-count">90</p>
      </li>
      <li>
        <img src="http://a0.twimg.com/profile_images/1152201658/new-main-smaller_normal.jpg"
          alt="Arik Poznanski" class="ui-li-icon" />
        <h3>Arik Poznanski</h3>
        <p>@arikpoz</p>
        <p class="ui-li-count">59</p>
      </li>
    </ul>
    </div>
    <div data-role="footer">
      Copyright 2011
   
</div>
  </div
>
</
body
>
</
html
>

תהנו!

Add comment
facebook linkedin twitter email

8 comments

  1. gilad gat31 באוקטובר 2011 ב 22:04

    אחלה מדריך,
    ערוך טוב וקל ליישום

    יש עוד?

  2. גיא בורשטיין1 בנובמבר 2011 ב 9:31

    תודה גלעד!
    הפוסטים הבאים ידברו על שילוב ASP.NET MVC עם jQuery Mobile.

  3. יוני ג1 בדצמבר 2011 ב 14:41

    כתוב בצורה ממש כיפית ומעניינת, אני באמצע יום לחוץ וקראתי את 3 החלקים בשקיקה…

  4. גיא בורשטיין1 בדצמבר 2011 ב 14:46

    תודה יוני! כיף לשמוע!

  5. יוסי קוספן20 בדצמבר 2011 ב 11:03

    היי גיא, מדריך ממש כיפי.

    באמצע לחץ לגירסה מצאתי לי שעה וארגנתי לי סביבה + התקנות + קראתי ויישמתי את 3 המדריכים.

    כתוב בצורה ברורה וזורמת.

    תמשיך לפנק אותנו בפוסטים כאלו

    תודה.

    ד.א.: האם יש מדריך שכתבת/מתכוון לכתוב המסביר איך אני מעלה אפליקציה/אתר ל WINDOWS MOBILE שלי? אייקון

  6. שרון לביא25 בדצמבר 2011 ב 14:24

    היי גיא, אחלה מדריך.

    שאלה, האם יצא לך לעבוד עם ה – DATA-FILTER בעברית?

    כשאני מפעיל אותו בדפדפן אין בעיה, אבל בתוך האפליקציה בANDROID השדה לא מקבל אותיות בעברית.

    די מוזר..

    אודה לעזרתך.

    שרון.

  7. גיא בורשטיין25 בדצמבר 2011 ב 22:12

    שרון, תודה על הפידבק!

    לא יצא לי לבצע חיפוש בעברית ובטח לא באנדרויד, אז קשה לי לעזור…

    בהצלחה!

    גיא

  8. וואו17 בינואר 2012 ב 10:38

    מדריכים מעולים!
    תודה על ההשקעה.הם בהחלט עוזרים!
    מחכים לעוד…

Comments are closed.