Introduction to jQuery mobile

What is it?

  • mobile framework that uses HTML, CSS, and the jQuery library
  • works across all platforms
  • created to enhance and simplify the development of mobile web applications

How does it work?

  • you can download the framework at: https://jquerymobile.com/ and add the links to the <head> tag of your html file or
  • you can download the starter template on the resources page (jQuery files are already linked)
  • All pages are contained in a single HTML file

Creating pages and content

  • use the attribute "data-role" to create pages and add content.

Example:

http://api.jquerymobile.com/data-attribute/

Basic Framework

<!DOCTYPE html> 
<html>
<head>
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
	<script src="http://code.jquery.com/jquery-[version].min.js"></script>
	<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

<body>
	...content goes here...
</body>
</html>

1. Set up your basic structure

Basic Framework


	<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" /> 
	<script src="http://code.jquery.com/jquery-[version].min.js"></script>
	<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

1. Link to jQuery mobile CSS

2. Link to jQuery library

3. Link to jQuery mobile JS

Basic Framework

<body>
   <div data-role="page">
	<div data-role="header">...</div>
	<div role="main" class="ui-content">...</div>
	<div data-role="footer">...</div>
</div>
</body>

2. Add content inside the body tag

Basic Framework

2. Add content inside the body tag

  • The data-role="page" is the page displayed in the browser
  • The data-role="header" creates a toolbar at the top of the page (often used for title or search buttons)
  • The data-role="main" defines the content of the page, like text, images, buttons, forms, etc. (you can also use data-role="content")
  • The "ui-content" class adds extra padding and margin inside the page content
  • The data-role="footer" creates a toolbar at the bottom of the page
  • Inside these containers, you can add any HTML elements - paragraphs, images, headings, lists, etc.

Basic Navigation

<div data-role="content">    
        <ul data-role="listview">
            <li><a href="#who">Who</a></li>
            <li><a href="#what">What</a></li>
            <li><a href="#where">Where</a></li>
            <li><a href="#when">When</a></li>
        </ul>        
    </div>

1. You can create a basic navigation using an unordered list using data-role = listview

Basic Navigation

<div data-role="content">    
        <ul data-role="listview">
            <li><a href="#who">Who</a></li>
            <li><a href="#what">What</a></li>
            <li><a href="#where">Where</a></li>
            <li><a href="#when">When</a></li>
        </ul>        
    </div>

1. You can create a basic navigation using an unordered list using data-role = listview

The id of the nav should match the id of the page div

Basic Navigation

<div data-role="navbar" data-position="fixed">
	<ul>
		<li><a href="#one">One</a></li>
		<li><a href="#two">Two</a></li>
	</ul>
</div><!-- /navbar -->

 

2. You can also create a navbar

You can also add data-position="fixed" to fix a nav element to the top or bottom of a page

Adding a back button

<div id="who" data-role="page" data-theme="b" data-add-back-btn="true">

 

You can add a back button in your header by using the attribute data-add-back-btn="true" in your page div

Using Dreamweaver to work with jQuery mobile

Starting from scratch

Made with Slides.com