The Listify Plugin - Exercise

Contact Us or call 1-877-932-8228
The Listify Plugin - Exercise

The Listify Plugin

Duration: 20 to 30 minutes.

In this exercise, you will write a plugin to convert a set of images, wrapped in a div, into a jQuery Mobile listview. The markup we aim to act upon and modify is shown below, similar to that from the "Collapsify" example above:

<div class="listme" data-theme="a">
<img src="images/book1.jpg" data-link="#home" title="Book 1" alt="Demoveo eu inhibeo immitto in nulla quae. Haero facilisi valetudo nulla plaga, facilisis.">
<img src="images/book2.jpg" data-link="" title="Book 2" alt="In, augue eu utinam ut vulpes feugiat nulla autem damnum esca in melior.">
<img src="images/book3.jpg" data-link="" title="Book 3" alt="Te diam tum distineo iriure roto, mara. In indoles enim iaceo abico zelus mauris vicis indoles quis. Wisi scisco.">
<img src="images/book4.jpg" data-link="" title="Book 4" alt="Vel singularis vel, vicis capio importunus eum vel suscipit oppeto nisl ut iustum indoles nullus.">

The screenshot below shows the above markup without the effect of the plugin, on the left; the right screenshot shows the page after the plugin is applied.

listify plugin exercise

  1. Open Plugins/Exercises/listify/jquery.webucator.listify.js - there's no need to edit the index.html file.
  2. Where indicated, get the element's data-theme value - that is, the element being acted upon by the plugin (to which we will refer as "the element" going forward).
  3. Assign the collection of images contained in the element to this.images.
  4. Create a DOM element, mylistview, which is an unordered list with appropriate data-role and data-theme attributes to display as a jQuery Mobile listview.
  5. Use the jQuery method after to add the new unordered list after the element.
  6. Inside the each loop, append to mylistview a list item containing a link containing an image and some text; set alt and other attributes appropriately.
  7. Remove the element being acted upon - we've replaced the div with the newly created unordered list.
  8. Unlike the "Collapsify" example above - in which we explicitly invoked our plugin from the index.html file - let's make this plugin run itself: where indicated at the bottom of the file, add a call to invoke the plugin inside the loop, thus applying listify to any div with class listme.
  9. Test your work in a mobile browser.



Code Explanation:

We get the element's theme with this.element.attr('data-theme'), saving it as this.datatheme for later use.

On the next line, this.images = this.element.children() assigns the set of images contained in the element to this.images.

We next create the unordered list that become the container for our listview, with appropriate data-role and (using the value we found previously) data-theme attributes.

The jQuery after method adds our new listview to the DOM, following the element being acted upon.

We use each to loop over the collection of images, appending a new list item/link/image for each

We then remove the original div element and use mylistview.parent().enhanceWithin() to refresh the DOM.

Last, we call $(this).listify() for each div of class listme on a page, binding this call (with the on method) to the pagecreate event.