Learn how to customize jQuery Mobile application

Before I show you how to customize jQuery Mobile pages and widgets let us first discuss what is jQuery Mobile and how it works. 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 :

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:

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

Lets 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 with content 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

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.

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:

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.

How to change widget look

Everything we talked about page modifications can also be used here, with a little twist.

Notice how second button CSS declaration is not using !important. That is because wrapper div has only an id attribute so our declaration starts with # sign. If declaration is starting with the # sign it don’t requires !important to override CSS rules.

If you compare this to the button from our previous example you will notice that it has one <span> element more. That precise <span> holds our icon.

It also has this CSS definition:

.ui-btn-icon-left .ui-icon {
left: 10px;
}

This is another great and specific example. To move this button to the right it will not be enough to set new rule like this: right: 10 !important; . Button will stay on the left side, even if we force right with !important rule. There are 2 distinct solutions to this problem. Java script could be used to remove that specific class .ui-btn-icon-left , or in our case we need to reuse left so that button still moves to the right side.

To do that just use large percentage number for our left definition:

.custom-btn .ui-icon {
left: 94% !important;
}

94% will be enough to move a button to the right. Point of this specific example was to teach you that some cases can’t be overridden, but there are always some other option, even if they requires javascript.

As you can see <h6 > is filled with additional content and according to valid HTML markup this is an error. Point is, don’t care about valid HTML.

Tools

There are few tools that can make our lives much easier in this case.

For Firefox browsers use Firebug plugin for real time HTML / CSS manipulation. It will give you a ability to see enhanced page markup, change CSS on the fly (much easier if you want to see what will happen when changes are applied without doing it manually) and copy inner HTML structure.

Chrome also has a firebug plugin but you should steer clear of it. It is a much much lighter version of Firefox firebug and at the same time Chrome has an excellent built tool called “Developer tools” . It can be easily invoked with CTRL + SHIFT + I combination. My Macintosh users can open it with this combination: Command + Option + i .

My final advice would be stick with a Chrome developer tools, Firebug plugin is known for been extremely resource hungry.

I'm a software architect and creative code developer. Blame it on my parents, my upbringing, or my obsession with the IT, but folks tell me I am really, really good at what I'm doing. When I'm not meddling with HTML5 and web development, I work as a senior Java developer in one of the biggest insurance companies in the world. Google+

There is already an identifier. Is this a typo or am I missing something else?

Thanks.

http://www.dragan-gaic.info Gajotres

Sorry that was a big fat typo.

It is fixed now, including the jsFiddle example.

Thank you for your comment, I missed it completely and it is a vital point of this article.

Lorenz

I think the approach above can be used to move elements around (e.g. the position of an icon’s button, the overflow of the text in a button, etc.). Am I wrong?

Thank you again!!

http://www.dragan-gaic.info Gajotres

Give me few hours and I will update my article with that specific information, for example how to move icon inside a button. Maybe even something more. So come back tomorrow.

Lorenz

Ok! Thank you very much for your support and for sharing your knowledge!!

http://www.dragan-gaic.info Gajotres

Take a look at the new advanced example. I can go even further can create even more complex example that will use custom CSS media queries.

Balaji

Nice “How To” article on JQM customization. Thanks …….

David

Hi.

I have followed your post and it help me a lot. Some time ago I found this page:http://m.rolex.com/

Do you think is possible to modifiy jqm theme to get a look similar to this?.

Thanks

http://www.gajotres.net Dragan Gaić

This is jQuery Mobile 1.03 theme, so you can easily recreate it in theme builder tool.

http://websiteindevelopment Ken

I’m using jquery mobile to build a website containing two accordion widgets. I want all collapsible elements in one set to be collapsed (for small-screen devices), and all collapsible elements in the other set to be expanded (for large-screen devices), based on screen width, when the page loaded.

I’m using two classes of ‘s and based on a media-query device-width test, one or the other div’s will have display:none attribute, therefore only one of the collapsible sets will be appear. This works fine, but I also want the collapsed/expanded state of the one that is presented to be based on the screen size.

My plan was to use a js script to modify ____ based on screen.width that would be triggered by the onload event. Can you fill in the blank for me? (I’m a novice js programmer, I’m pretty much live in the world of php which is not useful for this.)

So if I copy and paste your code from http://jsfiddle.net/Gajotres/eAA9Z/ and save it locally to run it in my browser it doesn’t work any more. Obviously I uncomment out line 8 which holds “jquery-1.9.1.min.js”…what could I be doing wrong, the example is not using any external resources (it still works on jsfiddle if you remove them) what cud I be doing wrong…thank you.