jQuery Mobile

JQuery Mobile to framework, który znacznie ułatwia tworzenie responsywnych stron internetowych. Śliślej mówiąc, 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). Jest ona w pełni kompatybilna z innymi frameworkami dostępnymi w sieci.

Nie jest to mobilna wersja jQuery. Jest to framework, który rozszerza oryginalnego jQuery o dodatki, które są pomocne, a czasem niezbędne, 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 sematycznych
  • 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 framework’a 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, slidery 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!

 

Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close