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

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

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

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

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

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

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

כל פריט ברשימה מצויין ע”י תגית 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>

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

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

ונקבל:

נוסיף גם תמונה עבור כל משתמש – תמונת פרופיל הטוויטר שלו, בתור 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>

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

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

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

במקרה שלנו, נוסיף לדף את הגדרת ה- 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>

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

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

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

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

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

הוספת קטגוריות / מפרידים לרשימה (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>

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

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

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

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

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

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

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

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

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

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

תהנו!