Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery-mobile data-role=content clarification

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?

like image 380
somdow Avatar asked Aug 20 '12 23:08

somdow


1 Answers

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.

like image 199
Jeemusu Avatar answered Nov 15 '22 20:11

Jeemusu