Что нового в jQuery Mobile 1.2.0?

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

Я должен признать, что это диалоговое ограничение заставило меня тратить много времени, когда я начал работать с jQuery Mobile. Фактически, в то время я не использовал всплывающий виджет и чувствовал, что физический файл — это пустая трата дискового пространства. Ссылаясь на документацию:

Любая страница может быть представлена ​​в виде модального диалога, добавив атрибут data-rel = ”dialog” к ссылке привязки страницы.

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

Списки

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

Listview Autodividers

Команда jQuery Mobile представила новый атрибут списка, который вас просто поразит. Атрибут data-autodividers Хорошая новость заключается в том, что этот атрибут может работать вместе с data-filter Итак, если вы используете оба метода в своем списке, а пользователь вводит строку в поле ввода для фильтрации данных, разделители изменятся соответствующим образом. Конечно, они все еще остаются независимыми друг от друга. Чтобы начать использовать этот новый атрибут, ваш список должен выглядеть следующим образом.

  <ul data-role = "listview" data-autodividers = "true" data-filter = "true">
   <li> <a href="#"> Audero.it </a> </ li>
   <li> <a href="#"> BuildMobile.com </a> </ li>
 </ UL> 

Чтобы увидеть в действии полный пример, обратитесь к демонстрационной странице на веб-сайте jQuery Mobile.

Складные списки

Начиная с этого выпуска, в вашем распоряжении будут складные списки. Списки в списках отображаются при нажатии родительского списка. Будучи списками, вы можете использовать все атрибуты, которые вы уже знаете, такие как data-insetdata-filterdata-autodividers Теперь вы сможете показать один складной элемент или создать аккордеон. Если вы не знакомы с аккордеонами, это наборы складных элементов, которые вы можете создать, обернув несколько свернутых элементов тегом, имеющим атрибут data-role="collapsible-set"

Списки только для чтения

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

Устаревшие методы и свойства виджета загрузки страницы

В этой версии некоторые методы и свойства виджета загрузки страниц устарели. В jQuery Mobile вы настраивали его, используя свойства $.mobileloadingMessageloadingMessageTextVisibleloadingMessageTheme Теперь они должны быть установлены с использованием свойств texttextVisibletheme$.mobile.loader.prototype.options Итак, следующая конфигурация:

  $ .mobile.loadingMessage = "Пожалуйста, подождите ...";
 $ .mobile.loadingMessageTextVisible = true;
 $ .mobile.loadingMessageTheme = "e"; 

следует изменить следующим образом:

  $ .mobile.loader.prototype.options.text = "Пожалуйста, подождите ...";
 $ .mobile.loader.prototype.options.textVisible = true;
 $ .mobile.loader.prototype.options.theme = "e"; 

Другие изменения были реализованы в методах, чтобы показать или скрыть виджет загрузки страницы. Фактически, до версии 1.2.0 разработчики использовали $.mobile.showPageLoadingMsg()$.mobile.hidePageLoadingMsg() Теперь они устарели, поэтому вы должны использовать $.mobile.loading("show")$.mobile.loading("hide") Обратите внимание, что используя этот новый метод, вы также получаете возможность перезаписать глобальную конфигурацию в пользу одной указанной передачи объекта конфигурации при вызове этих методов. Пример вызова для показа виджета с использованием локальной конфигурации приведен ниже.

  // Показать виджет, используя образец темы "e",
 // пользовательское сообщение и настройка видимого текста
 $ .Mobile.loading (
    "Показать",
   {
     тема: "е",
     текст: "фу",
     textVisible: true
   }
 ); 

Вывод

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