П’ять причин використовувати 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'ом, а потім покращує ті пристрої, які їх підтримують.

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

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

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

3. Готовий адаптивний веб-дизайн

Завжди можна було розробляти адаптивні вебсайти на додачу до jQuery Mobile, тому що це рамка mobile-first ... а НЕ mobile only. І в версії 1.3 jQuery mobile ще більше уваги приділяється властивостям адаптивного веб-дизайну.

Знаєте такі меню, які вислизають збоку? Популяризований мобільним додатком Facebook'а, цей шаблон для користувача інтерфейсу дуже добре знайомий більшості користувачів мобільних пристроїв. Подивіться панелі в дії.

Таблиці на вужчих екранах можуть перемикатися до складеного в «стопку» типу відображення позначки / дати. jQuery Mobile викликає повторну заливку такої таблиці.

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

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

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

У попередньому прикладі я вмонтував тему 'A' і 'B'. До jQuery Mobile додається можливість рекурсивно застосовувати до елементів свої теми за допомогою атрибута data-theme. Якби мені потрібно було за замовчуванням використовувати на сторінці тему 'A', а в формі - тему 'B', я просто застосував би data-theme = "b" до елементів форми, і всі елементи всередині форми автоматично взяли б стилі теми ' B '.

5. Модель сторінкової навігації Ajax

Скажімо, ви перебуваєте на index.html, а потім клацаєте посилання на page.html, і у посилання на page.html наступна розмітка:

Зверніть увагу: Тут не потрібно атрибут data-transition, це - просто демоверсія зміни анімації переходу сторінки до ковзання замість поступового згасання переходу за замовчуванням. В jQuery mobile вбудовано безліч інших переходів сторінки від простого згасання до складнішого перетікання.

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

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

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

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

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

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

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

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

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

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

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

Редакція: Команда webformyself.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі