Jquery Mobile for Beginners
Posted on August 21, 2011 | Comments Off on Jquery Mobile for Beginners
Anatomy of a Page
Viewport meta tag
Note above that there is a meta viewport tag in the head to specify how the browser should display the page zoom level and dimensions. If this isn’t set, many mobile browsers will use a “virtual” page width around 900 pixels to make it work well with exisitng desktop sites but the screens may look zoomed out and too wide. By setting the viewport attributes to content=”width=device-width, initial-scale=1, the width will be set to the pixel width of the device screen.
These settings do not disable the user’s ability to zoom the pages which is nice from an accessibility perspective. There is a minor issue in iOS that doesn’t properly set the width when changing orientations with these viewport settings, but this will hopefully be fixed a a future release. You can set other viewport values to disable zooming if required since this is part of your page content, not the library.
Inside the body: Pages
Inside the
Within 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">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>
Titles in multi-page templates
On multi-page documents, we follow a similiar convention, but since all the page share a common title, we have a data-title attribute that can be added each page container within a multi-page template to manually define a title. The title of the HTML docuemnt will be automatically updated to match the data-title of the page currently in view.
<div data-role="page" id="foo" data-title="Page Foo"> </div><!-- /page -->
Linking without Ajax
Links that point to other domains or that have rel=”external”, data-ajax=”false” or target attributes will not be loaded with Ajax. Instead, these links and will cause a full page refresh with no animated transition. Both attributes have the same effect, but different semanic meaning. rel=”external” should be used when linking to another site or domain, while data-ajax=”false” is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.
“Back” button links
If you use the attribute data-rel=”back” on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor’s default href. This is particularly useful when linking back to a named page, such as a link that says “home”, or when generating “back” buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers. Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the data-direction=”reverse” attribute instead.
Page transitions
The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any object or page change event, which apply the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.
To set a custom transition effect, add the data-transition attribute to the link. Possible values include:
Creating dialogs
Any page can be presented as a modal dialog by adding the data-rel=”dialog” attribute to the page anchor link. When the “dialog” attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the “dialog” appear to be suspended above the page.
Prefetching pages
Usually, it’s a good idea to store your app’s pages in several single-page templates instead of one large multi-page template. This minimizes the size of the page’s DOM.
When using single-page templates, you can prefetch pages into the DOM so that they’re available instantly when the user visits them. To prefetch a page, add the data-prefetch attribute to a link that points to the page. jQuery Mobile then loads the target page in the background after the primary page has loaded and the pagecreate event has triggered. For example:
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Sameera at LinkedIn
