Nawigacja w aplikacji mobilnej do projektowania / tworzenia aplikacji za pomocą jQuery

Smartfony są teraz wyposażone w bardzo wydajne przeglądarki internetowe. JavaScript jest bardziej wydajny niż kiedykolwiek wcześniej i można go rozszerzyć za pomocą bibliotek kodu, takich jak jQuery. Kiedy dodasz najnowsze specyfikacje HTML5 / CSS3, możliwe jest zbudowanie bardzo zgrabnych mobilnych aplikacji internetowych z podstawowym kodem frontendowym.

W tym samouczku pokażę, jak można zbudować stronę internetową / aplikację mobilną opartą na urządzeniach mobilnych. Będziemy używać zapytań o media CSS3 do kierowania na określone urządzenia i rozdzielczości ekranu. Plus trochę jQuery pomaga animować menu i ładować zawartość strony zewnętrznej za pomocą wywołań Ajax. Co więcej, układ może nawet zostać rozszerzony, aby wyświetlał się poprawnie w zwykłych przeglądarkach, takich jak Chrome lub Firefox.

• Demo na żywo
• Kod źródłowy

Definiowanie struktury strony

Zacznijmy najpierw od strony HTML i ułóż ją w stylu CSS. Pominę większość nietypowych metatagów w nagłówku, ponieważ nie wpływają one bezpośrednio na aplikację internetową. Jest jednak kilka, o których powinienem wspomnieć, a mianowicie z fragmentu poniżej:

Kompatybilny z X-UA służy do opisania sposobu wyświetlania dokumentu w niektórych przeglądarkach. Jest to interesujący scenariusz podczas kodowania w HTML5, więc nie przejmowałbym się tym zbytnio. Jednak meta rzutnia znacznik jest bardzo ważny. Ustawia okno przeglądarki na 100% zamiast standardowego powiększonego efektu.

Możliwe jest również wyłączenie powiększenia użytkownika za pomocą wartości zawartości skalowalny przez użytkownika = nie. Ale w tym przypadku chcemy ustawić pełną szerokość ekranu tak, aby była taka sama jak szerokość naszego urządzenia. Tagi aplikacji internetowej Apple pozwolą na zapisanie witryny jako ikony ekranu głównego na telefonie iPhone lub iPodzie Touch. Nie do końca konieczne, ale z pewnością warte posiadania.

Wewnętrzna treść ciała

Wewnątrz tagu body skonfigurowałem wrapper div z identyfikatorem #w. Wewnątrz złamałem układ na dwa kolejne div używając identyfikatorów #pagebody i #navmenu. Szerokość całej strony jest ograniczona do 640 pikseli z wyboru, aby układ skalował się do ścisłej liczby.

 
  
HK Mobile
 
 
 
Witamy na stronie mobilnej!
 
 
 
 
 
Łącza menu
 
 
 
Dom
 
O nas
 
Reklamować
 
Napisz do nas
 
Łączność
 
Polityka prywatności
 
 
 

Menu nawigacyjne ma niższą wartość indeksu Z, więc #pagebody jest zawsze na wierzchu. Ma to kluczowe znaczenie, ponieważ kod JavaScript przesunie się po ciele strony o określoną liczbę pikseli, aby odsłonić nawigację poniżej.

