Статьи

Создавайте списки и всплывающие окна за считанные минуты, используя jQuery Mobile

Декабрь 7, 2018

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

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

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

  1. popupbeforeposition
  2. popupafteropen
  3. popupafterclose

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

  $ ( "# HelloPopup"). На (
    "popupbeforeposition popupafteropen popupafterclose",
    функция (событие) {
       оповещения (Event.type);
    }
 );

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

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

Управление мобильными списками jQuery

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

  <div data-role = "collapsible">
   <h3> Разборный список с автодиверами Listview </ h3>
   <Р>
     Следующий список находится внутри разборного элемента, и это
     также использует новый атрибут <code> data-autodividers </ code>.
   </ Р>
   <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
     <li> <a href="http://www.sitepoint.com"> BuildMobile.com </a> </ li>
     <li> <a href="http://www.sitepoint.com"> JSPro.com </a> </ li>
     <li> <a href="http://www.sitepoint.com"> PHPMaster.com </a> </ li>
     <li> <a href="http://www.sitepoint.com"> SitePoint.com </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$.mobile.loading() 

  $ (document) .on ("pageshow", function () {
    $ .Mobile.loading ( "шоу");
    setTimeout (function () {$ .mobile.loading ("hide");}, 1500);
 });

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

  $ ("# loadingLink"). click (function () {
    $ .mobile.loading ("show", {
       тема: "б",
       текст: «Другое сообщение ...»,
       textVisible: true
    });
    setTimeout (function () {$ .mobile.loading ("hide");}, 1500);
 });

Собираем все вместе

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

  <! DOCTYPE html>
 <HTML>
   <Голова>
     <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>
     <Скрипт>
       $ (document) .on ("mobileinit", function () {
         $ .mobile.loader.prototype.options.text = "Пожалуйста, подождите ...";
         $ .mobile.loader.prototype.options.textVisible = true;
         $ .mobile.loader.prototype.options.theme = "e";
       });
     </ Скрипт>
     <script src = "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </ script>
     <Скрипт>
       $ (document) .on ("pageinit", function () {
         $ ("# helloPopup"). on ("popupbeforeposition popupafteropen popupafterclose", function (event) {
           оповещения (Event.type);
         });
         $ ("# imagePopupLink"). click (function () {
           $ ("# imagePopup"). popup ("open", {positionTo: "window"});
         });
         $ ("# loadingLink"). click (function () {
           $ .mobile.loading ("show", {
             тема: "б",
             текст: «Другое сообщение ...»,
             textVisible: true
           });
           setTimeout (function () {$ .mobile.loading ("hide");}, 1500);
         });
       });
       $ (document) .on ("pageshow", function () {
         $ .Mobile.loading ( "шоу");
         setTimeout (function () {$ .mobile.loading ("hide");}, 1500);
       });
     </ Скрипт>
   </ HEAD>
   <Тело>
     <div data-role = "page" id = "examplePage">
       <header data-role = "header">
         <h1> Что нового в JQM 1.2.0 </ h1>
       </ Заголовок>
       <div data-role = "content" role = "main">
         <Р>
           Эта страница покажет вам некоторые новые функции, виджеты и
           метод <b> jQuery Mobile 1.2.0 </ b>, описанный в статье
           "<a href =" http://www.sitepoint.com/whats-new-in-jquery-mobile-1-2-0/ "
              title = "Что нового в jQuery Mobile 1.2.0?"
              target = "_ blank"> Что нового в jQuery Mobile 1.2.0? </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> Разборный список с автодиверами Listview </ h3>
             <Р>
               Следующий список находится внутри разборного элемента, и это
               также использует новый атрибут <code> data-autodividers </ code>.
             </ Р>
             <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li> <a href="http://www.sitepoint.com"> BuildMobile.com </a> </ li>
               <li> <a href="http://www.sitepoint.com"> JSPro.com </a> </ li>
               <li> <a href="http://www.sitepoint.com"> PHPMaster.com </a> </ li>
               <li> <a href="http://www.sitepoint.com"> SitePoint.com </a> </ li>
             </ UL>
           </ DIV>
           <div data-role = "collapsible">
             <h3> Списки только для чтения </ h3>
             <h4> Опубликованные статьи </ h4>
             <ul data-role = "listview" data-inset = "true">
               <li> Джон Доу <span class = "ui-li-count"> 2 </ span> </ li>
               <li> Джейсон Паркер <span class = "ui-li-count"> 5 </ 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> Popup </ h1>
         </ Заголовок>
         <div data-role = "content">
           <Р> Здравствуйте!  Я совершенно новый всплывающий виджет. </ P>
           <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://cdn.buildmobile.com/wp-content/themes/buildmobile-v1/images/logo.png" alt = "BuildMobile logo" />
         </ DIV>
       </ DIV>
       <footer data-role = "footer">
         </ Колонтитул>
     </ DIV>
   </ Body>
 </ Html>

Вывод

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

36
Share: