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 postu:

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:

W liniach 8, 9 i 10 dodałem bibliotekę jQuery Mobile, która doskonale się nadaje do tworzenia webowych aplikacji. W linii 14 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 19 zostały dodane pojemniki odpowiednio dla nagłówka i głównej zawartości. Najbardziej istotny element znajduje się w linii 20 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

2 comments to PhoneGap i jQuery Mobile

  • Grupal  says:

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

  • Majkello  says:

    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

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Time limit is exhausted. Please reload the CAPTCHA.