Converting common HTML5 elements into jQuery Mobile UI controls

This tutorial is about using jQuery library’s $.fn.attr method to convert HTML5 tags like <header>, <section> and <footer> into jQuery Mobile data-roles. By doing so we bypass one of the most tedious tasks: typing in data-role attributes by hand into each HTML element.

This is done within $(document).ready event:


<!-- Initialize from document ready event //-->

        $("header").attr("data-role", "header");
        $("section div:first").attr("data-role", "content");
        $("footer").attr("data-role", "footer");

<!-- And the HTML for the mobile application: //-->


<h1>My Mobile App</h1>



        A jQuery Mobile Page.



<h2>A jQuery Mobile Footer</h2>


That looks a lot cleaner.

An example of converting common HTML5 tags into jQuery Mobile UI controls.

Notice that the above example is not using $(document).ready event, which is totally fine in this situation. This way is actually even more acceptable because it takes in consideration the window object too, not just jQuery.

Moving forward.

If you are still using <div data-role = “page”> I suggest switching to the <header>, <section> and <footer> tags. It will simplify your CSS selector code, because a <div> nested in a <div> parent is less coherent; it gives more clarity to the structure of your page when Google scans it and makes the code easier to read.

But there is one more thing.

section This new HTML5 tag is used for grouping thematically-related content. At first, it sounds like a div element, but its not. The div has no semantic meaning. The section tag does.

Before replacing all your div’s with section elements, always ask yourself – Is all of the content in my <section> tag related?

jQuery Mobile uses Ajax-based pages. In other words, all pages of the application are already included within the same DOM. The pages switch using CSS’s display:none and visibility:none mechanism. Having said this, using the section tag together with jQuery Mobile is not illegal or wrong just because it defines an entire page, and not a section. In fact, it is completely normal to consider a page in an application a section that contains information that is thematically-related, for example: the app settings page.

Using all you have

Sometimes JavaScript programming is about using all you have. This tutorial explored the possibility of using HTML5 (new tags like section), the original jQuery library (.attr) and the jQuery Mobile library’s data-roles attributes.

It’s important to go the extra mile and learn just one more thing, that is often we lay off for later. That one more thing may save you hours or sometimes weeks (in the long run it adds up.)

Being good at programming is not about knowing a lot. It’s about knowing a small set of the right things and using them together. They don’t always have to be the same everyone else is using.

For example you could have used $(“section”).data(“role”, “page”); instead of .attr, perhaps because you learned to use .data method first, so it is more natural to you. It accomplishes the same thing, but your programming style is different. And there is nothing wrong with that.

The lesson here is that there is no “right way” of doing something. Learn methods, functions and ways of doing things that are natural to you, and apply them in your work to the best of your ability.

jQuery Tutorials