Build Lists and Popups in Minutes Using jQuery Mobile

In my last article, I explained what’s new in jQuery Mobile 1.2.0, the latest release of the popular mobile development framework. The article describes the new devices compatibility, the popup widget, the collapsible lists, and several deprecated methods. Today, I’ll show you a complete and functional example which will be powered by the new features and widgets found within jQuery Mobile’s latest evolution.

Working With jQuery Mobile’s New Tools

The first feature discussed was the expanded device compatibility. Unfortunately, all that I can do to show off jQuery Mobile’s increased compatibility coverage is suggest that you to try the following example on one of those newly-supported devices (like those powered by Tizen) and see how jQuery Mobile 1.2.0 enhances the page. The next section referred the new popup widget, and how you can create a basic popup of your own. jQuery Mobile allows you to put any content that you want inside a container that floats above the current page. The popup widget has three events that are possible to catch and manage:

popupbeforeposition: It’s fired after the popup completed preparations for opening but before is actually opened
popupafteropen: fired after the popup is completely opened
popupafterclose: fired after the popup is completely closed

The final code will have two links that open a popup. The first link, having the ID helloPopup, shows a basic popup that has simple text, while the second doesn’t call the popup directly. The former will show an alert when each of those are triggered to better understand their execution order and the time when they’re fired. This will be done using the following code.

$("#helloPopup").on(
   "popupbeforeposition popupafteropen popupafterclose",
   function(event) {
      alert(event.type);
   }
);

The latter will programmatically open the popup which contains an image centered on the current window, as you can see below.

$("#imagePopupLink").click(function() {
   $("#imagePopup").popup("open", {positionTo: "window"});
});

jQuery Mobile List Management

The next set of improvements implemented by the jQuery team were about the lists. The first two were Listview Autodividers and Collapsible Lists, which will be merged in the example page created below. Autodividers enhance the list readability by adding alphabetical list dividers, while collapsible lists are designed to make the most of the limited screen space on mobile devices. The relevant code is shown below.

<div data-role="collapsible">
  <h3>Collapsible List with Listview Autodividers</h3>
  <p>
    The following list is inside a collapsible element and it
    uses also the new <code>data-autodividers</code> attribute.
  </p>
  <ul data-role="listview" data-autodividers="true" data-inset="true">
    <li><a href="https://www.sitepoint.com/author/aderosa/">Aurelio De Rosa</a></li>
    <li><a href="http://www.sitepoint.com">BuildMobile.com</a></li>
    <li><a href="http://www.sitepoint.com">JSPro.com</a></li>
    <li><a href="http://www.sitepoint.com">PHPMaster.com</a></li>
    <li><a href="http://www.sitepoint.com">SitePoint.com</a></li>
  </ul>
</div>

The third major enhancement to jQuery Mobile 1.2.0 was the introduction of Read-only Lists. This addition is more of an aesthetic change than a functional one, so you’ve got to see the code in action to understand the difference.

And finally, the new version of jQuery Mobile brought about page loading deprecated methods and properties. In the following code, I’ve included a function that catches the mobileinit event to set the global configuration of the loading widget using the new $.mobile.loader.prototype properties.

$(document).on("mobileinit", function() {
   $.mobile.loader.prototype.options.text = "Please wait...";
   $.mobile.loader.prototype.options.textVisible = true;
   $.mobile.loader.prototype.options.theme = "e";
});

In addition, I’ll attach a function to the pageshow event that will show the widget and then hide it after 1.5 seconds using the new $.mobile.loading() method.

$(document).on("pageshow", function() {
   $.mobile.loading("show");
   setTimeout(function() { $.mobile.loading("hide"); }, 1500);
});

Lastly, I’ll create a button that, once clicked, shows the same loading widget, but this time it’ll use a local configuration. A local configuration allows you to overwrite the global configuration when you call this method to create a specific style. Just like the previous loading widget, after 1.5 seconds it will be hidden.

