Статьи

Создание справочника персонала на jQuery Mobile

Декабрь 25, 2018

Сегодня мы разрабатываем каталог сотрудников компании, используя jQuery Mobile. Это в основном сайт компании для сотрудников, чтобы получить контактные данные других сотрудников в зависимости от их отдела.

Это просто учебник для начинающих, где мы создаем мобильные сайты и приложения, используя Jquery Mobile. Обратите внимание, что это просто статический сайт, созданный с использованием HTML5, CSS и jQuery Mobile.

Вот что мы делаем

Что такое JQM

Согласно веб-сайту JQM, «jQery Mobile — это унифицированная система пользовательского интерфейса, которая без проблем работает на всех популярных платформах мобильных устройств, построенная на основе надежных jQuery и jQuery UI. Ориентируясь на облегченную кодовую базу, основанную на прогрессивном улучшении, с гибким, легко настраиваемым дизайном ». Подводя итог, можно сказать, что jQM — это мобильная платформа, позволяющая создавать одно настраиваемое веб-приложение, которое будет работать на всех популярных платформах смартфонов и планшетов, доступных в настоящее время. ,

В настоящее время JQM поддерживается на следующих платформах:

  • IOS
  • Android
  • ежевика
  • Bada
  • Windows Phone
  • Palm WebOs
  • Symbian
  • Meego

Таким образом, приложение на jQM будет работать на всех этих платформах. Тем самым позволяя вам писать меньше кода и делать больше.

Основы jQM

В этой статье я не буду изучать основы Jquery Mobile , чтобы изучить основы, прочитав Hello jQuery Mobile .

Давайте рассмотрим основную структуру сайта на основе JQM. 

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

Первое, что вы видите, это HTML5 Doctype , затем в разделе раздела head мы ссылаемся на файл jQM css, после чего мы ссылаемся на файл jQuery, после чего мы ссылаемся на файл jQascript jQM.

Чтобы создать новую страницу в jQM вместо ссылки на другой HTML-файл, вы просто создаете новый div с ролью данных страницы и назначаете ей идентификатор. Чтобы перейти на новую страницу, все, что вам нужно сделать, это передать ссылку на идентификатор в атрибут href.

Тем не менее, рекомендуется создавать свой сайт как серию отдельных страниц, потому что он чище, легче и работает лучше без JavaScript.

Для создания заголовка мы используем роль данных «заголовка», в то время как для контента мы используем роль данных «контента» и, наконец, для нижнего колонтитула мы используем роль данных «нижнего колонтитула».

Чтобы создать заголовок для каждого связанного с вами заголовка, просто поместите data-title = ”” на каждую из data-role = ”page”.

Создание домашней страницы.

На домашней странице Справочника персонала компании будет только список отделов.

Исходный код показан ниже. 

 <!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>

объяснение

В разделе head мы устанавливаем метатег, после чего мы ссылаемся на необходимые файлы, CSS-файл jQM, JavaScript-файл jQuery и JavaScript-файл jQM. Файл style.css содержит мои собственные стили.

Для создания списка в jQM это делается обычным способом, определяя тег ul, ol или dl, после которого вы помещаете свой li в него. Единственное отличие состоит в том, что вы добавляете атрибут data-role="listview"

Для создания пузырьков счетчика просто добавьте класс ul-li-count к тегу, который вы хотели бы использовать в качестве пузырька.

Страница отделов

Нажав на любой из отделов на домашней странице, вы попадете на страницу отдела, где вы можете просмотреть всех сотрудников по отделам.

Вверху есть поисковый фильтр, который облегчает поиск. Чтобы сделать это на своем сайте с jQM, все, что вам нужно сделать, это добавить data-filter="true"

Полный пример ниже

Здесь мы добавили data-filter = ”true” в ul, это отобразит окно поиска.

Исходный код для отдела, бухгалтерия 

 <!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>

объяснение

Чтобы создать фильтр поиска, достаточно добавить data-filter = ”true” в ul. Добавление этого к ul создаст окно поиска вверху.

Текст заполнителя по умолчанию для поля поиска — «Фильтровать элементы…», чтобы изменить его на свой собственный текст. Все, что вам нужно сделать, это добавить атрибут data-filter-placeholder = «Ваш собственный текст» в тег ul.

Чтобы разделить ваш список, все, что вам нужно сделать, это добавить атрибут li-data = ”list-divider” в li.

Страница персонала

При выборе человека вы будете перенаправлены на страницу персонала. Здесь вы получите полную информацию о сотруднике. Ниже находится страница персонала сотрудника в бухгалтерии. 

 <!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>[email protected]</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:[email protected]" 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>

объяснение

Здесь, на странице просмотра персонала, мы используем некоторые смс-теги HTML5 и тел, чтобы вы могли отправить смс или позвонить персоналу.

37
Share: