DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • Automating the Migration From JS to TS for the ZK Framework
  • SRE vs. DevOps
  • How To Integrate Microsoft Team With Cypress Cloud
  • How To Use Pandas and Matplotlib To Perform EDA In Python

Trending

  • Automating the Migration From JS to TS for the ZK Framework
  • SRE vs. DevOps
  • How To Integrate Microsoft Team With Cypress Cloud
  • How To Use Pandas and Matplotlib To Perform EDA In Python
  1. DZone
  2. Coding
  3. Frameworks
  4. Creating a Website Using JQuery Mobile, Part 1

Creating a Website Using JQuery Mobile, Part 1

Jorge Ramon user avatar by
Jorge Ramon
·
Jan. 25, 11 · News
Like (0)
Save
Tweet
Share
10.61K Views

Join the DZone community and get the full member experience.

Join For Free

event-website-home-actualIn this tutorial I will show you how to build a website with JQuery Mobile. In this first part of the tutorial I will explain the site’s characteristics, and I will implement the home page of the site.

The Event Website

The website will advertise a fictional event, and it will consist of four distinct pages:

  • Home
  • Speakers
  • Schedule
  • Information

The site’s map would be something like this:

Let’s take a look at the wireframes for each page.


The Event’s Home Page

The Home page will have a toolbar, a banner and four buttons linking to different areas of the site.

The Speakers, Schedule and Information buttons are pretty self-explanatory. I will leave the implementation of the registration page as an exercise for you.

The Speakers Page

This page will host the list of speakers participating in the event. Each item of the list will display the speaker’s name, picture and short bio.

This page will also host a "Home" button linking back to the Home page.

The Schedule Page

The Schedule page will contain the list of event sessions. Each list item will display the session’s name, time, location, description and a picture of the speaker.

Along with a button linking to the Home page, the page’s toolbar will contain a set of buttons representing each of the event’s days. Pushing any of these buttons will display the sessions for the selected day.

The Information Page

The last page of the site is the Information page. This page will display a picture and a description of the venue, along with a list of hotels, their descriptions and rates.

How JQuery Mobile Pages Work

JQuery Mobile’s site explains in detail the anatomy of a JQuery Mobile page. It is recommended that you start your pages with a boilerplate template like this:

<!DOCTYPE html>
<html>
	<head>
	<title>Page Title</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
	<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>Page content goes here.</p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /header -->
</div><!-- /page -->

</body>
</html>

The data-role=”page” attribute on the outer div element designates that div as a mobile page. Similarly, the “header”, “content” and “footer” data roles designate the header, content and footer areas of the page respectively.

To build your mobile sites using JQuery Mobile you can use one or multiple html files, each containing one or more mobile “pages”.

jquery-mobile-pagesl As you already know, for this tutorial I will take the multiple files approach, with each html file will hosting a single mobile page.

Creating the Home Page

Now that you have an idea of how things are going to look, let’s build the Home page.

Using the boilerplate page template, I first need to include the JQuery and JQuery Mobile  resources at the top of the file like so:

<head>

    <link rel="stylesheet" type="text/css" href="../jquery-mobile/jquery.mobile-1.0a2.css" />
    <link rel="stylesheet" type="text/css" href="css/event.css" />
    <script src="../jquery-mobile/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="../jquery-mobile/jquery.mobile-1.0a2.js" type="text/javascript"></script>

Notice that I also included event.css, which is the file where I will put the styles for the site.

In the body of the html file I will create a single mobile “page” containing the header, banner and buttons like so:

<div data-role="page">
    <div data-role="header">
        <h1>
            Welcome!</h1>
    </div>
    <div data-role="content">
        <div id="banner">
            <h2>
                Mobile Dev 2011</h2>
        </div>
        <p>
            The best mobile development conference is here!</p>
        <p>
            Learn how to build productivity, utility and immersive mobile applications.</p>
        <p>
            Use web-based and native platforms to create amazing applications for mobile devices.
        </p>
        <ul data-role="listview" data-inset="true">
            <li><a href="./register.html">Register</a>
            <li><a href="./speakers.html">Speakers</a>
            <li><a href="./schedule.html">Schedule</a>
            <li><a href="./information.html">Information</a>
        </li></ul>
    </div>
</div>

This is how the page looks:

event-website-home-actual

Following JQuery Mobile’s conventions, inside the body tag I identified the mobile "page" using a div element with the data-role="page" attribute. The div with data role of “header” will be the header of the page. And adding the data role “listview” to the ul element will cause each li element containing a link to behave like a button:

event-website-home-listview

Next Steps

We now have the Home page ready. In the next installment of this series I will build the Speakers page. Sounds good?


JQuery Mobile

Published at DZone with permission of Jorge Ramon, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Automating the Migration From JS to TS for the ZK Framework
  • SRE vs. DevOps
  • How To Integrate Microsoft Team With Cypress Cloud
  • How To Use Pandas and Matplotlib To Perform EDA In Python

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: