PhoneGap i jQuery Mobile

W ostatnim poście pokazałem jak zintegrować PhoneGapa z Visual Studio 2012. W tym poście zintegruje PhoneGap z jQuery. Ale najpierw układ katalogów z poprzedniego wpisu:

PhoneGapCatalogs

W porównaniu z standardowym projektem typu Windows Phone, pojawiło się kilka nowych folderów. Najistotniejszy to www. Znajdują się w nim takie foldery jak css, img, js, biblioteka cordova-2.5.0.js (biblioteka PhoneGapa) oraz index.html. Jeżeli ktoś kiedykolwiek tworzył strony internetowe, powinien się domyślić znaczenia tych elementów. W poprzednim poście mieliśmy aplikację, która wyświetlała prostą grafikę i nic nie robiła. Zatem dodajmy trochę interakcji z użytkownikiem.

plik index.html:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
	<title>First App</title>
</head>
<body>
	<div data-role="page">
		<div data-role="header">
			<h1>First App</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview" data-inset="true" data-filter="true">
				<li><a href="http://www.onet.pl">onet</a></li>
				<li><a href="http://www.wp.pl">wp</a></li>
				<li><a href="http://www.interia.pl">interia</a></li>
				<li><a href="http://www.o2.pl">o2</a></li>
				<li><a href="http://www.wykop.pl">wykop</a></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript" src="cordova-2.5.0.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript">
		app.initialize();
	</script>
</body>
</html>

W liniach 8, 9 i 10 dodałem bibliotekę jQuery Mobile, która doskonale się nadaje do tworzenia webowych aplikacji. W linii 9 dodałem div z atrybutem data-role=”page”. Biblioteka jQuery Mobile dosyć intensywnie korzysta z atrybutu data-role do nadawania odpowiedniego zachowania elementom na stronie. W liniach 15 i 18 zostały dodane pojemniki odpowiednio dla nagłówka i głównej zawartości. Najbardziej istotny element znajduje się w linii 19 jest, nim obiekt listview. Jego zadaniem jest wyświetlenie linków do popularnych polskich portalów w formie przyjaznej dla urządzeń mobilnych. Posiada także przyjazny filtr (data-filter=”true”). Jaka na taką ilość kodu program wygląda bardzo schludnie i zachęca do interakcji z użytkownikiem.

PG-listView
Share Button

2 Replies to “PhoneGap i jQuery Mobile”

  1. Dzięki! Czekam na więcej… Zaczynam przygodę z PG, a tutków w polskiej sieci niewiele… Pozdrawiam

  2. Ciesze sie ze znalazlem twoja strone, teraz jestem tu stalym gosciem, tylko troche ciezko bylo ja znalezc w wyszukiwarce na podana fraze, trzeba ja lepiej wypozycjonowac. Podepnij sobie ja do systemu wymiany linkow i masz pozycjonowanie za darmo, ruch powinienen ci wzrosnac kilkakrotnie jak wbijesz sie na pierwsza strone google.
    Wpisz sobie w google – seo stronka z seo poradami – tu jest wszystko opisane, napewno ci sie przyda
    pozdro

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Time limit is exhausted. Please reload the CAPTCHA.