jQuery Moble: Page movement

This entry is part 8 of 73 in the series jQuery Mobile

In this post, we first learn how to define a second page.  This is done by:

<div data-role='page' id='pagetwo'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>You are at page two!</p>
        <a href='#pageone' data-role='button'>Go Back</a>
    </div>
</div>

We create another div with data-role=’page’.  We also need to put an id to this page.

Since this app will only keep cycling between pageone and pagetwo, we have a href pointing back to pageone in line 21 below.

There are 2 data-roles with page attributes in lines 10 and17.

The whole code structure is as below:
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page' id='pageone'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>Your page one content here</p>
        <a href='#pagetwo' data-role='button'>Click Me</a>
    </div>
</div>
<div data-role='page' id='pagetwo'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>You are at page two!</p>
        <a href='#pageone' data-role='button'>Go Back</a>
    </div>
</div>
</body>
</html>
Try The Code

You can try running the script here.

jQuery Mobile: Data-role

This entry is part 6 of 73 in the series jQuery Mobile

The jQuery Mobile framework uses HTML5 data- attributes to allow for initialization and configuration of widgets.

Example widgets are:

  1. button,
  2. page,
  3. header and
  4. footer etc.

In the previous example, we already have some of these attributes for the data-role.

<div data-role='page'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>Look at the button!</p>
        <a href='#' data-role='button'>I am a button</a>
    </div>
</div>
The attribute definitions
  • The data-role=’page’ is the page displayed in the browser
  • The data-role=’header’ creates a toolbar at the top of the page
  • The data-role=’content’ where the main content of the page is located
  • The data-role=’button’ defines a button

The full data attributes are defined in this page.

jQuery Mobile: Introduction

This entry is part 2 of 73 in the series jQuery Mobile

jQuery Mobile is a touch-optimized Web Framework.

It is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

If you have an Android phone or tablet and have like to play around with a jQuery Mobile App, you could download a Chinese Language learning app and play around with it to get a feel of what jQuery Mobile could do.

With jQuery mobile, designing the user interface becomes really easy.

jQuery Mobile: Mobile App Development

This entry is part 1 of 73 in the series jQuery Mobile

If you are new to app development, you might be surprised to learn that it is possible to develop touch based app using HTML5.

Apps developed using HTML5 are the so called non-native app as it actually depends on webview to display the web pages.

Webview is part of the Android or iOS class activity. All that webview does is actually to display a web page.

For an app to access the native tools such as camera or GPS built inside a phone or tablet, most people would rely on phonegap, a framework that allow developers to wrap the app for running in Android or iPhone.

So in a way, you could say Javascript + HTML5 + phonegap = Mobile Apps.