[jQuery][HTML5] Jak zrobić mobilną wersję strony internetowej pod iPhone’a i Androida?
Ten wpis ma 15 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
W dzisiejszych czasach telefony i tablety wyposażone w systemy iOS i Android podbijają świat. Dlatego fundacja jQuery stworzyła bibliotekę jQuery specjalnie pod urządzenia mobilne - jQuery Mobile. Jest to biblioteka, która obecnie znajduje się w wersji alfa, lecz nie zmienia to faktu, że jest bardzo efektowna i narzuca nowe konwencje budowania stron WWW dla urządzeń mobilnych. A więc jak zbudować mobilną wersję strony WWW?
Mobilne strony WWW, które opierają o bibliotekę jQuery Mobile współpracują z HTML5, dlatego też będę z niego korzystał w jakimś stopniu.
Na początek musimy zdefiniować szkielet nagłówka HEAD strony:
< !DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo strony mobilnej</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
</html>
Kolejnym krokiem jest zdefiniowanie szkieletu strony w sekcji BODY:
<body>
<div data-role="page" id="strona1">
<header data-role="header" class="ui-bar-a ui-header">
<h1 role="heading" class="ui-title">Strona 1</h1>
<nav>
<ul>
<li><a href="#strona1" data-role="button" data-icon="home">Strona 1</a></li>
<li><a href="#strona2" data-role="button" data-icon="star">Strona 2</a></li>
</ul>
</nav>
</header>
<div data-role="content">
<p>To jest przykładowa strona zbudowana z wykorzystaniem biblioteki jQuery Mobile.<br />
Powinna się dobrze prezentować w telefonach iPhone, z systemem Android czy BlackBerry.</p>
</div>
<footer data-role="footer">
<h4>Stopka</h4>
</footer>
</div>
</body>
- data-role - dzięki tej instrukcji, możemy tworzyć własne atrybuty semantyczne (o tym wkrótce w kolejnym artykule)
- data-icon - nowy sposób na wstawianie ikonek do linków
- role - odpowiada za przydzielenie roli w rozumieniu semantycznym (role - semantyka)
Poniższy kod prezentuje strukturę kolejnej strony, na której wyświetlane są obrazki w przyciskach. Na potrzeby artykułu stworzyłem specyficzną galerię.
<div data-role="page" id="strona2">
<header data-role="header" class="ui-bar-a ui-header">
<h1 role="heading" class="ui-title">Strona 2</h1>
<nav>
<ul>
<li><a href="#strona1" data-role="button" data-icon="home">Strona 1</a></li>
<li><a href="#strona2" data-role="button" data-icon="star">Strona 2</a></li>
</ul>
</nav>
</header>
<div data-role="content">
<ul class="ui-listview" data-role="listview" role="listbox">
<li class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c" role="option" data-theme="c">
<div class="ui-btn-inner">
<div class="ui-btn-text">
<img class="ul-li-thumb" src="1.jpg"/>
<h3 class="ul-li-heading">Logo 1</h3>
<p class="ul-li-desc">Logo brązowe</p>
</div>
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
</li>
<li class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c" role="option" data-theme="c">
<div class="ui-btn-inner">
<div class="ui-btn-text">
<img class="ul-li-thumb" src="2.jpg"/>
<h3 class="ul-li-heading">Logo 2</h3>
<p class="ul-li-desc">Logo czerwone</p>
</div>
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
</li>
</ul>
</div>
<footer data-role="footer">
<h4>Stopka</h4>
</footer>
</div>
Należy zauważyć, że bardzo ważne jest to, aby stosować odpowiednie nazewnictwo klas. Ponieważ, to właśnie one definiują efektowny wygląd strony mobilnej.
W powyższym przykładzie zastosowałem linkowanie wewnętrzne, ale nic nie stoi na przeszkodzie, aby stosować linkowanie zewnętrzne. Należy pamiętać, że wewnątrz tej biblioteki działa AJAX i nie jesteśmy zmuszeni do tworzenia własnych wywołań AJAXowych.
Ponadto, biblioteka jQuery Mobile zapewnia kilka schematów kolorystycznych (od a do f) w celu stworzenia atrakcyjnego, dopasowanego do strony wyglądu.
Podsumowując, biblioteka jQuery Mobile mimo że znajduje się jeszcze w wersji alfa pozwala osiągnąć niesamowite efekty i pozwala tworzyć strony dopasowane pod najnowsze smartfony. Dzięki niej, możemy już zacząć korzystać z dobrodziejstw nowego języka budowania stron WWW - HTML5, oraz technologii AJAX.
Najciekawsze jest to, że nie musimy z pomocą tej biblioteki budować stron wyłącznie pod smartfony. Możemy stworzyć interfejs dla zwykłych stron WWW.
Należy pamiętać, że pełnię "mocy" ta biblioteka ukaże w przeglądarkach: Google Chrome (Android) i Safari (iOS). W Operze i Firefoksie będzie też działać, ale nie będzie można zauważyć animacji. Natomiast w IE7/8/9 w ogóle nie zadziała.
Demo z tego artykułu można zobaczyć pod tym linkiem: strona mobilna z wykorzystaniem jQuery Mobile
O autorze
