UNIT-V

MOBILE WEB DEVELOPMENT

Syllabus
• Mobile-First: What is Mobile-First? What is Mobile Web?
Understanding Mobile Devices and Desktop.
• JQuery Mobile: Introduction to the jQuery Mobile Framework, Set-up
jQuery Mobile, Pages, Icons, Transitions, Layouts Widgets, Events,
Forms, Themes, Formatting Lists, Header and Footer, CSS Classes,
Data Attributes, Building a Simple Mobile Webpage.
• Course Objectives: -
To understand and learn Mobile web development.

• Course Outcomes: -
On completion of the course, students will be able to–
CO4: Develop mobile website using JQuery Mobile.
Mobile-First
• Desktop, smartphone and tablet are having different screen size or
layout to each other also tle user experience to website or application
too.
• If developer designs website or web application for desktop layout or
screen size then it is very difficult to design for mobile devices such as
smarthone, tablet etc.
• “Designing and developing user experience (user interface) for mobile
before designing for desktop web or any other device is known as
Mobile-First approach.”
Mobile Web
• The use of internet can be through various ways such as laptop,
desktop, and smartphones (mobile).
• This internet access is done with wireless or connection through
these devices.
• As most of the time users uses internet on their mobile devices
which is easy to accessible with short period of time as well.
• Mobile device or smartphones are moveable so its flexible to access
internet and web content on the go.
• “The use or access of internet and get web content thorough mobile
devices is known as mobile web.”
Mobile devices
• Mobile devices are also known as handheld computers or
smartphones. There are various types of mobiles devices, some are
listed below:
o Smartphones
o Tablets
o e-Readers
o Smart watches
o Fitness bands, etc.
Desktop device
• Desktop device can not be move from one place to another place
easily.
• They are large and heavy.
• With this device the web content will be bigger as much as we have
the large one desktop device.
• These devices are used by web designers and developers for better
experience.
Introduction to the jQuery Mobile Framework
• “jQuery Mobile is a unified user interface system across all popular
mobile device platforms, built on the jQuery library and jQuery UI
foundation.”
• jQuery Mobile also known as mobile framework which is an open-
source cross - platform framework.
• It provides touch friendly UI widgets that are designed for mobile
devices.
• It has powerful theming framework to style your mobile application.
Introduction to the jQuery Mobile Framework
• You need to write your code once and it will work seamlessly on
Android, iPhone, iPad, or any other mobile operating systems. The
same code can be run on web browsers such as Google Chrome,
Mozilla Firefox, Safari etc, on your desktop.
Features of jQuery mobile
• Responsive Design for various screen sizes.
• Cross-Platform Compatibility across iOS, Android, and Windows.
• Touch-Optimized UI Elements like buttons and sliders.
• AJAX Page Transitions for fast navigation.
• Built-in Themes for easy customization.
• Page Transition Animations for smooth navigation.
• Mobile-Friendly Forms for easy input.
• Device and Orientation Detection for automatic layout adjustments.
• Customizable Widgets like collapsible lists and grids.
• HTML5 Support for modern features like local storage and geolocation.
Progressive Enhancement
• Progressive Enhancement is a web development strategy where a
basic, functional experience is provided to all users, while advanced
features and enhancements are added for users with more capable
devices or browsers.
• This ensures the website is accessible to everyone, regardless of their
device capabilities.
Advantages and disadvantages of jquery Mobile
• Advantages :
• Easy to learn if you are familiar to HTML, CSS, and JS.
• It has large library which enables you to perform complex functions as
compared to JS.
• jQuery is cross platform framework that means you don't need to write
code for different device resolutions, single codebase can work for various
devices and platforms.
• It has open - source community where you can find several jQuery plugins
to implement in your requirement.
• Make a website look more professional with use of effects or transitions.
• You can create custom theme using theme roller without writing the line of
code.
Advantages and disadvantages of jquery Mobile
• Disadvantages:
• Limited functionality as compared to native mobile application.
• Limited to customize visual design.
• Limited options for CSS themes.
• Applications are slower on mobile device.
Set-up jQuery Mobile
There are two main approaches to set up jQuery Mobile:
1. Using a CDN (Content Delivery Network)
• Quick Setup: This is the fastest and easiest way to integrate jQuery
Mobile. You simply link to the hosted files on a CDN.
• Steps:
a. Add the jQuery and jQuery Mobile CSS and JS links in the <head>
section of your HTML file.
b. Start building your page using jQuery Mobile components.
 Set-up jQuery Mobile
