Пять причин використовувати jQuery Mobile

19

Від автора: у міру поширення сенсорних екранів на телефонах, «таблетках» і лептопах, ми зіткнулися з терміновою необхідністю побудови веб-сайтів з підтримкою сенсорного введення. Крім того, власникам вебсайтів потрібно забезпечити перегляд свого контенту в постійно зростаючому кількості різних пристроїв. Ось де на сцені з’являється jQuery Mobile. Каркас jQuery Mobile здатний покращувати вебсайти, додаючи форми з підтримкою сенсорного введення, більш ефективну завантаження сторінок і розширену підтримку пристроїв, використовуючи принцип прогресивного поліпшення.

Довгий час я був затятим захисником jQuery, але одразу ж не був упевнений в тому, що потрібен саме підхід jQuery Mobile. Я вирішив дізнатися про нього більше, поговоривши з творцями jQuery Mobile Скоттом Джелом (Scott Jehl) і Тоддом Паркером (Todd Parker) з Filament Group. Я запитав їх, чому jQuery Mobile веде себе саме так, а не інакше, і в якості результату отримав п’ять основних речей, які проробляє jQuery Mobile, щоб допомогти нам будувати сенсорні вебсайти, які працюють в широкому діапазоні браузерів і пристроїв:

Широке покриття браузерів і пристроїв – з допомогою прогресивного поліпшення ваш вебсайт зможуть побачити на величезній кількості браузерів і пристроїв.

Форми і віджети користувацького інтерфейсу з підтримкою сенсорного введення – можна поліпшити сенсорну підтримку введення форм, додавши набір віджетів користувальницького інтерфейсу з можливістю сенсорного введення.

Готовий адаптивний веб-дизайн — jQuery Mobile – це каркас ‘mobile-first’, а не ‘mobile only’.

Браузерний движок і шаблони тим – легкорасширяемый і легкомодифицируемый браузерний і шаблонний движок.

Модель сторінкової навігації Ajax – завантажуйте нові сторінки швидше, застосовуючи pushstate Ajax і HTML5 замість повного оновлення сторінки.

Давайте розглянемо уважніше кожну з цих п’яти причин:

1. Широке покриття браузерів і пристроїв

«Не руйнуйте Мережа» — мантра jQuery Mobile. Web урочисто обіцяв, що хто завгодно, де завгодно в світі зможе отримати доступ до контенту, ввівши URL або клацнувши по посиланню.

jQuery Mobile – єдиний значний фреймворк користувальницького інтерфейсу, який безпосередньо гарантує, що будь-яка людина може отримати доступ до вмісту через URL або посилання. jQuery Mobile охоплює концепції мережі і працює разом з нею, а не проти неї. Він вибирає прогресивне поліпшення там, де воно приносить основний HTML до тих пристроїв, які не можуть управлятися з CSS і Ajax’ом, а потім покращує ті пристрої, які їх підтримують.

Пять причин використовувати jQuery Mobile

2. Input-s і віджети UI з підтримкою сенсорного введення

Якщо ви намагалися потрапити за чекбоксу у формі з поганою підтримкою сенсорного введення, то знаєте, як незручно збільшувати або зменшувати її, щоб нарешті дістатися до погано створених елементів форми. Вам потрібно гарантувати хорошу роботу ваших елементів форми і віджетів користувальницького інтерфейсу з сенсорами. Сенсорні екрани зараз в лептопах і десктопах, тому робити вебсайти, не призначені витримувати атаки виходять на ринок нових сенсорних пристроїв, абсолютно непробачно. jQuery Mobile призначений в першу чергу для сенсорів (але при цьому відмінно працює з мишею), так що у вас вийдуть чудові великі мішені для торкання пальцями, елементи форми і віджети користувальницького інтерфейсу.

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 викликає повторну заливку такої таблиці.

Пять причин використовувати jQuery Mobile

Адаптивна сітка

Сітка jQuery Mobile складається з блоків простий сітки, які можна скласти один на інший при перегляді з маленького екрану.

Пять причин використовувати jQuery Mobile

4. Браузерний движок і шаблони тим

jQuery Mobile дивиться на ваші атрибути data-* в HTML і покращує їх поведінку і стилі. Наприклад, при застосуванні до невпорядкованим списками data-role=»listview», CSS класи автоматично впроваджуються у ваші списки так, що ті виглядають рухливими. А якщо всередині елементів списку є посилання, він додасть стрілку-вказівник, щоб показати, що можна зробити перехід до нової сторінці, доторкнувшись до цього конкретного елемента.