$("#loadingLink").click(function() {
   $.mobile.loading("show", {
      theme: "b",
      text: "Different message...",
      textVisible: true
   });
   setTimeout(function() { $.mobile.loading("hide"); }, 1500);
});

Putting it All Together

As promised, below is a jQuery code sample that encompasses all of the aforementioned new techniques afforded by the 1.2.0 version. The following example will make use of and expand the above snippets to show you the discussed features.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Working with jQuery Mobile 1.2.0</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script>
      $(document).on("mobileinit", function() {
        $.mobile.loader.prototype.options.text = "Please wait...";
        $.mobile.loader.prototype.options.textVisible = true;
        $.mobile.loader.prototype.options.theme = "e";
      });
    </script>
    <script src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script>
      $(document).on("pageinit", function() {
        $("#helloPopup").on("popupbeforeposition popupafteropen popupafterclose", function(event) {
          alert(event.type);
        });
        $("#imagePopupLink").click(function() {
          $("#imagePopup").popup("open", {positionTo: "window"});
        });
        $("#loadingLink").click(function() {
          $.mobile.loading("show", {
            theme: "b",
            text: "Different message...",
            textVisible: true
          });
          setTimeout(function() { $.mobile.loading("hide"); }, 1500);
        });
      });
      $(document).on("pageshow", function() {
        $.mobile.loading("show");
        setTimeout(function() { $.mobile.loading("hide"); }, 1500);
      });
    </script>
  </head>
  <body>
    <div data-role="page" id="examplePage">
      <header data-role="header">
        <h1>What's new JQM 1.2.0</h1>
      </header>
      <div data-role="content" role="main">
        <p>
          This page will show you some of the new features, widgets and
          method of <b>jQuery Mobile 1.2.0</b> explained in the article
          "<a href="https://www.sitepoint.com/whats-new-in-jquery-mobile-1-2-0/"
             title="What's New in jQuery Mobile 1.2.0?"
             target="_blank">What's New in jQuery Mobile 1.2.0?</a>".
        </p>
        <div data-role="collapsible-set">
          <div data-role="collapsible">
            <h3>Popups</h3>
            <a href="#helloPopup" data-role="button" data-rel="popup">Basic Popup</a>
            <a href="#" data-role="button" data-rel="popup" id="imagePopupLink">Image Popup</a>
          </div>
          <div data-role="collapsible">
            <h3>Collapsible List with Listview Autodividers</h3>
            <p>
              The following list is inside a collapsible element and it
              uses also the new <code>data-autodividers</code> attribute.
            </p>
            <ul data-role="listview" data-autodividers="true" data-inset="true">
              <li><a href="https://www.sitepoint.com/author/aderosa/">Aurelio De Rosa</a></li>
              <li><a href="http://www.sitepoint.com">BuildMobile.com</a></li>
              <li><a href="http://www.sitepoint.com">JSPro.com</a></li>
              <li><a href="http://www.sitepoint.com">PHPMaster.com</a></li>
              <li><a href="http://www.sitepoint.com">SitePoint.com</a></li>
            </ul>
          </div>
          <div data-role="collapsible">
            <h3>Read-only Lists</h3>
            <h4>Articles published</h4>
            <ul data-role="listview" data-inset="true">
              <li>Aurelio De Rosa<span class="ui-li-count">3</span></li>
              <li>John Doe<span class="ui-li-count">2</span></li>
              <li>Jason Parker<span class="ui-li-count">5</span></li>
            </ul>
          </div>
          <div data-role="collapsible">
            <h3>Loading</h3>
            <a href="#" data-role="button" id="loadingLink">Keep loading...</a>
          </div>
        </div>
      </div>
      <div data-role="popup" id="helloPopup">
        <header data-role="header">
          <h1>Popup</h1>
        </header>
        <div data-role="content">
          <p>Hello! I'm a brand new popup widget.</p>
          <a href="#" title="Go back" data-role="button" data-rel="back">Close</a>
        </div>
      </div>
      <div data-role="popup" id="imagePopup">
        <a href="#" data-rel="back" data-role="button" data-icon="delete"
          data-iconpos="notext" class="ui-btn-right">Close</a>
        <div data-role="content">
          <img src="http://cdn.buildmobile.com/wp-content/themes/buildmobile-v1/images/logo.png" alt="BuildMobile logo" />
        </div>
      </div>
      <footer data-role="footer">
        <h3>Aurelio De Rosa</h3>
      </footer>
    </div>
  </body>
