Building a Staff Directory on jQuery Mobile

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.

Frequently Asked Questions (FAQs) about Building a Staff Directory on jQuery Mobile

How can I add more fields to the staff directory?

Adding more fields to the staff directory involves modifying the JavaScript Object Notation (JSON) data structure. You can add more fields by including additional key-value pairs in the JSON objects. For instance, if you want to add a field for ‘Position’, you can modify the JSON object like this: {“name”: “John Doe”, “position”: “Manager”, “id”: “1”}. Remember to update the HTML and JavaScript code to display the new field.

Can I use this method to create a directory for other types of data?

Absolutely. The method described in the article is not limited to staff directories. You can use it to create any type of directory, such as a product catalog, a list of blog posts, or a directory of locations. The key is to structure your JSON data correctly and modify the HTML and JavaScript code to display the data as needed.

How can I sort the directory entries?

Sorting the directory entries can be achieved by using JavaScript’s built-in sort() function. You can sort the entries by any field. For example, to sort by name, you can use the following code: staff.sort((a, b) => a.name.localeCompare(b.name)). This will sort the staff array in ascending order of names.

How can I search for a specific entry in the directory?

Implementing a search function involves adding an input field for search terms and a function to filter the directory entries based on the search terms. You can use JavaScript’s filter() function to achieve this. The function should return only the entries that match the search terms.

Can I use this method with a larger dataset?

Yes, you can use this method with a larger dataset. However, for very large datasets, you may want to consider implementing pagination or infinite scrolling to improve performance. This involves modifying the JavaScript code to load and display only a subset of the data at a time.

How can I link each entry to a detailed profile page?

Linking each entry to a detailed profile page involves adding a ‘details’ field to the JSON data and a link in the HTML code. The ‘details’ field should contain the URL of the profile page. The link should be set to the value of the ‘details’ field.

Can I use this method with other JavaScript libraries or frameworks?

Yes, you can use this method with other JavaScript libraries or frameworks. The key concepts of working with JSON data and manipulating the DOM are the same. However, the specific code may vary depending on the library or framework you are using.

How can I style the directory entries?

Styling the directory entries involves modifying the CSS code. You can style the entries in any way you like. For example, you can change the font, color, and layout of the entries. You can also add hover effects, transitions, and animations.

How can I make the directory responsive?

Making the directory responsive involves using CSS media queries to adjust the layout and style of the directory based on the screen size. You can use jQuery Mobile’s built-in responsive classes, or you can write your own media queries.

Can I use this method to create a directory in a mobile app?

Yes, you can use this method to create a directory in a mobile app. jQuery Mobile is designed to work seamlessly in both web and mobile environments. However, you may need to adjust the layout and style of the directory to fit the smaller screen size of mobile devices.