There are two main approaches to set up jQuery Mobile:
1. Using a CDN (Content Delivery Network)
Example:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.2/jquery.mobile-1.5.2.min.css" />
<script src="https://code.jquery.com/mobile/1.5.2/jquery.mobile-1.5.2.min.js"></script>
</head>
Set-up jQuery Mobile
2. Downloading and Hosting Locally
• More Control: This approach involves downloading the jQuery Mobile
files and hosting them on your own server. It’s helpful when you want
to have more control over the version or need to work offline.
• Steps:
a. Download jQuery Mobile from the official website.
b. Link the downloaded .js and .css files in your HTML file.
Set-up jQuery Mobile
There are two main approaches to set up jQuery Mobile:
2. Downloading and Hosting Locally
Example:
<head>
<script src="path/to/jquery.min.js"></script>
<link rel="stylesheet" href="path/to/jquery.mobile.min.css" />
<script src="path/to/jquery.mobile.min.js"></script>
</head>
Pages
• The page is main unit of a jQuery Mobile, the page is divided into
three parts : header, content, and footer.
• A page in jQuery Mobile represents a single screen of content.
• It is the primary unit of content and interaction, typically occupying
the entire viewport.
• Pages are defined using the data-role="page" attribute within a <div>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet“ href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="myPage">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>This is the content of my page.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Pages
In this code:
• The <meta> tag configures the viewport for mobile devices.
• The <link> tag includes the jQuery Mobile CSS.
• The <script> tags include jQuery and jQuery Mobile libraries.
• The <div> with data-role="page" defines the page.
• Inside the page, data-role="header", data-role="content", and data-
role="footer" define the page's sections.
• The id attribute is used to uniquely identify the page.
Header and Footer
• Header and Footer for a page is used to design for special content of a
web app such as in header we may have the title of a page or content
title and navigation where in footer we can have copyright content,
sitemap.
• The header text content will be in h1 tag and footer text content uill
be in h4 tag.
• The header divided into three subareas : left, title, and right where in
left and right area we can place buttons and in title we can set the
title of a page.
• The footer is optional.
Content
• In web development, "content" generally refers to the main body of
information on a webpage, which is displayed to users.
• This could be text, images, videos, or any other media that is meant
to be viewed or interacted with.
• In jQuery Mobile, you can create a "content" section by using the
data-role="content" attribute within a <div> element.
• This is a common way to create sections of a page that will
automatically be styled and handled by jQuery Mobile's framework.
Navigation
• In jQuery Mobile, navigation typically refers to creating links or
buttons that allow users to navigate between different pages or
sections within the app.
• jQuery Mobile provides a simple way to implement navigation using
its built-in page structure, buttons, and links.
Simple Navigation Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-
1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<!-- Page 1 -->

<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
<a href="#page2" class="ui-btn">Go to Page 2</a>
</div>
</div>
Simple Navigation Example

<!-- Page 2 -->

<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
<a href="#page1" class="ui-btn">Back to Page 1</a>
</div>
</div>

