[RestApp] – использование обещаний, promises в AngularJS и страницы в jQuery Mobile – ч.3
Давайте рассмотрим внимательнее каждую из этих пяти причин:
1. Широкое покрытие браузеров и устройств
«Не разрушайте Сеть» — мантра jQuery Mobile. Web торжественно обещал, что кто угодно, где угодно в мире сможет получить доступ к контенту, введя URL или щелкнув по ссылке.
jQuery Mobile – единственный значительный фреймворк пользовательского интерфейса, который непосредственно гарантирует, что любой человек может получить доступ к содержимому через URL или ссылку. jQuery Mobile охватывает концепции сети и работает вместе с ней, а не против нее. Он выбирает прогрессивное улучшение там, где оно доставляет основной HTML к тем устройствам, которые не могут управляться с CSS и Ajax’ом, а затем улучшает те устройства, которые их поддерживают.
2. Input-ы и виджеты UI с поддержкой сенсорного ввода
Если вы пытались попасть по чекбоксу в форме с плохой поддержкой сенсорного ввода, то знаете, как неудобно увеличивать или уменьшать ее, чтобы наконец добраться до плохо созданных элементов формы. Вам нужно гарантировать хорошую работу ваших элементов формы и виджетов пользовательского интерфейса с сенсорами. Сенсорные экраны сейчас в лэптопах и десктопах, поэтому делать вебсайты, не предназначенные выдерживать атаки выходящих на рынок новых сенсорных устройств, совершенно непростительно. jQuery Mobile предназначен в первую очередь для сенсоров (но при этом отлично работает с мышью), так что у вас получатся великолепные крупные мишени для касания пальцами, элементы формы и виджеты пользовательского интерфейса.
jQuery Mobile автоматически улучшает ваши формы, чтобы те хорошо взаимодействовали с сенсорным вводом. Чекбоксы обернуты в очень большие метки и создают хорошую область касания, поэтому дотронуться до нужного чекбокса легко. Текстовые области проблематичны в мобильных устройствах, стоит лишь вам промахнуться мимо предназначенного текстового пространства (у вас двупальцевая прокрутка для просмотра контента в прокручиваемой текстовой области), поэтому jQuery Mobile автоматически увеличивает текстовые области, чтобы пользователь мог в любое время и легко увидеть введенное содержимое.
В jQuery Mobile много легкоприменимых стилей и улучшенных элементов формы, таких как слайдер, чекбокс и набор радиокнопок, поисковые поля ввода и меню выбора. Кроме того, каждый из данных элементов формы идет в комплекте с альтернативной мини-версией, что идеально подходит для вставки в элементы заголовка или нижнего колонтитула вашей страницы (в качестве миниэлемента выбора для навигации).
У jQuery Mobile также есть виджеты, такие как постоянные панели инструментов, кнопки, диалоги и – мой личный любимчик – новый выскакивающий виджет, который дает вам возможность отобразить во всплывающем окне любой вид контента оттуда, где вы его запускаете. Это подходит для отображения внутристраничных форм, диалогов, фотографий, карт и видео и.т.д. С каждой новой версией jQuery Mobile добавляются новые виджеты, все они поддерживают сенсорный ввод и работают в мириадах устройств и браузеров.
3. Готовый адаптивный веб-дизайн
Всегда можно было разрабатывать адаптивные вебсайты вдобавок к jQuery Mobile, потому что это рамка mobile-first … а НЕ mobile only. И в версии 1.3 jQuery mobile еще больше внимания уделяется свойствам адаптивного веб-дизайна.
Новый виджет-панель
Знаете такие меню, которые выскальзывают сбоку? Популяризованный мобильным приложением Facebook’а, этот шаблон пользовательского интерфейса очень хорошо знаком большинству пользователей мобильных устройств. Посмотрите панели в действии.
Адаптивные таблицы
Таблицы на более узких экранах могут переключаться к сложенному в «стопку» типу отображения метки/даты. jQuery Mobile вызывает повторную заливку такой таблицы.
Адаптивная сетка
Сетка jQuery Mobile состоит из блоков простой сетки, которые можно сложить один на другой при просмотре с маленького экрана.
4. Браузерный движок и шаблоны тем
jQuery Mobile смотрит на ваши атрибуты data-* в HTML и улучшает их поведение и стили. Например, при применении к неупорядоченным спискам data-role=”listview”, классы CSS автоматически внедряются в ваши списки так, что те выглядят подвижными. А если внутри элементов списка есть ссылка, он добавит стрелку-указатель, чтобы показать, что можно сделать переход к новой странице, дотронувшись до этого конкретного элемента.
Атрибуты data-* дают вам базовое форматирование и структуру, но в jQuery Mobile все опционально, а классы CSS расширяемы, так что темой по умолчанию вы не ограничены.
Первое, что нужно сделать для модифицирования приложения под собственные запросы – начать с jQuery Mobile Themeroller. Создать собственную расцветку темы так просто, взяв и перетащив цвета из цветовой палитры прямо в тот элемент, которому вы назначаете стили. У Themeroller’а имеется интегрированный инструмент Adobe Kuler, в котором можно выбирать самые рейтинговые цветовые схемы.
В предыдущем примере я встроил тему ‘A’ и ‘B’. К jQuery Mobile прилагается возможность рекурсивно применять к элементам свои темы с помощью атрибута data-theme . Если бы мне нужно было по умолчанию использовать на странице тему ‘A’, а в форме – тему ‘B’, я просто применил бы data-theme=”b” к элементам формы, и все элементы внутри формы автоматически приняли бы стили темы ‘B’.
5. Модель страничной навигации Ajax
Вместо полной перезагрузки страницы jQuery Mobile ищет ссылки, связанные с доменом, на котором вы находитесь, и извлекает новый контент страницы с помощью Ajax’а. Когда пользователь щелкает ссылку, содержимое новой страницы загружается в новый div, а затем переходит в текущую область просмотра.
Скажем, вы находитесь на index.html, а затем щелкаете ссылку на page.html, и у ссылки на page.html следующая разметка:
Link
Обратите внимание: Здесь не требуется атрибут data-transition, это – просто демоверсия смены анимации перехода страницы к скольжению вместо постепенного угасания перехода по умолчанию. В jQuery mobile встроено множество других переходов страницы от простого угасания к более сложному перетеканию.
Если используемый вами браузер поддерживает HTML5 pushstate, URL-адрес в окне вашего браузера будет обновлен до yourdomain.com/page.html, как только новая страница закончит выскальзывать. Кроме того, во время загрузки новой страницы демонстрируется вращающийся индикатор загрузки, чтобы дать понять пользователю, что ссылка была удачно нажата.
Основное преимущества этого способа загрузки страниц состоит в том, что вам не нужно заново инициализировать все запросы JavaScript и CSS при загрузке второй страницы. Даже если эти объекты загружаются из кэша, в мобильных устройствах экономится время их исполнения.
В случае загрузки первой страницы с помощью jQuery Mobile все ваши скрипты и стили уже инициализированы в вашем устройстве, поэтому не нужно заново проделывать эту работу при загрузке новой страницы. Единственное, что нужно для ее визуализации – новый фрагмент HTML. Применяя этот метод загрузки страницы, вы добьетесь более быстрых последующих страничных запросов, критичных для отличного впечатления мобильных пользователей от вашего сайта.
Прочесть подробнее о модели постраничной навигации jQuery Mobile можно здесь.
Подсказка: загружайте новые страницы сразу же (без индикатора загрузки)
Есть пара способов загрузки новых страниц еще быстрее … мгновенно. Первый способ – если вы знаете, что пользователь, скорее всего, посетит следующей определенную страницу, то можно добавить в ссылки атрибут данных prefetch, чтобы jQuery Mobile загружал их после загрузки текущей страницы.
Link
Так новая страница тихонько загрузится в фоне после загрузки окна.
Другой метод – изменить структуру страницы и вставить страницы в текущую страницу. Однако будьте с ним осторожнее, потому что таким образом увеличится исходная загрузка и не будет прямого доступа через URL. Но с помощью создания отдельных div’ов с уникальными id и страницей с ролевым именем данных (мультистраничная структура) ваши новые страницы будут загружаться мгновенно, как только вы щелкнете на ссылку. Только убедитесь, что эти страницы находятся на том же уровне DOM, что и ваша главная страница.
