Мы собрали 50 мобильных jQuery-советов и учебных пособий , 10 мобильных плагинов , 10 демонстраций мобильных веб-сайтов , 10 бесплатных мобильных тем , 10 новых мобильных фреймворков , 10 мобильных шпаргалок и многое другое, чтобы помочь вам запустить и запустить этот мобильный веб-сайт в любом месте. время!
Что такое jQuery Mobile?
jQuery Mobile — это фреймворк для веб-приложений, мобильных и мобильных веб-сайтов, обеспечивающий единый пользовательский интерфейс для нескольких платформ, таких как мобильное устройство iPhone, BlackBerry, Android и Windows Mobile. Будьте в курсе последних мобильных разработок jQuery!
1. Backbone Mobile Пример
Базовое мобильное приложение, работающее в Safari. Отличное место для начала разработки мобильных приложений — взглянуть на то, как все это сочетается. Начните с просмотра приложения в вашем браузере.
2. Используйте медиа-запросы для целевых устройств
Вы можете спросить, как настроить таргетинг на устройства в CSS (в зависимости от размера экрана). Допустим, вам нужен макет с двумя столбцами для iPad и один столбец для смартфонов. Лучший способ сделать это с помощью медиа-запросов. Имея несколько простых медиазапросов, вы можете быстро настроить размеры целевого экрана CSS.
3. Быстрый совет: как работать с @ Font-face
Существует несколько методов замены шрифтов, таких как cufon, sIFR, FLIR, @ font-face и Google Fonts API. При создании веб-приложения с использованием jQuery Mobile я обнаружил, что метод @ font-face — самый простой метод для работы, и производительность вполне удовлетворительная.
4. Куда добавить традиционные вызовы jQuery
Если вы хотите что-то изменить на странице до запуска мобильного плагина, рекомендуемое решение — просто поместить традиционные вызовы jQuery перед ссылкой, которая загружает мобильный плагин. Таким образом, ваши команды jQuery могут запускаться до загрузки библиотеки.
5. Полная базовая страница
Если вам снова и снова нужна полная наценка для базовой страницы. Таким образом, вот весь код, который вам нужен для настройки базовой страницы.
6. Создайте структуру столбцов самостоятельно
Если вы хотите оптимально структурировать одну страницу для нескольких устройств, вы можете объединить описанные выше приемы медиазапроса с техникой «столбцы в любом порядке». К счастью, веб-разработчики давно придумали, как перемещать столбцы и объединяя эту технику с медиа-запросами.
7. Использование Google Analytics с jQuery Mobile
Узнайте, как использовать Google Analytics с мобильным jQuery.
8. Отправьте форму JQuery Mobile через AJAX с PHP
Узнайте, как отправить форму JQuery Mobile через AJAX с PHP.
9. Как создать мобильную тему WordPress с помощью jQuery Mobile
Этот инструмент позволяет легко создавать мобильные веб-сайты и веб-приложения. В этом уроке я покажу вам, как создать оптимизированную для мобильных устройств тему WordPress.
10. Создание сайта с помощью jQuery Mobile, часть 1
В этом уроке я покажу вам, как создать сайт с помощью JQuery Mobile. В этой первой части урока я объясню характеристики сайта и буду реализовывать домашнюю страницу сайта.
11. Создание сайта с использованием JQuery Mobile, часть 2
Теперь пришло время создать страницу «Спикеры» как продолжение моей серии о том, как создать веб-сайт с помощью jQuery Mobile.
12. Отключить действие кнопки
Вот как отключить действие кнопки (например, для открытия страницы), добавьте следующий JavaScript.
13. Создание всплывающих диалогов
Одной из удобных функций библиотеки является встроенная функция всплывающих окон или диалоговых окон. Установить эту функцию довольно просто. Примечание. Во-первых, целевая страница должна быть полноценной мобильной страницей jQuery, как указано в совете № 1. Во-вторых, это будет работать только для внешних страниц; это должна быть отдельная страница для правильной работы.
14. Введение в jQuery Mobile
Узнайте, как использовать платформу jQuery Mobile. Это базовое введение в настройку страниц, ссылок, навигации и кнопок.
15. Установите цвет фона страницы
Это может показаться простым, но мне потребовалось несколько минут, чтобы понять, как применить цвет фона к странице, не перезаписывая его jQuery Mobile CSS. Обычно вы устанавливаете цвет фона для элемента body, но если вы используете фреймворк jQuery Mobile, вам нужно установить для него класс ui-page.
16. JQuery Mobile: что он может сделать для вас?
Узнайте, как новая платформа jQuery Mobile поможет вам с легкостью создавать великолепные веб-приложения для нескольких устройств. Много примеров кода и демо включены. Как создать простое мобильное приложение jQuery
17. Отключить загрузку всплывающего сообщения
Я нахожу всплывающее сообщение о загрузке немного раздражающим, потому что оно срабатывает каждый раз, когда вы загружаете другую страницу. Чтобы отключить это: добавьте следующую строку кода в ваш файл JS. Если всплывающее сообщение о загрузке уже немного раздражает, потому что оно срабатывает каждый раз, когда вы загружаете другую страницу. Есть способ отключить его, просто добавьте следующую строку кода в файл JS.
18. Как собрать RSS Reader с помощью jQuery Mobile
Сегодня мы погрузимся и создадим простую программу чтения Tuts + RSS, используя PHP и jQuery Mobile. Когда мы закончим, у вас будет возможность добавить этот простой проект на ваш iPhone или Android телефон одним нажатием кнопки, а также навыки для создания ваших веб-приложений!
19. Кнопка «Отмена» + «Сохранить»
Этот фрагмент кода отвечает двум основным потребностям. Во-первых, две кнопки расположены рядом друг с другом. К счастью, библиотека имеет встроенную структуру столбцов, которую можно легко использовать, используя тег fieldset и соответствующие классы, как показано ниже. Второе — иметь две кнопки с разными темами. Этот код взят непосредственно из документации, и я держу его под рукой для частого использования.
20. Целевые платформы с jQuery
Как бы нам ни хотелось выполнять определенный CSS для определенных устройств, мы также можем запускать jQuery только на определенных устройствах. Вот адаптация некоторого кода из Snipplr, который позволяет мне легко сегментировать части jQuery для запуска в зависимости от устройства пользователя.
21. Создайте собственную тему
jQuery Mobile Framework поставляется с 5 темами — Тема A, Тема B, Тема C, Тема D и Тема E. Но вы можете легко создать новую тему для своего веб-приложения.
22. Остановить усечение некоторых ключевых элементов
Одной из особенностей библиотеки (или недостатка, в зависимости от ваших потребностей) является то, что она интеллектуально усекает длинные элементы, чтобы вписаться в элементы пользовательского интерфейса. Есть две ситуации, когда это может раздражать. Во-первых, в элементах списка, где я предпочитаю видеть полный текст, а второй — в нижнем колонтитуле.
23. Два совета по разработке iPhone и jQuery на помощь
Первый и самый простой совет — работа с портом просмотра. (Вам может потребоваться зарегистрироваться в Apple, чтобы просмотреть эту ссылку. Два аргумента от Apple требуют ввода логина для простых документов!) Порт представления представляет собой простой метатег. Вот пример:
24. Удалить стрелку из элемента списка
По умолчанию платформа jQuery Mobile добавляет стрелку рядом с каждым элементом списка. Чтобы отключить это, установите для атрибута data-icon значение «false» в элементе списка, для которого нужно удалить стрелку.
25. Проверка мобильных форм jQuery
Изучите валидацию мобильных форм jQuery в этом руководстве.
26. Использование JQuery Mobile с элементом HTML5 canvas для прослушивания сенсорных событий в браузерах iPad и Android
JQuery Mobile поддерживает многочисленные сенсорные события и делает жизнь намного проще. Фактически, JQuery Mobile гарантирует, что ваше веб-приложение будет работать как в браузерах для мобильных устройств, так и для настольных компьютеров / ноутбуков. К сожалению, вы просто не можете ожидать, что событие JavaScript onclick будет работать на мобильном устройстве, как это происходит в браузере настольного компьютера или ноутбука.
27. События jQuery Mobile Touch: нажмите
Узнайте, как обнаружить сенсорное событие «касание» на смартфоне.
28. Использование JQuery Mobile с appMobi
В этом обучающем видео показано, как использовать новую мобильную версию популярной библиотеки JQuery JavaScript с appMobi. JQuery Mobile позволяет вам легко создавать приложения, которые выглядят как нативные, со встроенными кнопками, переходами, формами и многим другим.
29. Отключите AJAX-навигацию для всех ссылок одновременно
Как бы ни была хороша навигация AJAX, бывают ситуации, когда вы просто отключите ее. Используйте этот бит jQuery, чтобы запретить мобильной библиотеке использовать AJAX-навигацию.
30. Отображение случайного фонового изображения при загрузке страницы
В jQuery Mobile есть ряд событий инициализации страницы, которые можно использовать для запуска определенных методов при загрузке страницы. Следующий CSS + JavaScript можно использовать для отображения случайного фонового изображения при каждой загрузке страницы.
31. Создайте кнопку только для изображения без текста
Иногда вы можете не захотеть иметь какой-либо текст для своей кнопки, но по-прежнему использовать остальные функции, которые идут с элементом кнопки. Это обычно имеет место с домашней кнопкой или информационной кнопкой. Чтобы скрыть любой текст, связанный с кнопкой, установите для атрибута data-iconpos значение «notext». Например:
32. Навигационные меню мобильных панелей jQuery
Узнайте, как использовать панели инструментов jQuery Mobile, панели навигации, создавать меню с фиксированной позицией и многое другое!
33. Список поиска в jQuery Mobile
Мы можем легко создать список, который включает в себя элемент поиска, с помощью которого пользователь может начать вводить текст и получить из списка все элементы, которые соответствуют этому тексту.
34. jQuery Mobile: официальная среда разработки мобильных приложений jQuery
Эта среда разработки для мобильных устройств оснащена изящными функциями и позволяет [мобильным] разработчикам создавать серьезные jQuery для своих приложений под iOS, Android, BlackBerry, Bada, Windows Mobile, Palm OS, Symbian и MeeGo и веб-приложений. Вы должны увидеть этого плохого парня в мобильном Сафари.
35. Открыть ссылку без использования AJAX с переходами страниц
Чтобы открыть ссылку без использования AJAX с переходами страниц (т. Е. Перезагрузить всю страницу по-старому), установите для атрибута rel значение «external».
36. Внутренние ссылки на несколько страниц в jQuery Mobile
Это короткий видеоклип, в котором объясняется, как работают внутренние ссылки в jQuery Mobile.
37. Диалоговые переходы в jQuery Mobile
Узнайте, как установить переход при отображении диалогового окна в jQuery Mobile.
38. Добавление направлений движения на веб-сайт jQuery Mobile
Узнайте, как добавить маршруты проезда на мобильный веб-сайт jQuery.
39. jQuery Mobile Framework — Учебное пособие по формам
В этом руководстве мы сосредоточимся на некоторых основных элементах jQuery Mobile: структура страницы, формы и отправка Ajax-форм. Учебное пособие основано на альфа-версии 2 версии 1.0 платформы jQuery Mobile.
40. Простой просмотр списка в jQuery Mobile
В этом видеоролике показано, как создать простое представление списка в jQuery Mobile.
41. Разделить список в jQuery Mobile
Мы можем добавить к каждому элементу списка дополнительную ссылку. Он будет отображаться вместе со значком в правой части предмета.
42. Форма элементов управления в jQuery Mobile
Это короткий видеоклип, в котором показаны доступные элементы управления при использовании библиотеки jQuery Mobile.
43. Фиксированное позиционирование верхнего и нижнего колонтитула в jQuery Mobile
Это короткий видеоклип, который показывает смысл установки фиксированного положения как для верхнего, так и для нижнего колонтитула (в jQuery Mobile).
44. Мобильные встроенные кнопки jQuery
Мы можем получить кнопку, ширина которой не равна всей ширине экрана, добавив к ней атрибут data-inline = ”true”. Этот видеоклип показывает, как это сделать.
45. Привет, мир в jQuery Mobile
Это короткий видеоклип, в котором объясняется, как разработать простую веб-страницу с использованием библиотеки jQuery Mobile.
46. Создание мобильного сайта с поддержкой офлайн с помощью jQuery Mobile
Узнайте, как создать мобильный веб-сайт с поддержкой jQuery mobile.
47. JQuery Mobile и JSON
В этом руководстве описывается среда JQuery Mobile (JQM) для написания мобильных веб-приложений, предназначенных для ведущих браузеров мобильной индустрии. JQM используется для предоставления интуитивно понятного и согласованного пользовательского интерфейса для веб-приложений, работающих на мобильных устройствах, таких как iPhone, iPad, Android, WebOS, BlackBerry версии 6 (Torch, Playbook) и других. Учебное пособие начинается с высокоуровневого взгляда на проект JQM и на отношение JQM к HTML5 и зависимость от него. После краткого обзора одного из множества способов создания приложения JQM и некоторых способов, с помощью которых JQM расширяет основные элементы веб-интерфейса пользователя, в учебнике рассматриваются основные требования к автоматизации работы отдела продаж.
48. Создание и использование пользовательских иконок в jQuery Mobile
Этот пост покажет вам, как создавать и реализовывать собственные иконки. Кроме того, я покажу вам, как добавить поддержку значка высокого разрешения для дисплея Retina на iPhone 4 и более новых устройств с высоким разрешением.
49. Начало работы с jQuery Mobile & Rails 3
Это приложение позволит вам создавать, читать, обновлять и удалять сообщения в блогах с мобильных устройств.
50. Используйте jQuery Mobile для создания собственного приложения для чтения новостей Android
Узнайте, как создать собственное приложение для чтения новостей Android с помощью jQuery Mobile.