Атрибути data-* дають вам базове форматування і структуру, але в jQuery Mobile всі опціонально, а класи CSS розширюваність, так що темою за замовчуванням ви не обмежені.

Перше, що потрібно зробити для модифікування програми під власні запити – почати з jQuery Mobile Themeroller. Створити власну забарвлення теми так просто, взявши і перетягнувши кольору з колірної палітри прямо в той елемент, якому ви призначаєте стилі. У Themeroller’а є інтегрований інструмент Adobe Kuler, в якому можна вибирати найбільш рейтингові колірні схеми.

Пять причин використовувати jQuery Mobile

У попередньому прикладі я вмонтував тему ‘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 вбудовано безліч інших переходів сторінки від простого згасання до більш складного перетіканню.

Пять причин використовувати jQuery Mobile

Якщо ви використовуєте браузер підтримує HTML5 pushstate, URL-адресу у вікні вашого браузера буде оновлено до yourdomain.com/page.html як тільки нова сторінка закінчить вислизати. Крім того, під час завантаження нової сторінки демонструється обертовий індикатор завантаження, щоб дати зрозуміти користувачеві, що посилання була вдало натиснута.
Основне переваги цього способу завантаження сторінок полягає в тому, що вам не потрібно заново ініціалізувати всі запити JavaScript і CSS при завантаженні другої сторінки. Навіть якщо ці об’єкти завантажуються з кешу, у мобільних пристроях економиться час їх виконання.

У разі завантаження першої сторінки за допомогою jQuery Mobile всі ваші скрипти і стилі вже ініціалізується у вашому пристрої, тому не потрібно дублювати цю роботу при завантаженні нової сторінки. Єдине, що потрібно для її візуалізації – новий фрагмент HTML. Застосовуючи цей метод завантаження сторінки, ви досягнете більш швидких наступних сторінкових запитів, критичних для відмінного враження мобільних користувачів від вашого сайту.

Прочитати детальніше про моделі посторінкової навігації jQuery Mobile можна тут.

Підказка: завантажуйте нові сторінки відразу ж (без індикатора завантаження)

Є кілька способів завантаження нових сторінок ще швидше … миттєво. Перший спосіб – якщо ви знаєте, що користувач, швидше за все, відвідає наступного певну сторінку, можна додати посилання атрибут даних prefetch, щоб jQuery Mobile завантажував їх після завантаження поточної сторінки.

Link

Так нова сторінка тихенько завантажиться у тлі після завантаження вікна.

Інший метод – змінити структуру сторінки і вставити сторінки в поточну сторінку. Однак будьте з ним обережніше, тому що таким чином збільшиться початкова завантаження і не буде прямого доступу через URL. Але з допомогою створення окремих div ів з унікальними id і сторінкою з рольовим ім’ям даних (мультистраничная структура) ваші нові сторінки завантажуються миттєво, як тільки ви клацнете на посилання. Тільки переконайтеся, що ці сторінки знаходяться на тому ж рівні DOM, що і ваша головна сторінка.

New page

Потім зробіть посилання на вставлену сторінку з допомогою знака «решітки» і її id у своїй поточній сторінці.

New page View

Так завантажиться вміст сторінки всередині div а з id newpage.
За допомогою цих двох методів весь вміст сторінки буде доступний відразу ж і не потрібно показувати індикатор завантаження.

Нова модель посторінкової навігації, подарована нам jQuery Mobile, працює з вебом так, щоб нові сторінки завантажувалися ще швидше, ніж традиційна повне завантаження сторінки, через завантаження фрагмента HTML, необхідного для візуалізації нових сторінок, а також дається кілька способів зробити так, щоб користувачеві процес завантаження здавався миттєвим.

Доставимо по Мережі

jQuery Mobile – приклад Мережі, виправдовує свою обіцянку зробити так, щоб усі могли отримати однаковий доступ до безкоштовного і публічного контенту, викладеному в Мережі, незалежно від того, якими користуються пристроями. Він призначений не тільки для мобільних пристроїв, це модель ‘mobile-first’, ‘mobile-only’, тому може застосовуватися в якості основи адаптивного веб-дизайну. Всі ці чудові сенсорні input-s форм і віджети можуть повністю змінюватися на основі теми і відмінно працюють незалежно від пристрою (мобільний або десктоп).

Пять причин використовувати jQuery Mobile

Для отримання інформації та уточнення кожного з перерахованих пунктів, дивіться мою бесіду на YouTube’е під назвою ‘jQuery Mobile, доставимо по Мережі (jQuery Mobile, Web Delivery for ALL’).