jQuery Mobile - Kamil Wyremski

jQuery Mobile to framework, który znacznie ułatwia tworzenie responsywnych stron internetowych. Jest to biblioteka języka JavaScript, która ma za zadanie pomóc w tworzeniu stron, które będą poprawnie wyświetlane na urządzeniach o różnych rozdzielczościach ekranu (np. tablety, smartfony).

Nie jest to mobilna wersja jQuery. Jest to framework, który rozszerza oryginalnego jQuery o dodatki, które są pomocne, do tworzenia aplikacji webowych z poziomu urządzeń mobilnych. Zatem z jQuery Mobile będziemy tworzyć strony w HTML z tą sama biblioteką jQuery co w zwykłych, „dużych” stronach.

Cechy:

Kompatybilna ze wszystkimi przeglądarkami internetowymi oraz mobilnymi w systemach Android, iOS, Windows Phone, Blackberry, WebOS, Symbian
Zbudowana na bazie jQuery, dzięki czemu jest prosta w obsłudze dla ludzi zaznajomionych z tą biblioteką
Możliwość tworzenia własnych motywów graficznych
Jest bardzo „lekka”, dzięki czemu strony szybko się wczytują także na słabszych urządzeniach
Responsywność – poprawnie wyświetla stronę na wszystkich urządzeniach mobilnych
Zgodna z HTML5
Dzięki uproszczeniu zapytań AJAX ułatwia tworzenie stron semantycznych
Duża ilość dostępnych widgetów

Co zyskujemy dzięki temu frameworkowi?

Przede wszystkim pełną kompatybilność z wszystkimi dostępnymi na rynku urządzeniami i przeglądarkami. Aktualne informacje o wsparciu przez przeglądarki podane są na podstronie Graded Browser Support.

Biblioteka w całości bazuje na HTML5, CSS3 oraz JavaScript.

Po jej podłączeniu od razu otrzymujemy gotowy zestaw elementów interfejsu użytkownika, który jest przystosowany do urządzeń mobilnych z ekranem dotykowym.

Dzięki wczytywaniu podstron poprzez zapytania AJAX możemy tworzyć strony internetowe, które bardziej wyglądają jak aplikacje natywne, a nie Web. Dostarcza nam gotowe rozwiązania wspierające animacje i efekty nawigacji typowe dla aplikacji mobilnych. W ten sposób otrzymujemy stronę internetową, która w swej funkcjonalności nie różni się od aplikacji, dostarczając użytkownikowi takiej samej jakości wrażeń.

Celem jQuery Mobile jest stworzenie interfejsu użytkownika działającego pod najrozmaitszymi platformami.

Fundamentem frameworka jest jQuery i jQuery UI. Natomiast całość składa się z bogatego zestawu widgetów dobranych po to, aby stworzyć stronę maksymalnie wykorzystującą możliwości urządzeń mobilnych.

Tworzenie stron naprawdę jest bardzo szybkie – oto przykład z dokumentacji:

<!doctype html>
<html>
    <head>
		<meta charset="utf-8">
		<title>jQuery Mobile Example</title>
		<meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width">
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
 
    <body>
        <section data-role="page" id="first" data-theme="a">
            <header data-role="header" data-position="fixed">
                <h1>Page 1 Header</h1>
            </header>
 
            <article data-role="content">
                <h2>Hello, world!</h2>
                <a href="#second" data-role="button" data-inline="true" data-transition="flow" data-icon="carat-r" data-iconpos="right">Go to Page 2</a>
            </article>
 
            <footer data-role="footer" data-position="fixed">
                <h4>Page 1 Footer</h4>
            </footer>
        </section>
 
        <section data-role="page" id="second" data-theme="b">
            <header data-role="header" data-position="fixed"  data-add-back-btn="true">
                <h1>Page 2 Header</h1>
            </header>
 
            <article data-role="content">
                <h2>Example Page</h2>
            </article>
 
            <footer data-role="footer" data-position="fixed">
                <h4>Page 2 Footer</h4>
            </footer>
        </section>
    </body>
</html>

Dzięki wykorzystaniu atrybutów ,data-” możemy w bardzo prosty sposób stworzyć listy, buttony, slajdery i wiele innych interaktywnych elementów. Oczywiście możliwa jest także ręczna edycja stylów CSS oraz wywoływanie widgetów poprzez kod JavaScript.

jQuery Mobile to świetny, młody projekt. Pisanie aplikacji mobilnych web staje się prostsze, a efekty mogą zachwycić. Rewelacyjne UI, wiele dodatkowych funkcjonalności – to sprawia, iż nie można przejść obok jQuery Mobile obojętnie. Dlatego polecam przynajmniej do przetestowania!