Użyłem symbolu skrótu (#) przed każdą stroną .html, aby zatrzymać jakieś złe zachowanie w Mobile Safari. Kiedykolwiek klikniesz link, pojawi się pasek adresu URL i przesunie zawartość. Ale podczas odwoływania się do identyfikatora nic nie jest ponownie ładowane z wyjątkiem wywołań JavaScript.

Pozycjonowanie CSS

W naszym kodzie CSS nie ma wielu mylących treści. Większość pozycjonowania odbywa się ręcznie, a następnie manipulowana za pomocą jQuery. Ale w naszym dokumencie jest kilka interesujących elementów.

/ ** @grupa core body ** / #w #pagebody position: relative; po lewej: 0; max-width: 640px; min-width: 320px; indeks z: 99999;  #w #navmenu tło: # 475566; wysokość: 100%; Blok wyświetlacza; pozycja: naprawiona; szerokość: 300px; left: 0px; top: 0px; indeks z: 0; 

Ten górny segment definiuje style dla obu sekcji strony. Nasze menu nawigacyjne ma tylko 300 pikseli szerokości, więc pozostawia to trochę miejsca na zawartość strony, aby nadal była widoczna. Przycisk menu otwierania / zamykania znajduje się również bezpośrednio po lewej stronie i jest zawsze dostępny. Ważnym elementem jest tutaj wartość właściwości indeksu Z i użycie pozycja: naprawiona; w naszym navmenu.

Interesujący jest także nagłówek górnego paska narzędzi. To jest ustawione na stałą pozycję, więc będzie przewijać zawartość strony. Powtarza to podobny efekt, jaki można znaleźć na dowolnym pasku tytułu aplikacji na iOS.

/ ** @group header ** / #w #pagebody header # toolbarnav display: block; pozycja: naprawiona; left: 0px; top: 0px; z-index: 9999; tło: # 0b1851 url ('img / tabbar-solid-bg.png') górny lewy bez powtórzenia; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; wysokość: 44px; szerokość: 100%; max-width: 640px;  #w #pagebody header # toolbarnav h1 text-align: center; padding-top: 10px; padding right: 40px; kolor: # e6e8f2; waga czcionki: pogrubiona; rozmiar czcionki: 2.1em; text-shadow: 1px 1px 0px # 313131; 

Reguły mobilne

Łatwo zauważyć, że używam także obrazu tła dla niebieskiego paska nagłówka. Jest to rozmiar 640 × 44 pikseli, aby zachować spójną strukturę układu. Ale opracowałem także obraz @ 2x dla wyświetlaczy Retina na iPhone / iPad. Możesz zobaczyć oba obrazy poniżej lub pobrać je z mojego kodu źródłowego demo.

• System/demo/img/[email protected]
• System/demo/img/[email protected]

Skonfigurowałem mobilny CSS dla tej funkcji w innym pliku o nazwie responsive.css. Zawiera dwa zapytania o media, które zastępują pasek tytułu bg i ikonę przycisku menu dla urządzeń siatkówki.

/ ** wyświetlacz retina ** / ekran tylko @media i (-webkit-min-device-pixel-ratio: 2), tylko ekran i (min - moz-device-pixel-ratio: 1,5), tylko ekran i ( stosunek min-urządzenie-piksel: 1.5) #w #pagebody nagłówek tło: # 0b1851 adres URL ('img/[email protected] ') górny lewy bez powtórzenia; rozmiar tła: 640px 44px;  #w #pagebody header # menu-btn background: url ('img/[email protected] ') no-repeat; rozmiar tła: 53px 30px; 

Projektowanie strzałek menu

W obszarze nawigacji umieściłem także małą ikonę strzałki po prawej stronie każdego łącza menu. Można to łatwo zastąpić obrazem z dowolnej kreatywnej grafiki. Ale przede wszystkim wszyscy miłośnicy CSS3 pokochają przetestowanie tej metody.

#w #navmenu ul li a :: after content: "; display: block; width: 6px; height: 6px; border-right: 3px solid # d0d0d8; border-top: 3px solid # d0d0d8; position: absolute; right : 30px; top: 45%; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -o-transform: rotate (45deg); transform: rotate (45deg); #w #navmenu ul li a: hover :: after border-color: # cad0e6;

Używamy przekształcać właściwość do utworzenia małej granicy po zawartości. Ja też się konfiguruję pozycja: absolutna; dzięki czemu możemy swobodnie przenosić te obramowania wokół wewnętrznego elementu łącza. Bardzo łatwo jest zmienić kolor obramowania w stanie zawisu, co zapewnia bardziej dynamiczne uczucie. To niewiarygodne, co możesz osiągnąć, używając podstawowych zasad HTML5 i CSS3.

Ale teraz przejdźmy do bitów i fragmentów kodu JavaScript. Pamiętaj, że wymaga to dołączenia do biblioteki jQuery, aby mój kod działał poprawnie.

jQuery animowane

Pisząc te niestandardowe kody, stworzyłem zupełnie nowy dokument o nazwie script.js. Możesz je napisać bezpośrednio w > tagi lub pobierz mój przykład z kodu źródłowego demo.

$ (document) .ready (function () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (window) .width (), height: $ (window) .height (); // pobierz zmienne jako // viewport.width / viewport.height 

funkcja openme () $ (function () topbar.animate (left: "290px", czas trwania: 300, kolejka: false); pagebody.animate (left: "290px", czas trwania: 300 , kolejka: false););  function closeme () var closeme = $ (function () topbar.animate (left: "0px", czas trwania: 180, kolejka: false); pagebody.animate (left: "0px", czas trwania: 180, kolejka: false);); 

// ładowanie zawartości strony dla nawigacji $ ("a.navlink"). live ("kliknij", funkcja (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = ''; 

closeme (); $ (function () topbar.css ("top", "0px"); window.scrollTo (0, 1););

content.html (imgloader); setTimeout (function () content.load (linkhtmlurl, function () / * no callback * /), 1200);