Статьи

Создание сайта с использованием JQuery Mobile, часть 1

Сентябрь 19, 2017

событийно-сайт-дом-фактическоеВ этом уроке я покажу вам, как создать сайт с помощью JQuery Mobile . В этой первой части урока я объясню характеристики сайта и буду реализовывать домашнюю страницу сайта.

Сайт мероприятия

Сайт будет рекламировать вымышленное событие, и он будет состоять из четырех отдельных страниц:

  • Дом
  • Компьютерные колонки
  • График
  • Информация

Карта сайта будет примерно такой:

Давайте посмотрим на каркас для каждой страницы.

Домашняя страница мероприятия

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

Кнопки «Динамики», «Расписание» и «Информация» довольно понятны. Я оставлю реализацию страницы регистрации в качестве упражнения для вас.

Страница докладчиков

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

На этой странице также будет размещена кнопка «Домой» со ссылкой на домашнюю страницу.

Страница расписания

Страница Расписание будет содержать список сеансов событий. Каждый элемент списка будет отображать название сеанса, время, местоположение, описание и изображение докладчика.

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

Информационная страница

Последняя страница сайта — информационная страница. На этой странице будет отображаться изображение и описание места, а также список отелей, их описания и цены.

Как работают мобильные страницы JQuery

Сайт JQuery Mobile подробно объясняет анатомию страницы JQuery Mobile . Рекомендуется начинать свои страницы с шаблонного шаблона, подобного следующему:

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

Атрибут data-role = ”page” на внешнем элементе div обозначает этот div как мобильную страницу. Аналогичным образом, роли данных «верхний колонтитул», «контент» и «нижний колонтитул» обозначают соответственно верхний, нижний и нижний колонтитулы страницы.

Для создания мобильных сайтов с использованием JQuery Mobile вы можете использовать один или несколько html-файлов, каждый из которых содержит одну или несколько мобильных «страниц».

JQuery-мобильно-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:

событийно-сайт-дом-фактическое

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:

событийно-сайт-дом-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?

35
Share: