🤯 50% Off! 700+ courses, assessments, and books
Browse Titles
Mobile

Building a Staff Directory on jQuery Mobile

Tunbosun Ayinla
Share

Today, we’re designing a company staff directory, using jQuery Mobile. It’s basically a company site for staff to get contact details of other staff based on their Department.

This is just a beginner tutorial, where we are creating Mobile Sites and Applications using Jquery Mobile. Note that this is just a static site created using HTML5, CSS and jQuery Mobile.

Here’s What We’re Making

What is JQM

According to the JQM website, “jQery Mobile is a unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Focused on a lightweight codebase built on progressive enhancement with a flexible, easily themeable design.” To summarize this, jQM is a mobile framework that enables one to design a single, customized web application that will work on all popular smartphones and tablets platforms currently available.

Presently JQM is supported on the following platforms:

  • iOS
  • Android
  • Blackberry
  • Bada
  • Windows Phone
  • Palm WebOs
  • Symbian
  • Meego

As such, a jQM powered app will work on all of these platforms. Thereby allowing you to write less code and do more.

jQM Basics

I wont be going through the basics of Jquery Mobile in this article, to learn the basics read Hello jQuery Mobile.

Let’s review the basic structure of a JQM powered site.

<!DOCTYPE html>
<html>
	<head>
	<title>NuttyTech - Staff Directory</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="https://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>

<div data-role="page">

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

	<div data-role="content">
		<p>Hello world</p>
	</div><!-- /content -->

	<div data-role="footer">
		<h1>My Title</h1>
	</div><!-- /footer -->

</div><!-- /page -->

</body>
</html>

The first thing you see is the HTML5 Doctype , then in the head section section we link to the jQM css file, after which we link to the jQuery file, after which we link to the jQM javascript file.

To create a new page in jQM instead of linking to different html file, you just create a new div with a data-role of page and assign an id to it. To link to the new page, all you just need to do is pass the link of the id to the href attribute.

However, it is recommended to create your site as a series of seperate pages because it’s cleaner, more lightweight, and works better without JavaScript.

To create the header we use the data-role of “header”, while for the content we use the data-role of “content” and finally for the footer we use the data-role of “footer”.

To create a title for each of your linked title just put the data-title=”” to each of the data-role=”page”.

Creating the HomePage.

The homepage of the Company Staff Directory will just contain the list of the departments.

The source code is shown below.

<!DOCTYPE html>
		<html>
			<head>
			<title>NuttyTech - Staff Directory</title>
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<link rel="stylesheet" href="styles/jquery.mobile-1.0.min.css" />
			<link rel="stylesheet" href="styles/style.css" />
			<script type="text/javascript" src="js/jquery.js"></script>
			<script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>
		</head>
		<body>

		<div data-role="page">
			<div data-role="header" data-theme="b">
				<h1>Home</h1>
			</div><!-- /header -->

			<div data-role="content" id="home">
				<ul data-role="listview" data-theme="f" data-count-theme="e">
					<li><a href="accounts.html"><h2>Accounts Department</h2><p>We Manage the accounts for the company</p></a><p class="ui-li-count">2 staff</p></li>
					<li><a href="health.html"><h2>Health Department</h2><p>For all your health issues.</p></a><p class="ui-li-count">1 staffs</p></li>
					<li><a href="tech.html"><h2>I.T Department</h2><p>For all your I.T related enquires.</p></a><p class="ui-li-count">1 staffs</p></li>
				</ul>
			</div><!-- /content -->

			<div data-role="footer"data-theme="b">
				<h1>&amp;copy Copyright BuildMobile</h1>
			</div><!-- /footer -->

		</div><!-- /page -->
		</body>
		</html>

Explanation

In the head section we set a meta tag, after this we link to the required files, the jQM CSS file, the jQuery JavaScript file and the jQM JavaScript file. The style.css file contains my own personal styles.

To create a list in jQM it is done the usual way define a ul, ol or dl tag after which you put your li inside it. The only difference is that you add an attribute of data-role="listview" in the ul tag this way jQM will know this is a list.

