Construct a Mobile Website with Jquery Mobile
Edited by Derekkandler, Eng, Lynn
jQuery Mobile is a touch-optimized, HTML5-based user interface system. It is built on the jQuery and jQuery UI platform, and it is ideal for rapid mobile development. The jQuery Mobile framework utilizes special attributes to help define and style your elements, without having to write detailed class rules yourself.
- 1Navigate to jQuery Mobile's homepage, and then click on the "Download" tab from the main navigation menu.Advertisement
- 3Open your preferred development software and create a new HTML document.If you do not have development software, open the Notepad application on your computer.
- 8Create a second page.Outside of the div container that has its data-role attribute set to page, create a new div container. Add the data-role attribute, and then set it to page. Add the ID attribute, and then set it to page 2. Finally, add div containers for the header, content and footer, so the structure resembles the home page.
- 9Create a menu page.The menu page is going to be created in the same fashion as the first two pages, but without a footer. Create a div container, and set its data-role attribute to page. Add the ID attribute, and give it a value of main_nav.
- 11Create the menu links.Inside the first list-item tags, create an anchor tag. Add the href attribute to the anchor tag. Use the hashtag symbol to target an ID attribute, and then type "home". This targets the "home" div container. Follow this same process for the second list-item, but this time type hashtag "page2" to target the second page.
- 12Add menu links to other pages.Advertisement
- Create as many pages within the same HTML document as you like. jQuery Mobile uses an AJAX navigation system that automatically kicks in when you create multiple pages within the same document.
- Add the data-transition attribute to anchors for a visually appeasing transition between pages. The available transitions are fade, pop, flip, turn, flow, slidefade, slide, slideup and slidedown.
- Use the data-theme attribute to style nearly every element in your project. By default, jQuery Mobile comes with five color swatches for you to use. The theming system uses letters as values. Consequently, the data-theme attribute accepts values of a, b, c, d and e when you first download it. Check out the jQuery Mobile Themeroller to create a custom theme, with up to 26 different color swatches!
- Use the data-position attribute to create "sticky" or fixed headers and footers for your website. Add this attribute to a div container that has its data-role set to header or footer, and the data-position value to fixed.
- Check out the jQuery Mobile Color Kit to start developing with 26 different theme swatches.
- Be sure to use HTML comments to separate your jQuery Mobile pages. This saves you a ton of time down the road, as a single HTML document with multiple "pages" gets bloated pretty quickly.
Sources and Citations
- jQuery Mobile Color Kit
- jQuery Mobile
- jQuery Mobile Themeroller
- If you have problems with any of these steps, ask a question for more help, or post in the comments section below.
Categories : Websites
Recent edits by: Eng, Derekkandler