How does jquery mobile work

The page is the main unit in jQuery Mobile. A typical page will be divided into three parts: header, content and footer. The only mandatory section is the content. Every part is declared using a div element with the corresponding role:.

If you are confident enough that your users will be using HTML5 browsers, then you can use any block element you like.

Every part — including the page, header, footer and content — can have its own swatch color in the current theme. Therefore, a theme the default one or our own customized theme can have different color swatches, which we define using data-theme attribute. Every swatch color is defined using a letter, from a to z. However, not every theme would include so many color swatches, and the default one goes up to e. A header may contain up to two links, and the footer has no limit.

Headers and footers are inline by default; so, if there is enough content, bars may not be visible when scrolling. In compatible mobile browsers, it will use fixed-position elements; in other browsers, it will polyfill to a floating bar. A jQuery Mobile document i. Well, the decision is up to you. We can also have external jQuery Mobile documents to load pages automatically.

To load an external file, we just link to it. In the meantime, the framework will show a nice loading animation over the page. We can change the default transition and use one of the many options available, as well as design our own transitions using CSS3 animations. Transitions must be defined using data-transition on the a element and one of the following values:.

Check the official documentation created with jQuery Mobile, by the way to browse all of the components and options. In this section, we will cover the most useful components that a mobile Web app would need, including buttons, collapsible panels, lists and form controls. The element is typically inline, and the clickable area is only the text. That is not a good experience for touch users. There are even more goodies in list views — find out more in the jQuery Mobile documentation. The grey, black and blue rounded widgets produced by jQuery Mobile look pretty nice, but life would be dull if we all had to use the same style for our mobile apps!

To this end, jQuery Mobile lets you create custom themes that govern things like:. The default jQuery Mobile theme comes with 5 swatches. Typically, to make a page element use a particular swatch, you use the data-theme attribute. For example:. Theming lists is a bit more complex, and more flexible, than regular theming — you can assign different swatches to separate components of lists, such as list items, dividers, count bubbles, split buttons, and so on.

To reduce load time, jQuery Mobile themes use CSS3 extensively for things like rounded corners, drop shadows and gradients, rather than using images. As well as making it easy to build mobile user interfaces, jQuery Mobile adds some mobile-specific events that you can use to detect actions performed on mobile devices.

For example, you can use taphold to detect if the user tapped and held their finger on an element, and swipe to detect if the user swiped horizontally from left to right or right to left across the element:. Since jQuery Mobile is still in alpha, event support is a bit hit-and-miss right now, so your mileage may vary on different mobile devices! Want to get the most from jQuery Mobile? It contains all the info you need to start building great-looking mobile web apps with ease! You can learn more about the book over on the Elated Store.

Have fun! Do you mean CSS background images? Of course you need to ensure that your text and background images look OK at both sizes. Thanks much for the nicely composed article.

This helped me in getting started with mobile web development. Great tutorial I tried using lists with alpha 1 jquery they were working fine but when i upgraded to alpha 3 it all got messed up how can i upgrade these to alpha3?

Junaid: Lists work OK for me in alpha 3. Can you post a URL of the problem in a new topic please, and we can take a look? This lets you create a toolbar at the top of the page, used for things like the page title and buttons.

Please help. I commend you on this nicely put article, will be depending on it to spawn the first web app. Question though, would you use jQuery document. More info:. Thanks for the wonderful article. I have a list view with 48 x 48 pixels icons. Effectively they seem to be displayed as 80 x 80 pixels so the display is not very nice. I tried to create a specific style in my own style sheet but nothing change.

This will show you all the CSS classes assigned to the icon and its surrounding elements. Great article. It works fine in webspace, but does not work when in PhoneGap, in the iPhone Simulator. I see there are Tutorial sites out there showing how to build Ajax contact forms. PHP needs to run on a server. I put it into my index. It is open-source and a cross-platform-compatible framework. It uses features of jQuery and jQuery UI for making mobile compatible websites.

How to use it? It contains well written, well thought and well explained computer science and programming articles, Skip to content. Change Language. Related Articles. Table of Contents. Save Article.