JQuery Mobile — это отличная инфраструктура пользовательского интерфейса для разработки мобильных приложений, которая работает путем применения прогрессивных улучшений к своему чистому, семантическому HTML и преобразования его в богатые пользовательские интерфейсы.
В этой серии я покажу вам, как быстро собрать вымышленный сайт о событиях с помощью JQuery Mobile . Для этой статьи я сохранил конструкцию последних двух страниц, Расписание и Информация о мероприятии.
Страница расписания
Ниже показано, как мне нужна страница Расписание. (Обратите внимание, что это проще, чем оригинальная версия в первой части этой серии .)
Я снова буду использовать стандартный шаблон страницы JQuery Mobile в качестве ссылки, добавив элементы HTML для начального текста и списка сессий:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Schedule</title>
<link href="../jquery-mobile/jquery.mobile-1.0a2.css" rel="stylesheet" type="text/css" />
<link href="css/event.css" rel="stylesheet" type="text/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>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>
Schedule</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>
Mobile Dev 2011</h2>
</div>
<p>
There has never been a more exciting time to be a mobile developer. We have one
full day of mobile development awesomeness for you!</p>
<ul data-role="listview" data-inset="true">
<li class="list-item-schedule">
<div class="list-item-content-schedule">
<h3>
Keynote</h3>
<p class="session-time-speaker">
9:00 AM - 9:30 AM Speaker B</p>
<p>
Short introduction to keynote.</p>
</div>
</li>
<li class="list-item-schedule">
<div class="list-item-content-schedule">
<h3>
Session 2</h3>
<p class="session-time-speaker">
10:00 AM - 10:55 AM Speaker D</p>
<p>
Short introduction to session.</p>
</div>
</li>
<li class="list-item-schedule">
<div class="list-item-content-schedule">
<h3>
Session 3</h3>
<p class="session-time-speaker">
11:00 AM - 12:00 AM Speaker A</p>
<p>
Short introduction to session.</p>
</div>
</li>
<li class="list-item-schedule">
<div class="list-item-content-schedule">
<h3>
Lunch</h3>
<p class="session-time-speaker">
12:00 PM - 1:30 PM</p>
<p>
Talk about luch here.</p>
</div>
</li>
<li class="list-item-schedule">
<div class="list-item-content-schedule">
<h3>
Session 4</h3>
<p class="session-time-speaker">
1:30 PM - 3:00 PM Speaker C, Speaker B</p>
<p>
Short introduction to session.</p>
</div>
</li>
<li class="list-item-schedule">
<div class="list-item-content-schedule">
<h3>
Session 5</h3>
<p class="session-time-speaker">
3:15 PM - 4:30 PM Speaker C, Speaker B</p>
<p>
Short introduction to session.</p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Я использую неупорядоченный список для отображения сессий, как я делал для отображения динамиков на странице «Динамики». Следуя философии прогрессивных улучшений, фреймворк заботится о том, чтобы превратить список в удобный для просмотра список. Мне нужно беспокоиться только о шаблоне HTML, используемом в каждом элементе li.
Вот как выглядит страница:
Информационная страница
На информационной странице я покажу подробную информацию о месте проведения мероприятия, гостиницах и транспорте:
Я буду держать эту страницу максимально простой. Вы можете взять исходный код и украсить страницу, как считаете нужным.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Information</title>
<link href="../jquery-mobile/jquery.mobile-1.0a2.css" rel="stylesheet" type="text/css" />
<link href="css/event.css" rel="stylesheet" type="text/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>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>
Information</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>
Mobile Dev 2011</h2>
</div>
<h3>
The Event Venue</h3>
<p>
Information about the venue.</p>
<h3>
Hotels</h3>
<p>
This is the place for hotels information.</p>
<h3>
Transportation</h3>
<p>
All about transpoprtation.</p>
</div>
</div>
</body>
</html>
Страница отображается так:
Есть еще что-то для JQuery Mobile
Если вы новичок в JQuery Mobile, просматривая исходный код примера, вы заметите, насколько быстро вы сможете получить результаты, используя эту платформу.
Чтобы вам было легче начать, я намеренно упростил пример, используя только несколько статических HTML-страниц и работая с каркасом страниц, панелями инструментов и элементами представления списка в JQuery Mobile.
Тем не менее, в JQuery Mobile есть гораздо больше, чем то, о чем я говорил в этой серии. В следующих статьях я познакомлю вас с важными компонентами пользовательского интерфейса, такими как диалоги, элементы форм и панели инструментов, а также API, которые позволяют работать с различными сенсорными событиями и ориентациями экрана.
Загрузки
Получить код из репозитория JQuery Mobile Tutorial: MiamiCoder JQuery-Mobile-Tutorial
Дополнительная информация
Ознакомьтесь с документацией по JQuery Mobile, доступной на сайте JQuery Mobile .