Before I show you how to customize jQuery Mobile pages and widgets let us first discuss what is jQuery Mobile and how it works. The standard jQuery Mobile application is built from at least one page up to any number you can think of. The page is the primary unit of interaction in jQuery Mobile and is used to group content into logical views that can be animated in and out of view with page transitions. An HTML document may start with a single “page” and the AJAX navigation system will load additional pages on demand into the DOM as users navigate around. Alternatively, an HTML document can be built with multiple “pages” inside it and the framework will transition between these local views with no need to request content from the server.

Page structure

Inside a body tag each page is identified with the data-role=”page” attribute:

<div data-role="page">
    <!-- Inner content -->
</div>

Inside the page container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a page are divs with data-roles of header, content, and footer:

<div data-role="page">
    <div data-role="header">
        <!-- Inner content -->
    </div>
    <div data-role="content">
        <!-- Inner content -->
    </div>
    <div data-role="footer">
        <!-- Inner content -->
    </div>
</div>

This structure is what page looks like before jQuery Mobile can enhance its markup. Markup enhancement is the process that triggers after pagecreate page event and gives page its final look. Take a look what page looks like during the pageinit page event:

<div data-role="page" data-url="/_display/" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 498px;">
    <div data-role="header" class="ui-header ui-bar-a" role="banner">
        <!-- Inner content -->
    </div>
    <div data-role="content" class="ui-content" role="main">
        <!-- Inner content -->
    </div>
    <div data-role="footer" class="ui-footer ui-bar-a" role="contentinfo">
        <!-- Inner content -->
    </div>
</div>

As you can see basic page structure stayed the same, only difference is inclusion of some new classes. Every part of a page, including a page has received new style and class attributes. What I want you as a reader to do is look at new header, content and footer classes. You will need to use / change them if that proves to be a needed.

How to change page look

Let’s create our first example. I will show you how to change application background color and remove content padding. First let me tell you few notes before we start. Page data-role=”content” will never automatically cover whole available space, unless it is filled, so instead of withcontent background we will change with page background. This may sound as a boring and easy example (everyone can change a little bit of CSS) but bear with me, I will explain everything at the end of this chapter.

CSS

.ui-page {
    background: royalblue !important;
}
.ui-content {
    padding: 0 !important;
    background: orange !important;    
}

Notice the use of !important property. Usually its use is considered narcissistic & selfish or lazy but in our case it is only thing we can do to change those values, unless you consider changing the CSS on a framework level (never do this unless you are 100% sure what are you doing). Surprisingly a lot of web developers never hear of it, that’s why around 1/5 of jQuery Mobile related StackOverflow questions are related to the inability to successfully change page content. A working example can be found here: http://jsfiddle.net/Gajotres/LJfJF/ CSS can also be used easily to resize page content, just use this few lines:

.ui-content {
    padding: 0 !important; 
    position : absolute !important; 
    top : 40px !important;  
    right : 0 !important; 
    bottom : 40px !important;  
    left : 0 !important;     
}

Top and bottom should be / / 40 px depending on header / footer visibility. So use 0 if header and footer don’t exist. This is a great solution if you need clear page for Google maps implementation (article about that topic can be found here).

Widgets

All widgets begin with native form elements with rich HTML semantics that are enhanced to make them more attractive and finger-friendly. Let’s take a look how basic jQuery Mobile button looks like:

<a href="#" data-role="button">Link button</a>

Just like with a previously mentioned page, button structure looks different after the page markup enhancement:

<a data-role="button" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Link button</span>
    </span>
</a>

Button HTML structure has been completely redesigned. This is not all, there’s another type of button and it looks like this:

<input type="button" value="Classic HTML button"/>

This one looks a little bit different after the markup enhancement process:

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Classic HTML button</span>
    </span>
    <input type="button" value="Classic HTML button" class="ui-btn-hidden" data-disabled="false"/>
</div>

It is different than the previous button example. There are two major difference here, <div> is now parent button container (previously <a> tag was the container ) and original <input> button is now hidden part of a newly formed button. This is a major difference. Let us give every button an id attribute. With it, we can easily change first button CSS but a second button is a mission impossible. Input tag is no more a parent element so id can’t be used to modify newly create button style. To do this we will wrap it inside an another <div> tag.