Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Nutrition Tracker

This example illustrates how to make a semi-complex list with rich formatting using jQuery Mobile. jQuery Mobile provides some classes to assist with making a custom list but additional css will be required. To demonstrate how to build a custom list, we are going to create the list-view of a Nutrition Tracking application.

This is what we want to achieve when we are finished. Nutrition Tracking App - Final Product

First, we will need to create an empty list-view

    <ul data-role="listview">

Next, we will add the list-divider, the blue area at the top of the page in the above figure.

    <ul data-role="listview">
        <li data-role="list-divider">
            <h1> Description</h1>

This produces the following image, which is not quite what we were looking for.

Nutrition Tracking App - list-divider 1

To fix this we must add some custom classes.

    <style type="text/css" media="screen">
        .fact {
            width: 10%;
            display: inline-block;
            text-align: center;
            text-overflow: ellipsis;
            overflow: hidden;
        .fact.factDescription {
            width: 33%;
            text-align: left;

Both fact and factDescription use a percentage as their width. This will ensure the correct formatting on all screen resolutions. Now apply the new classes to the elements.

     <ul data-role="listview">
        <li data-role="list-divider">
            <h1 class="fact factDescription">Description</h1>
            <span class="fact">Calories</span>
            <span class="fact">Carbs</span>
            <span class="fact">Fat</span>
            <span class="fact">Protein</span>
            <span class="fact">Sugar</span>
            <span class="fact">Sodium</span>

We now have our list-divider looking correctly.

Nutrition Tracking App - list-divider 2

Now, we must add a list item. It will follow the same structure as our list-divider.

        <h1>Kamut Puffs</h1>
        <p class="fact factDescription">1 cup 16g</p>
        <span class="fact">50</span>
        <span class="fact">11</span>
        <span class="fact">0</span>
        <span class="fact">2</span>
        <span class="fact">0</span>
        <span class="fact">0</span>

The next steps would be to add more items and ideally to template these items with your favorite template engine such as handlebars or the jquery plugin