Mobile

Build Lists and Popups in Minutes Using jQuery Mobile

Aurelio De Rosa
Share

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:

  1. popupbeforeposition: It’s fired after the popup completed preparations for opening but before is actually opened
  2. popupafteropen: fired after the popup is completely opened
  3. 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.

CSS Master, 3rd Edition