jQuery Mobile

Пример jQuery Mobile, который оснащен новыми функциями и виджетами. Главная особенность jQuery Mobile это совместимость устройств. Чтобы увидеть повышенную совместимость jQuery Mobile смотрите следующий пример на одном из новых поддерживаемых устройств (например Tizen) и посмотрим как jQuery Mobile улучшает страницы.

В разделе урока говорится о новом виджете всплывающем окне и как его можно создать. jQuery Mobile позволяет разместить любой контент внутри контейнера, который парит над текущей страницей. Виджет Всплывающее окно состоит из трех настраиваемых событий:

  1. popupbeforeposition  перед открытием всплывающего окна.
  2. popupafteropen  после того как всплывающее окно открыто.
  3. popupafterclose  после того как всплывающее окно закрыто.

Демо

Окончательный код будет иметь две ссылки для открытия всплывающего окна. Первое звено имеет ID helloPopup для всплывающего окна с простым текстом, а второе не вызывает контекст напрямую. Анимационное уведомление будет сообщать о том что запрос выполняется в фоне.

Для уведомления используйте следующий код:

$("#helloPopup").on(
   "popupbeforeposition popupafteropen popupafterclose",
   function(event) {
      alert(event.type);
   }
);

Код всплывающего окна с изображением по центру:

$("#imagePopupLink").click(function() {
   $("#imagePopup").popup("open", {positionTo: "window"});
});

Следующий набор усовершенствований реализованных командой в jQuery это управление списком. Первые два Listview Autodividers и Collapsible Lists, объединены в демонстрационной странице. Autodividers расширит читаемый список добавив в разделитель алфавитный список, а сворачивающиеся списки составлены так чтобы поместились на максимально ограниченном пространстве экрана мобильных устройств.

Соответствующий код:

<div data-role="collapsible">
  <h3>Развернуть список</h3>

    Следующий список находится внутри складывающегося элемента. 
    Список имеет атрибут data-autodividers.

  <ul data-role="listview" data-autodividers="true" data-inset="true">
    <li><a href="http://htmlhook.ru/Pixel_bot">Pixel_bot</a></li>
    <li><a href="http://htmlhook.ru">htmlhook.ru</a></li>
    <li><a href="http://pixelcom.at.ua">htmlhook.ru crimea</a></li>
    <li><a href="http://htmlhook.ru">Pixel_blog</a></li>
  </ul>
</div>

В jQuery Mobile усовершенствована загрузка страниц устаревших методов и свойств. В следующем коде включена функция, которая добавлена в mobileinit, чтобы установить глобальные конфигурации загрузки виджета, используя новые свойства $. mobile.loader.prototype.

$(document).on("mobileinit", function() {
   $.mobile.loader.prototype.options.text = "Пожалуйста, подождите ...";
   $.mobile.loader.prototype.options.textVisible = true;
   $.mobile.loader.prototype.options.theme = "e";
});

Кроме того добавим функцию события pageshow, которая будут показывать виджет, а затем скроет его после 1,5 секунд с использованием новых методов $. mobile.loading ().

$(document).on("pageshow", function() {
   $.mobile.loading("show");
   setTimeout(function() { $.mobile.loading("hide"); }, 1500);
});

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Работа с jQuery Mobile 1.2.0</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
      $(document).on("mobileinit", function() {
        $.mobile.loader.prototype.options.text = "Пожалуйста, подождите ...";
        $.mobile.loader.prototype.options.textVisible = true;
        $.mobile.loader.prototype.options.theme = "e";
      });
    </script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
      $(document).on("pageinit", function() {
        $("#helloPopup").on("popupbeforeposition popupafteropen popupafterclose", function(event) {
          alert(event.type);
        });
        $("#imagePopupLink").click(function() {
          $("#imagePopup").popup("open", {positionTo: "window"});
        });
        $("#loadingLink").click(function() {
          $.mobile.loading("show", {
            theme: "b",
            text: "Другое сообщение ...",
            textVisible: true
          });
          setTimeout(function() { $.mobile.loading("hide"); }, 1500);
        });
      });
      $(document).on("pageshow", function() {
        $.mobile.loading("show");
        setTimeout(function() { $.mobile.loading("hide"); }, 1500);
      });
    </script>
  </head>
  <body>
<div data-role="page" id="examplePage">
      <header data-role="header">
        <h1>Что Нового в JQM 1.2.0</h1>
      </header>
      <div data-role="content" role="main">

          Эта страница покажет вам некоторые новые возможности, виджеты и
          методы <b>jQuery Mobile 1.2.0</b>

          "<a href="http://htmlhook.ru/primer-jquery-mobile.html"
             title="Пример jQuery Mobile"
             target="_blank">Пример jQuery Mobile</a>".

        <div data-role="collapsible-set">
          <div data-role="collapsible">
            <h3>Всплывающее окно</h3>
            <a href="#helloPopup" data-role="button" data-rel="popup">Основа всплывающего окна</a>
            <a href="#" data-role="button" data-rel="popup" id="imagePopupLink">Изображение всплывающего окна</a>
          </div>
          <div data-role="collapsible">
            <h3>Collapsible List with Listview Autodividers</h3>

              Следующий список находится внутри складывающегося элемента
              и его использует новый атрибут data-autodividers.

            <ul data-role="listview" data-autodividers="true" data-inset="true">
               <li><a href="http://htmlhook.ru/author/pixelbot">Pixel_bot</a></li>
               <li><a href="http://htmlhook.ru">htmlhook.ru</a></li>
               <li><a href="http://pixelcom.at.ua">htmlhook.ru crimea</a></li>
               <li><a href="http://htmlhook.ru">Pixel_blog</a></li>
           </ul>
          </div>
          <div data-role="collapsible">
            <h3>Только для чтения списка</h3>
            <h4>Принимал участие</h4>
            <ul data-role="listview" data-inset="true">
              <li>Aurelio De Rosa<span class="ui-li-count">3</span></li>
              <li>John Doe<span class="ui-li-count">2</span></li>
              <li>Jason Parker<span class="ui-li-count">5</span></li>
              <li>Pixel_bot<span class="ui-li-count">7</span></li>
            </ul>
          </div>
          <div data-role="collapsible">
            <h3>Загрузка</h3>
            <a href="#" data-role="button" id="loadingLink">Повторить загрузку...</a>
          </div>
        </div>
      </div>
      <div data-role="popup" id="helloPopup">
        <header data-role="header">
          <h1>Всплывающее окно jQuery Mobile</h1>
        </header>
        <div data-role="content">
          Здравствуйте! Я новый всплывающий виджет.
          <a href="#" title="Go back" data-role="button" data-rel="back">Закрыть</a>
        </div>
      </div>
      <div data-role="popup" id="imagePopup">
        <a href="#" data-rel="back" data-role="button" data-icon="delete"
          data-iconpos="notext" class="ui-btn-right">Закрыть</a>
        <div data-role="content">
          <img src="http://htmlhook.ru/images/icon/logo-pixel.png" alt="logo pixel" />
        </div>
      </div>
      <footer data-role="footer">
        <h3>htmlhook.ru</h3>
      </footer>
    </div>
    </body>
</html>

Ещё примеры

Вот и всё, теперь вы сможите справиться с jQuery Mobile. Он будут хорошо служить вашим мобильным приложениям и веб-сайтам.