</body>
</html>
Simple Navigation Example
Explanation:
• data-role="page": Each page is wrapped in a div with the data-
role="page" attribute, which is necessary for jQuery Mobile.
• Anchor Links (<a>): These links use href to navigate between pages.
href="#page2" will take you to the page with id="page2", and vice
versa.
• class="ui-btn": This class applies jQuery Mobile's button styles to the
links, making them look like buttons.
Dialog
• Dialogs are small pop-up windows used to interact with users.
• They are commonly used for confirmations, warnings, and user
input.In jQuery Mobile, dialogs can be created using data-
role="dialog".
• Dialogs are useful when you need to:
1.Confirm actions (e.g., delete, logout).
2.Show important information (e.g., errors, success messages).
3.Request user input (e.g., passwords, forms).
Creating a Confirmation Dialog for Book Deletion in jQuery Mobile

Code - Main Page

<div data-role="page" id="homePage">

<div data-role="header">
<h1>Book Management</h1>
</div>
<div role="main" class="ui-content">
<a href="#confirmDialog" class="ui-btn" data-rel="dialog">Delete Book</a>
</div>
</div>
Creating a Confirmation Dialog for Book Deletion in jQuery Mobile

Code - Confirmation Dialog

<div data-role="dialog" id="confirmDialog">
<div data-role="header">
<h1>Confirm Delete</h1>
</div>
<div role="main" class="ui-content">
<p>Are you sure you want to delete this book?</p>
<a href="#" class="ui-btn" id="confirmDelete">Yes, Delete</a>
<a href="#" class="ui-btn" data-rel="back">Cancel</a>
</div>
</div>
Creating a Confirmation Dialog for Book Deletion in jQuery Mobile

jQuery to Handle Confirmation

$("#confirmDelete").click(function() {
alert("The book has been deleted.");
});

Explanation:
• When the user clicks Yes, Delete, an alert is shown to confirm the deletion.
• This is where the deletion logic can be added (e.g., calling a server API).
jQuery Mobile Icons
• jQuery Mobile provides built-in icons to enhance user interface.
• Icons are based on FontAwesome.
• They are useful for buttons, links, and other elements.
• Icons help to:
1.Improve user experience: Intuitive and easy to recognize.
2.Save space: Represent actions visually without using extra text.
3.Make interfaces more attractive: Adding a visual element.
Using Icons in jQuery Mobile
• To use an icon, use the data-icon attribute:
<a href="#" class="ui-btn" data-icon="check">Confirm</a>
• Common jQuery Mobile Icons
• delete: Trash can icon (used for delete actions).
• check: Checkmark icon (used for confirmation).
• star: Star icon (used for favorites).
• home: Home icon (used for navigation).
• plus: Plus sign icon (used for adding items).
• gear: Gear icon (used for settings).
Example
• Code - Basic Icon Button
<a href="#" class="ui-btn ui-btn-inline" data-icon="delete">Delete Book</a>

• Code - Icon Positioning

<a href="#" class="ui-btn ui-btn-inline" data-icon="plus" data-iconpos="left">
Add New Book</a>
data-iconpos="left": Icon appears to the left of the text.
Transitions in jQuery Mobile
• Transitions in jQuery Mobile are animations used to smoothly
navigate between pages.
• They provide a better user experience by visually indicating that the
user is moving between pages.
• Why Use Transitions?
• Smooth Navigation: Makes the app feel more fluid and responsive.
• Improved UX: Helps users understand the app structure.
• Visual Appeal: Adds a polished, professional look.
Types of jQuery Mobile Transitions
• jQuery Mobile supports several transition types:
1. fade: Fade between pages.
2. slide: Slide in from left or right.
3. pop: A pop-up animation.
4. flip: Flip between pages.
5. slideup: Slide up animation for page transition.
By default, jQuery Mobile applies a slide transition when navigating
between pages. You can change this transition using the data-
transition attribute.
Example Code
Using a Transition

<a href="#page2" class="ui-btn" data-transition="fade">Go to Page 2</a>

data-transition="fade": Applies a fade transition when navigating to

#page2.
Slide Transition
<a href="#page2" class="ui-btn" data-transition="slide">Go to Page 2</a>
data-transition="slide": This applies a sliding transition to move from
page1 to page2.
Themes in jQuery Mobile
• jQuery Mobile provides themes to style the look and feel of your
mobile app.
• Themes allow you to create consistent, professional designs across
your app with minimal effort.
• Themes can be customized for colors, fonts, button styles, and more.
• Predefined Themes: jQuery Mobile comes with several predefined
themes (e.g., a, b, c, d).
• Customization: You can customize the default themes or create your
own.
• ThemeSwitcher: Allows users to switch between themes dynamically.
Themes in jQuery Mobile
• Following are some of the theme color swatches available in jQuery
Mobile.

Letter Description Color in default theme

a Highest level of visual priority Black
b Secondary level of visual priority Blue
c Baseline level Silver
d Alternate secondary level Gray
e Accent Yellow
Widgets in jQuery Mobile
• jQuery Mobile provides a set of prebuilt UI components known as
widgets.
• Widgets are interactive, mobile-friendly UI elements that improve
user experience.
• They help create rich and responsive mobile apps with minimal code.
Common jQuery Mobile Widgets
• Some of the most commonly used widgets in jQuery Mobile include:
1. Buttons: Customizable buttons with various styles.
2. Dialogs: Popup windows for user interaction (e.g., confirmations,
messages).
3. Forms: Input elements like text boxes, select menus, checkboxes.
4. Sliders: Range sliders for input.
5. Panels: Hidden menus or sidebars.
6. Lists: Styled lists for navigation or content.
jQuery Mobile Button Widget
• To create a button:
<a href="#" class="ui-btn">Click Me</a>

• The ui-btn class makes the link behave like a button with default
styling.
• You can customize the button with icons, colors, and shapes.
jQuery Mobile Dialog Widget
• Dialogs are useful for confirmations, alerts, or user input.
<div data-role="dialog" id="myDialog">
<div data-role="header">
<h1>Confirmation</h1>
</div>
<div role="main" class="ui-content">
<p>Are you sure you want to delete this item?</p>
<a href="#" class="ui-btn">Yes</a>
<a href="#" class="ui-btn" data-rel="back">Cancel</a>
</div>
</div>
• data-role="dialog" marks the element as a dialog.
• data-rel="back" allows closing the dialog.
Layouts in jQuery Mobile
• Layouts in jQuery Mobile allow you to arrange content into columns,
grids, and structured sections.
• jQuery Mobile uses a simple and flexible system to create responsive
layouts that adapt to various screen sizes.
The Grid Layout
• jQuery Mobile provides a simple grid system using a set of columns.
• Example of a 2-column layout:
<div data-role="page"> • The ui-grid-a class creates a
<div role="main" class="ui-content"> flexible grid.
<div class="ui-grid-a">
<div class="ui-block-a">
• ui-block-a and ui-block-b
<p>Column 1</p> define individual columns.
</div>
<div class="ui-block-b">
<p>Column 2</p>
</div>
</div>
</div>
</div>
Multi-Column Layout
• For more complex layouts, jQuery Mobile supports multi-column grids.
• Example of a 3-column layout:
<div data-role="page">
<div role="main" class="ui-content">
<div class="ui-grid-b">
• ui-grid-b provides a 3- <div class="ui-block-a">
column layout. <p>Column 1</p>
</div>
• Each ui-block-x defines a
<div class="ui-block-b">
block or column. <p>Column 2</p>
</div>
<div class="ui-block-c">
<p>Column 3</p>
</div>
</div>
</div>
</div>
Events in jQuery Mobile
• Events in jQuery Mobile are actions triggered by user interactions,
such as clicks, swipes, and touch gestures.
• They allow developers to add interactivity and dynamic behaviors to
web applications.
• jQuery Mobile uses the jQuery event system, but provides additional
features for mobile-specific interactions.
Common jQuery Mobile Events
Some of the most commonly used events in jQuery Mobile include:
1.tap: Triggered when the user taps on an element.
2.swipe: Triggered when the user swipes (left, right, up, or down).
3.touchstart: Triggered when the user touches the screen.
4.touchend: Triggered when the user stops touching the screen.
5.pagebeforecreate: Triggered before a page is created.
6.pagecreate: Triggered after a page is created.
Tap Event
• The tap event is used to handle a single tap on an element.
$("#myButton").on("tap", function() {
alert("Button tapped!");
});

Explanation:
• The tap event works similarly to the click event, but is optimized for
touch devices.
• Triggered when a user taps on #myButton.
Swipe Event
• The swipe event detects a swipe gesture in one of four directions:
left, right, up, or down.
$("#swipeArea").on("swipeleft", function() {
alert("Swiped left!");
});

Explanation:
• swipeleft, swiperight, swipeup, and swipedown can be used to detect
swipe gestures.
Touch Events
• Touch events handle interactions when the user touches the screen.
$("#myDiv").on("touchstart", function() {
console.log("Touch started!");
});

Explanation:
• touchstart: Triggered when the user starts touching the screen.
• touchend: Triggered when the user stops touching the screen.
Page Events
• jQuery Mobile provides special page events for managing page
lifecycle events.
• pagebeforecreate: Triggered before the page is created.
• pagecreate: Triggered after the page is created.
• pagebeforechange: Triggered before the page is changed.
• pagechange: Triggered after the page is changed.
$(document).on("pagecreate", "#myPage", function() {
console.log("Page created!");
});
Binding Multiple Events
• You can bind multiple events to the same element:
$("#myElement").on("tap swipeleft", function() {
alert("Tap or swipe left detected!");
});

Explanation:
• You can bind multiple events to a single element using .on().This can
handle different types of user interactions in a unified way.
Forms in jQuery Mobile
• Forms are essential for collecting data from users in mobile apps.
• jQuery Mobile provides a range of form elements that are optimized
for mobile devices.
• These form elements are responsive, styled, and easy to use.
jQuery Mobile Form Elements
Common form elements in jQuery Mobile:
1.Text Inputs: For entering text.
2.Radio Buttons: For selecting one option from a group.
3.Checkboxes: For selecting multiple options.
4.Select Menus: For dropdown options.
5.Textareas: For multiline text input.
6.Sliders: For selecting a value from a range.
Types of forms
1. User Registration Forms
Purpose:
• Used to collect user data for account creation.
Fields typically include:
• Name
• Email
• Password
• Confirm Password
• Address
• Phone Number
Types of forms
2. Login Forms
Purpose:
• Used for user authentication to allow access to a secure area of a
website or application.
Fields typically include:
• Email or Username
• Password
• Forgot Password Link
• Remember Me Checkbox
Types of forms
3. Contact Forms
Purpose:
• Allows users to send a message or inquiry to the website owner or
support team.
Fields typically include:
• Name
• Email
• Message (Textarea)
• Submit Button
Types of forms
4. Search Forms
Purpose:
• Allows users to search for content within a website or application.
Fields typically include:
• Search input field
• Search button
Types of forms
5. Feedback Forms
Purpose:
• Collect user feedback or opinions regarding a product, service, or
experience.
Fields typically include:
• Rating (e.g., stars or thumbs up/down)
• Comments
• Suggestions
 Basic Form Example
<form action="#">
<label for="name">Name:</label>
<input type="text" name="name" id="name" placeholder="Enter your name">

<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="Enter your email">

<label for="gender">Gender:</label>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
Basic Form Example
<fieldset data-role="controlgroup">
<legend>Interests:</legend>
<label for="sports">Sports</label>
<input type="checkbox" name="sports" id="sports">

<label for="music">Music</label>
<input type="checkbox" name="music" id="music">
</fieldset>

<input type="submit" value="Submit" data-theme="b">

