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:
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.
Dzięki! Czekam na więcej… Zaczynam przygodę z PG, a tutków w polskiej sieci niewiele… Pozdrawiam
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