Статьи

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

Сентябрь 25, 2017

Эта статья является продолжением моей серии о том, как создать сайт с помощью JQuery Mobile. В первой части этого руководства « Создание веб-сайта с использованием JQuery Mobile», часть 1 , я представил требования к сайту и завершил реализацию домашней страницы.

Теперь пришло время создать страницу докладчиков.

От каркаса до HTML

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

Как и на домашней странице, я буду использовать стандартный шаблон страницы JQuery Mobile для страницы Speakers. Я начну с простой страницы, например:

<!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>My Event</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>
                Speakers</h1>
        </div>
        <div data-role="content">
            <div id="banner">

            </div>
            <p>
                Page content goes here.</p>

        </div>
    </div>
</body>
</html>

Вот как это выглядит:

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

JQuery Mobile Page Transitions

Когда вы попробуете код, вы заметите приятный переход с слайда с домашней страницы на страницу колонок. Платформа jQuery Mobile включает в себя набор из шести эффектов перехода на основе CSS:

  • Горка
  • Скользить вверх
  • Скользить вниз
  • Поп
  • увядать
  • кувырок

Согласно документации по переходам на страницы JQuery Mobile , эти эффекты могут быть применены к любому объекту или событию изменения страницы. Эффекты применяют выбранный переход при переходе на новую страницу и обратный переход для кнопки «Назад». (Слайд справа налево — это переход по умолчанию.)

Вы также заметите кнопку «назад». Фреймворк автоматически генерирует кнопку «назад» на каждой странице. При необходимости вы можете предотвратить добавление кнопки «Назад» в заголовок, добавив собственную кнопку в левый слот или добавив атрибут data-nobackbtn = «true» в контейнер заголовка.

Добавление элементов страницы

Теперь перейдем к добавлению элементов на страницу «Динамики».

Сначала мне нужен начальный текст в области содержимого страницы:

<div id="banner">
  <h2>Mobile Dev 2011</h2>
</div>
<p>We've got the world's greatest experts ready to deliver a full day of amazing content!</p>

Наконец, мне нужен неупорядоченный список для отображения динамиков. Каждый оратор будет иметь свой собственный шаблон в элементе li:

<ul data-role="listview" data-inset="true">
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker A</h3>
            <p>
                Short introduction of Speaker A</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker B</h3>
            <p>
                Short introduction of Speaker B</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker C</h3>
            <p>
                Short introduction of Speaker C</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker D</h3>
            <p>
                Short introduction of Speaker D</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker E</h3>
            <p>
                Short introduction of Speaker E</p>
        </div>
    </li>
    <li class="list-item-speaker">
        <div class="list-item-content-speaker">
            <img src="img/placeholder-2.png" class="thumb-speaker-small" />
            <h3>
                Speaker F</h3>
            <p>
                Short introduction of Speaker F</p>
        </div>
    </li>
</ul>

Как и на домашней странице, назначение атрибута data-role = «listview» для элемента ul приведет к тому, что jQuery Mobile будет применять стили к списку, которые преобразуют его в удобный для просмотра список. Вот и все, что нужно для завершения страницы докладчиков:

Следующие шаги

Сайт начинает обретать форму, когда страницы «Домой» и «Спикеры» готовы. В следующей части этой серии я создам страницу «Расписание».

Мысли? Комментарии?

Загрузки

Получить код из репозитория JQuery Mobile Tutorial: MiamiCoder JQuery-Mobile-Tutorial

Дополнительная информация

Ознакомьтесь с документацией по JQuery Mobile, доступной на сайте JQuery Mobile .

30
Share: