Пример jQuery Mobile

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

Работа с новыми инструментами jQuery Mobile

Демо
Главная особенность jQuery Mobile это  совместимость устройств . Чтобы увидеть повышенную совместимость jQuery Mobile, попробуем следующий пример, на одном из новых поддерживаемых устройств (например Tizen) и посмотрим, как jQuery Mobile 1.2.0 улучшает страницы. В следующем разделе урока говорится о новом виджете всплывающем окне  и как его можно создать. 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 Mobile управление списком

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

Соответствующий код приведен ниже.




<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://pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua/Pixel_bot">Pixel_bot</a></li>
    <li><a href=
http://pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua">Pixel.com</a></li>
    <li><a href=
http://pixelcom.crimea.ua/"http://pixelcom.at.ua">Pixel.com crimea</a></li>
    <li><a href=
http://pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua">Pixel_blog</a></li>
  </ul>
</div>
   


Третьим основным усовершенствованием jQuery Mobile 1.2.0 было введение  только для чтения списков . Это дополнение является более эстетическим изменением, чем функциональный характер, смотрите на код, чтобы понять разницу.
И, наконец, в новой версии 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://pixelcom.crimea.ua/"http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src=
http://pixelcom.crimea.ua/"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://pixelcom.crimea.ua/"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://pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua/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=
http://pixelcom.crimea.ua/"#helloPopup" data-role="button" data-rel="popup">Основа всплывающего окна</a>
            <a href=
http://pixelcom.crimea.ua/"#" 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://pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua/author/pixelbot">Pixel_bot</a></li>
               <li><a href=
http://pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua">Pixel.com</a></li>
               <li><a href=
http://pixelcom.crimea.ua/"http://pixelcom.at.ua">Pixel.com crimea</a></li>
               <li><a href=
http://pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua">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=
http://pixelcom.crimea.ua/"#" 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=
http://pixelcom.crimea.ua/"#" title="Go back" data-role="button" data-rel="back">Закрыть</a>
        </div>
      </div>
      <div data-role="popup" id="imagePopup">
        <a href=
http://pixelcom.crimea.ua/"#" data-rel="back" data-role="button" data-icon="delete"
          data-iconpos="notext" class="ui-btn-right">Закрыть</a>
        <div data-role="content">
          <img src=
http://pixelcom.crimea.ua/"http://www.pixelcom.crimea.ua/images/icon/logo-pixel.png" alt="logo pixel" />
        </div>
      </div>
      <footer data-role="footer">
        <h3>Pixel.com</h3>
      </footer>
    </div>
    </body>
</html>


В заключение

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

3 комментария на тему “Пример jQuery Mobile”

  1. комментарии

    Привет!
    А событие mobileinit в обычных браузерах не работает?
    Что то никак мне не удается инициализировать кастомный mobile.loader,
    чтобы вместо дефолтного рисунка загрузчика показывался другой.

    По клику событие вызывается и загрузчик показывается, а вот чтобы по умолчанию при загрузке новой страницы никак не хочет.

  2. комментарии

    как открыть внешнюю ссылку внутри jquery без полного перехода на внешний ресурс?

    чтобы кнопкой «домой» вернутся на начало

  3. комментарии

    Привет DS,
    Для открытия содержания из другого ресурса применяют iframe.

    Где Вы увидели кнопку «домой»?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>