Question

What exactly is the purpose for the data-role="content"?
I’m testing out a few things like animations/transitions etc and so, when I removed that from the container div that had the content, everything still worked.

For example if I do this:

<div id="secondPage" data-role="page">
    <div data-role="header">
    <h1>This is page 2 </h1>
    </div>

    <div data-role="content">
       <p>This is page 2 with some regular text here.</p>
       <p><a href="#firstPage" data-direction="reverse">Go to first page.</a></p><br/>
    </div> 
</div>

it works as it should, but if I then remove the data-role="content" part
and make it for example like this:

  <div id="secondPage" data-role="page">
        <div data-role="header">
        <h1>This is page 2 </h1>
        </div>

        <div>
           <p>This is page 2 with some regular text here.</p>
           <p><a href="#firstPage" data-direction="reverse">Go to first page.</a></p><br/>
        </div> 
    </div>

it still works so I’m a bit hazy as to the need for it. So whats the point of it?

Answer 1

The data-role="content" is simply a convention and isn’t required.

To quote the jQuery site:

“Although the page structure outlined above is a recommended approach for a standard web app built with jQuery Mobile, the
framework is very flexible with document structure. The page, header,
content, and footer data-role elements are optional and are mostly
helpful for providing some basic formatting and structure. The page
wrapper that used to be required for auto-initialization to work is
now optional for single page documents, so there isn’t any required
markup at all. For a web page with a custom layout, all of these
structural elements can be omitted and the Ajax navigation and all
widgets will work just like they do in the boilerplate structure.”

While they are not required, they are used by jQuery to apply classes at pagecreate,
A div with data-role="content" for example will have the class .ui-content added to it.