Construct a Mobile Website with Jquery Mobile

Edited by Derekkandler, Eng, Lynn

Jqm tutorial header image.png

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.

Was this helpful? Yes | No
Ad

Steps

  1. 1
    Navigate to jQuery Mobile's homepage, and then click on the "Download" tab from the main navigation menu.
    Advertisement
    Was this step helpful? Yes | No
  2. 2
    Scroll down on the Download page until you see a Copy-and-Paste Snippet for CDN-hosted files section
    .
    Copy the lines of code onto your clipboard. These three reference files are all that you need to implement the framework.
    CDN Files.PNG
    Advertisement
    Was this step helpful? Yes | No
  3. 3
    Open your preferred development software and create a new HTML document
    .
    If you do not have development software, open the Notepad application on your computer.
    Was this step helpful? Yes | No
  4. 4
    Add the references to your HTML document
    .
    Inside your head tags, paste the CDN-hosted file links.
    JQueryMobileHead.PNG
    Was this step helpful? Yes | No
  5. 5
    Create your first "page"
    .
    With the jQuery Mobile framework, you create multiple pages within the same HTML document. Inside the body tags, create a div container. Add the data-role attribute, and assign it a value of page. Finally, add the ID attribute, and assign it a value of home.
    JQueryMobilePageDiv.PNG
    Was this step helpful? Yes | No
  6. 6
    Add the header, content and footer div containers
    .
    Inside your page div container, create three more div tags. Using the data-role attribute, assign values of header, content and footer respectively. This is the basic structure of a jQuery Mobile page.
    JQueryMobilePageStructure.PNG
    Was this step helpful? Yes | No
  7. 7
    Add header and footer titles
    .
    Using the h1 heading tag, create heading titles for your header and footer tags.
    JQueryMobileHeaderAndFooterTags.PNG
    Was this step helpful? Yes | No
  8. 8
    Create 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.
    JQueryMobilePage2.PNG
    Was this step helpful? Yes | No
  9. 9
    Create 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.
    Was this step helpful? Yes | No
  10. 10
    Create the navigation menu structure
    .
    Inside the content div container, create an unordered list. Add the data-role attribute, and set its value to listview. Add the data-inset attribute, and set its value to true. Inside the ul tags for the unordered list, add two list-item tags (li tags).
    JQueryMobileListStructure.PNG
    Was this step helpful? Yes | No
  11. 11
    Create 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.
    JQueryMobileMenuListLinks.PNG
    Was this step helpful? Yes | No
  12. 12
    Add menu links to other pages
    .
    JQueryMobileMenuLinkHeader.PNG
    Now that your menu is created, you need to set anchor tags on your "home" and "page 2" pages to access it. Scroll up and find the header section of your home page. Add an anchor tag inside the header container, just before the h1 tag. Using the same linking process as you did with the menu, set the href attribute to hashtag "main_nav". Add the data-role attribute, and give it a value of button. Add the data-icon attribute, and give it a value of bars. Finally, add the data-iconpos attribute, and give it a value of notext. This creates a button to the left of your header title. Repeat this step for the page2 page.
    Was this step helpful? Yes | No
    Advertisement

Tips

  • 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.

Warnings

  • 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

If you have problems with any of the steps in this article, please post in the comments section below.

Comments

VisiHow welcomes all comments. If you do not want to be anonymous, register or log in. It is free.

Article Info

Categories : Websites

Recent edits by: Eng, Derekkandler

Share this Article:

Thanks to all authors for creating a page that has been read 1,255 times.