</form>
CSS Classes in jQuery Mobile
• jQuery Mobile uses a set of predefined CSS classes to style elements
for mobile-friendly websites.
• These classes help create a responsive and consistent design across
devices.
• You can customize or override these classes for specific styling needs.
Basic jQuery Mobile CSS Classes
• Some common CSS classes in jQuery Mobile include:
1. ui-btn: Basic button styling.
2. ui-body: Body styling for page content.
3. ui-header: Header styling for page headers.
4. ui-content: Content area styling.
5. ui-footer: Footer styling.
6. ui-page: Basic styling for pages.
7. ui-grid-a: Defines a responsive grid layout with rows and columns.
Example of Button Styling
• To create a button using jQuery Mobile:
<a href="#" class="ui-btn ui-btn-b">Click Me</a>

Explanation:
• ui-btn: Applies button styling.
• ui-btn-b: Sets the button color to theme "b" (you can customize it).
Layout Grid Classes
• jQuery Mobile provides grid system classes to organize page content
into columns and rows:
1. ui-grid-a: A responsive grid layout with equal-width columns.ui-
block-a,
2. ui-block-b, etc.: Used to define specific blocks within a grid.

<div class="ui-grid-a">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
</div>
Data Attributes in jQuery Mobile
• In jQuery Mobile, data attributes are used to configure and control
the behavior and appearance of various elements.
• These attributes allow developers to specify settings for widgets,
navigation, themes, and more, directly within the HTML.
• They help to simplify the integration of jQuery Mobile features
without needing additional JavaScript or CSS.
How Data Attributes are Used in jQuery Mobile
• Widget Configuration: Data attributes define how jQuery Mobile
widgets (like buttons, forms, pages, etc.) should behave.
• Page and Navigation Control: They manage page transitions,
navigation settings, and other features like AJAX loading.
• Theming: Data attributes allow customization of themes, icons, and
positions without modifying the external CSS.
Button Attributes in jQuery Mobile
• In jQuery Mobile, the <button> element is enhanced with various data
attributes to control its behavior, appearance, and interaction.
• These attributes help you configure button themes, icons, and actions
without needing extra JavaScript.
Attribute Description Example
data- Specifies that the element should be <a href="#" data-role="button">Button</a>
role="button" treated as a button.
data-theme Sets the theme (color scheme) of the <a href="#" data-role="button" data-
button. theme="b">Button</a>
data-icon Defines an icon to be displayed on the <a href="#" data-role="button" data-
button (e.g., home, plus). icon="home">Home</a>
data-corners Applies rounded corners to the button. <a href="#" data-role="button" data-
corners="true">Rounded Button</a>
data-shadow Adds a shadow effect to the button. <a href="#" data-role="button" data-
shadow="true">Button with Shadow</a>
Dialog Attributes in jQuery Mobile
• Dialogs in jQuery Mobile are used to display overlay pop-up windows.
They are enhanced by various data attributes to control their
behavior, styling, and interactions.
Attribute Description Example
data- Specifies the element is a <div data-role="dialog"
role="dialog" dialog (popup). id="myDialog">Dialog Content</div>
data-theme Specifies the theme (color <div data-role="dialog" data-
scheme) to apply to the dialog. theme="b">Dialog</div>
data-close-btn Adds a close button in the <div data-role="dialog" data-close-
dialog (default is no button). btn="true">Dialog</div>
data-position-to Specifies which element the <div data-role="dialog" data-position-
dialog should open relative to to="window">Dialog</div>
(e.g., window, button).
Simple Mobile Webpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Mobile Page</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.2/jquery.mobile.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.2/jquery.mobile.min.js"></script>
</head>
<body>
Simple Mobile Webpage

<!-- Home Page -->

<div data-role="page" id="home">
<div data-role="header">
<h1>Welcome</h1>
</div>
<div data-role="content">
<p>Welcome to the simple mobile webpage!</p>
<a href="#about" data-role="button" data-transition="slide">Go to About</a>
</div>
</div>
Simple Mobile Webpage
<!-- About Page -->
<div data-role="page" id="about">
<div data-role="header">
<h1>About Us</h1>
</div>
<div data-role="content">
<p>Learn more about this page.</p>
<a href="#home" data-role="button" data-transition="slide" data-direction="reverse">
Back to Home</a>
</div>
</div>

</body>
</html>