Construct a Mobile Website with Jquery Mobile

Edited by Derekkandler, Eng, Lynn, Anonymous

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 | I need help

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 | I need help

  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 | I need help

  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 | I need help

  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 | I need help

  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 | I need help

  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 | I need help

  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 | I need help

  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 | I need help

  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 | I need help

  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 | I need help

  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 | I need help

  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 | I need help

    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

Comments

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




Derekkandler
Premier Author
4 Articles Started
31 Article Edits
1,300 Points
Derekkandler is a premier author with VisiHow. Derekkandler has achieved the level of "Apprentice" with 1,300 points. Derekkandler has started 4 articles (including this one) and has also made 31 article edits. 4,300 people have read Derekkandler's article contributions.
Derekkandler's Message Board
Derekkandler: Hi, my name is Derekkandler.
Derekkandler: Can I help you with your problem about "Construct a Mobile Website with Jquery Mobile"?
 

Article Info

Categories : Websites

Recent edits by: Lynn, Eng, Derekkandler

Share this Article:

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

Do you have a question not answered in this article?
Click here to ask one of the writers of this article
x

Thank Our Volunteer Authors.

Would you like to give back to the community by fixing a spelling mistake? Yes | No