</html>

Conclusion

Now, you should be able to master the recent changes implemented by the jQuery team in the new release of jQuery Mobile. These can serve your mobile apps and websites well, and hopefully propel your next mobile project to new heights.

Frequently Asked Questions about jQuery Mobile 1.2.0

How do I create a basic listview in jQuery Mobile 1.2.0?

Creating a basic listview in jQuery Mobile 1.2.0 is quite straightforward. You start by creating an unordered list (ul) or ordered list (ol) with the data-role attribute set to “listview”. Each list item (li) will represent a row in your listview. You can add any content you want inside the list items, including text, images, or links. Here’s a simple example:

<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

How can I add a search filter to my listview?

jQuery Mobile 1.2.0 provides a built-in feature to add a search filter to your listview. You just need to add the data-filter attribute and set it to “true” in your listview. Here’s how you can do it:

<ul data-role="listview" data-filter="true">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

How can I create a split button listview?

A split button listview allows you to add two separate links in each list item. To create a split button listview, you need to add two anchor tags (a) inside each list item. The first anchor tag will be the main link, and the second one will be the split button. Here’s an example:

<ul data-role="listview">
<li>
<a href="#">Main Link</a>
<a href="#">Split Button</a>
</li>
</ul>

How can I create a nested listview?

A nested listview allows you to create a hierarchical list with multiple levels. To create a nested listview, you need to add another unordered list inside a list item. Here’s an example:

<ul data-role="listview">
<li>
Level 1
<ul>
<li>Level 2</li>
</ul>
</li>
</ul>

How can I add a count bubble to my listview?

A count bubble is a small circle that displays a number, usually indicating the number of items in a list or the number of unread messages. To add a count bubble to your listview, you need to add a span with the class “ui-li-count” inside your list item. Here’s how you can do it:

<ul data-role="listview">
<li>
Item 1
<span class="ui-li-count">10</span>
</li>
</ul>

How can I add a thumbnail image to my listview?

To add a thumbnail image to your listview, you need to add an image tag (img) inside your list item. The image should have the class “ui-li-thumb”. Here’s an example:

<ul data-role="listview">
<li>
<img src="thumbnail.jpg" class="ui-li-thumb">
Item 1
</li>
</ul>

How can I add a divider to my listview?

A divider is a special type of list item that is used to separate groups of items in a listview. To add a divider to your listview, you need to add a list item with the data-role attribute set to “list-divider”. Here’s how you can do it:

<ul data-role="listview">
<li data-role="list-divider">Divider</li>
<li>Item 1</li>
<li>Item 2</li>
</ul>

How can I create a read-only listview?

A read-only listview is a listview that doesn’t respond to user interactions. To create a read-only listview, you need to add the data-inset attribute and set it to “true” in your listview. Here’s an example:

<ul data-role="listview" data-inset="true">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

How can I create a listview with icons?

To create a listview with icons, you need to add an anchor tag with the data-icon attribute inside your list item. The value of the data-icon attribute should be the name of the icon you want to use. Here’s how you can do it:

<ul data-role="listview">
<li>
<a href="#" data-icon="star">Item 1</a>
</li>
</ul>

How can I create a listview with a formatted content?

To create a listview with a formatted content, you need to add a heading tag (h1, h2, h3, etc.) and a paragraph tag (p) inside your list item. Here’s an example:

<ul data-role="listview">
<li>
<h2>Heading</h2>
<p>Paragraph
</li>
</ul>