To create the count bubbles just add a class of ul-li-count to the tag that you would like to use as your bubble.

The departments Page

Clicking on any of the departments on the homepage leads you to the department page, here you can view all the staff per department.

There’s a search filter at the top which makes searching easier to implement. To do this in you jQM powered site all you need to do is add data-filter="true" to the ul

Full example is below

 

Here we have added a data-filter=”true” to the ul, this will display a search box.

The source code for a Department, the accounts department

<!DOCTYPE html>
		<html>
			<head>
			<title>NuttyTech - Staff Directory</title>
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<link rel="stylesheet" href="styles/jquery.mobile-1.0.min.css" />
			<link rel="stylesheet" href="styles/style.css" />
			<script type="text/javascript" src="js/jquery.js"></script>
			<script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>
		</head>
		<body>

		<div data-role="page">

			<div data-role="header"data-theme="b">
				<h1>Accounts Department</h1>
				<a href="index.html" data-icon="home" data-theme="a">Home</a>
			</div><!-- /header -->

			<div data-role="content">
				<ul data-role="listview" data-theme="c" data-filter="true" data-filter-placeholder="Search for Staff" data-divider-theme="e">
					<li data-role="list-divider" data-theme="d">A</li>
					<li><a href="staffs/ade.html"><img  class="img" src="images/logo.jpg"/><h3>Ade Smith</h3></a></li>
					<li data-role="list-divider" data-theme="d">B</li>
					<li><a href="staffs/benita"><img class="img" src="images/logo.jpg"/><h3>Benita Bright</h3></a></li>
				</ul>
			</div><!-- /content -->

			<div data-role="footer" data-theme="b">
				<h1>&amp;copy Copyright BuildMobile</h1>
			</div><!-- /footer -->

		</div><!-- /page -->

		</body>
		</html>

Explanation

To create a Search filter all you just need to do is add data-filter=”true” to the ul. Adding this to the ul will create a search box at the top.

The default placeholder text for the Search box is “Filter items…” to change it to your own text all you need to do is add the attribute data-filter-placeholder=”Your Own Text” to the ul tag.

To divide your list, all you need to do is add an attribute of data-role=”list-divider” to an li.

The Staff Page

When selecting a person, you will be directed to the staff page. Here you will get the full details of the staff member. Below is the staff page of an employee in the Accounts Department.

<!DOCTYPE html>
		<html>
			<head>
			<title>NuttyTech - Staff Directory</title>
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<link rel="stylesheet" href="../styles/jquery.mobile-1.0.min.css" />
			<link rel="stylesheet" href="../styles/style.css" />
			<script type="text/javascript" src="../js/jquery.js"></script>
			<script type="text/javascript" src="../js/jquery.mobile-1.0.min.js"></script>
		</head>
		<body>

		<div data-role="page" data-add-back-btn="true">

			<div data-role="header" data-theme="b">
				<h1>Ciara Michael - Accounts Department</h1>
				<a data-rel="back" data-icon="back" data-theme="a">Back</a>
			</div><!-- /header -->

			<div data-role="content">
				<img class="img" src="../images/logo.jpg"/>
				<h4>Name:</h4><p>Ciara Michael</p>
				<h4>Address:</h4><p>No 12 Port Smith Avenue London</p>
				<h4>Email:</h4><p>ciara.michael@nuttytech.com</p>
				<h4>Mobile:</h4><p>123456789</p>
				<a href="tel:123456789" data-role="button" data-inline="true">Call Ciara Michael</a>
				<a href="sms:123456789" data-role="button" data-inline="true">SMS Ciara Michael</a>
				<a href="mailto:ciara.michael@nuttytech.com" data-role="button" data-inline="true">Mail Ciara Michael</a>
			</div><!-- /content -->

			<div data-role="footer" data-theme="b">
				<h1>&amp;copy Copyright BuildMobile</h1>
			</div><!-- /footer -->

		</div><!-- /page -->

		</body>
		</html>

Explanation

Here in the Staff view page we are making use of some HTML5 tag sms, and tel to enable you to send a sms or call the staff.

CSS Master, 3rd Edition