Mobile App дизайн / Dev сграда навигация с jQuery
Смартфоните вече са оборудвани с някои много ефективни уеб браузъри. JavaScript е по-мощен от всякога и може да бъде разширен с помощта на кодови библиотеки като jQuery. Когато добавите най-новите спецификации на HTML5 / CSS3, е възможно да се изградят много бързи мобилни уеб приложения с някои основни кодове на frontend.
В този урок ще ви покажа как можете да създадете уебсайт / webapp, базиран на мобилни устройства. Ще използваме CSS3 медийни заявки за насочване към конкретни устройства и резолюции на екрана. Плюс малко jQuery помага за анимиране на менюто и зареждане на външно съдържание на страницата с помощта на Ajax повиквания. Дори по-добре, оформлението може дори да се разшири, за да се показва правилно в обикновените настолни браузъри като Chrome или Firefox.
- Демонстрация на живо
- Програмен код
Дефиниране на структурата на страницата
Нека започнем с преглеждането на HTML страницата и да го оформяме с някои CSS правила. Ще пропусна повечето от необичайните мета тагове в заглавката, тъй като те не засягат директно уеб приложението. Въпреки това има няколко, които трябва да спомена, а именно от откъса по-долу:
X-UA-съвместим се използва за описание на начина, по който документът трябва да се визуализира в някои браузъри. Това е интересен сценарий, когато се кодира в HTML5, така че не бих се притеснявал прекалено много за това. Въпреки това мета Прозорецът е много важно. Той настройва прозореца на мобилния браузър на 100% вместо стандартния увеличен ефект.
Възможно е също така да забраните потребителското увеличение със стойността на съдържанието потребителя мащабируеми = няма. Но в този случай ние просто искаме да настроим ширината на целия екран да бъде същата като нашата ширина на устройството. Маркерите на уеб приложенията на Apple ще позволят уебсайтът да бъде запазен като икона на началния екран на вашия iPhone или iPod Touch. Не е напълно необходимо, но със сигурност си струва.
Съдържание на вътрешно тяло
Вътре в тялото етикет Аз настройка обвивка DIV с ID #W. Отвътре съм счупил оформлението в още две divs, използвайки идентификатори #pagebody и #navmenu. Цялата ширина на страницата е ограничена до 640px по избор, така че подредбата да се превърне в строг номер.
Навигационното меню получава по-ниска стойност на z-индекса, така че #pagebody винаги е на върха. Това е от решаващо значение, тъй като кодът на JavaScript ще се плъзга по тялото на страницата с определен брой пиксели, за да разкрие навигацията отдолу.
Използвал съм символа на хеш (#) пред всяка .html страница, за да спрем лошото поведение в Mobile Safari. Всеки път, когато щракнете върху връзката, се появява лентата с адреси и натискате съдържанието. Но при позоваване на идентификатор нищо не се презарежда, освен чрез JavaScript повиквания.
Позициониране на CSS
В нашия CSS код няма много объркващо съдържание. По-голямата част от позиционирането се извършва ръчно и след това се манипулира чрез jQuery. Но в нашия документ има няколко интересни парчета.
/ ** @group основна част ** / #w #pagebody position: relative; наляво: 0; max-width: 640px; min-width: 320px; z-индекс: 99999; #w #navmenu background: # 475566; височина: 100%; дисплей: блок; позиция: фиксирана; ширина: 300px; наляво: 0px; отгоре: 0px; z-индекс: 0;
Този най-висок сегмент определя стилове за двете части на страницата. Нашето меню за навигация е само с ширина 300 пиксела, така че остава малко място за съдържанието на страницата, което все още може да се види. Бутонът за отваряне / затваряне на менюто също се намира директно от лявата страна и винаги е достъпен. Важното тук е стойността на свойството z-index и използването позиция: фиксирана; на нашето меню.
В горната част на лентата с инструменти също е интересна секция. Това е настроено на фиксирана позиция, така че да превърта със съдържанието на страницата. Това повтаря подобен ефект, както бихте намерили в заглавната лента на приложението на iOS.
/ ** @group header ** / #w #pagebody header # toolbarnav display: block; позиция: фиксирана; наляво: 0px; отгоре: 0px; z-индекс: 9999; фон: # 0b1851 url ('img / tabbar-solid-bg.png') отгоре вляво не се повтаря; граничен радиус: 5px; -moz-border-radius: 5px; - радиус: 5px; -ограничен радиус: 5px; радиус на границата отдолу-надясно: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; радиус на границата отдолу-ляво: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; височина: 44px; ширина: 100%; max-width: 640px; #w #pagebody header # toolbarnav h1 text-align: център; пълнеж: 10px; запълване-дясно: 40px; цвят: # e6e8f2; тегло на шрифта: удебелен; размер на шрифта: 2.1em; текстова сянка: 1px 1px 0px # 313131; Правила за мобилни устройства
Лесно е да забележите, че използвам и фоново изображение за структурата на синята заглавна лента. Той е с размери 640 × 44 пиксела, за да се запази последователната структура на оформлението. Но също така съм разработил изображение @ 2x за дисплеите на iPhone / iPad на ретината. Можете да видите и двете изображения по-долу или да ги вземете от моя демо-изходен код.
- System/demo/img/[email protected]
- System/demo/img/[email protected]
Настройвам мобилния CSS за тази функционалност в друг файл с име responsive.css. Той съдържа две медийни заявки, които заменят заглавната лента bg и иконата на менюто за устройствата на ретината.
/ ** retina display ** / @media само екран и (-webkit-min-device-pixel-ratio: 2), само екран и (min - moz-device-pixel-ratio: 1.5), само екран и ( min-device-pixel-ratio: 1.5) #w #pagebody header (фон: # 0b1851 url ('img/[email protected] ') отгоре вляво няма повторение; размер на фона: 640px 44px; #w #pagebody header # menu-btn фон: url ('img/[email protected] ') не се повтаря; размер на фона: 53px 30px; Проектиране на стрелки на менюто
В зоната за навигация също включих малка икона със стрелка над дясната страна на всяка връзка с менюто. Това лесно може да бъде заменено с изображение от произведения на изкуството на „Creative Commons“. Но най-вече всички любители на CSS3 ще обичат да тестват този метод.
#w #navmenu ul li a :: after content: "; дисплей: блок; ширина: 6px; височина: 6px; граница вдясно: 3px плътна # d0d0d8; граница отгоре: 3px плътна # d0d0d8; позиция: абсолютна 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;
Използваме трансформиране собственост за създаване на малка граница след съдържанието. Аз също настройка позиция: абсолютна; така че ние можем свободно да движим тези граници около вътрешната връзка. Това е супер лесно да промените цвета на границата на състояние на навъртане, което предлага по-динамично усещане. Това е доста невероятно това, което можете да постигнете само с помощта на основните правила HTML5 и CSS3.
Но сега нека да преминем към битовете и парчетата на JavaScript кода. Не забравяйте, че това изисква включване към библиотеката jQuery, за да може моят код да работи правилно.
jQuery Анимиран
При писането на тези потребителски кодове създадох чисто нов документ с име script.js. Чувствайте се свободни да ги напишете директно >
$ (document) .ready (функция () var pagebody = $ ("# pagebody"); var varuhe = = ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" var viewport = width: $ (window) .width (), height: $ (window) .height (); // извличане на променливи като // viewport.width / viewport.height За да започнете, мога да настроя някои променливи на страници, където можем да препращаме към елементи в документа много по-бързо. Стойността на екранния прозорец никога не се използва, но може да бъде полезна, ако искате да коригирате етапите на анимацията. Например, можете да проверите текущата ширина на браузъра и съответно да отворите менюто си по-малко или по-широко.
функция openme () $ (function () topbar.animate (left: "290px", продължителност: 300, опашка: false); pagebody.animate (left: "290px", продължителност: 300 , опашка: false);); function closeme () var closeme = $ (функция () topbar.animate (left: "0px", продължителност: 180, опашка: false); pagebody.animate (left: "0px", продължителност: 180, опашка: false););
След това дефинирах две важни функции за отваряне и затваряне на менюто. Те биха могли да бъдат направени в една функция и превключване на обратно извикване - с изключение на това, че всъщност трябва да анимираме два различни елемента едновременно. За съжаление това не е поведението по подразбиране за jQuery, така че трябва да прибегнем до алтернативен синтаксис.
Двата елемента, към които насочваме, са именувани topbar и pagebody. Вътрешната област на съдържанието с бял фон е пълното тяло на страницата; въпреки това позицията на заглавната лента е фиксирана в горната част на страницата. Това означава, че няма естествено да се анимира с страницата и трябва да използваме отделно обаждане. Отварянето е настроено да натисне наляво 290px (почти пълната ширина на навигацията 300px) и функцията за затваряне я прибира.
Зареждане на динамично съдържание
Горният код е достатъчно лесен за поддръжка на анимацията. И теоретично това е всичко, от което се нуждаете за такъв прост мобилен уебсайт - но искам да добавя малко повече.
Всеки път, когато потребителят кликне върху връзката в менюто, ние искаме да затворим текущата навигация и да покажем gif, докато търсим съдържанието на страницата. След като веднъж приключим, премахваме gif изображението и го зареждаме вътре. Това е фантастично, защото дори можем да използваме статични .html страници за съдържанието. Не PHP или Ruby или Perl или каквито и да било бекенд езици, които да правят нещата объркани.
Управление на кликвания
Първо, искаме да тестваме, когато нашите потребители кликнат върху бутоните за навигация. Това ще спре нормалната href стойност от зареждането и вместо това можем да използваме нашите собствени функции за показване на външно съдържание.
// зареждане на съдържанието на страницата за навигация $ ("a.navlink"). на живо ("click", функция (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = '
Сега отваряме селектор за всяка котва с класа navlink. Всеки път, когато потребител кликне върху някоя от тези връзки, ние го спираме да зарежда и настройва променлива за пълния URL адрес. Също така съм настроил променлива за съдържанието на HTML, за да включи стандартен зареждащ файл. Ако искате да персонализирате собствените си аз силно препоръчвам Ajaxload.
Ajax .load ()
Има две различни фигури, които съм счупил спретнато. Кодът по-долу е първият ни бит, който затваря менюто за навигация и премества целия прозорец на документа до върха. Искаме да заменим съдържанието на вътрешното тяло с малка анимация на товарача и потребителите не могат да го видят, ако гледат в долната част на страницата.
closeme (); $ (function () topbar.css ("отгоре", "0px"); window.scrollTo (0, 1);); Сега най-накрая искаме да заменим съдържанието на вътрешното тяло с нашия образ и да извлечем външната страница, която да се зареди. Обикновено това отнема само няколко стотин милисекунди или дори по-бързо, така че съм настроил функция за изчакване.
content.html (imgloader); setTimeout (функция () content.load (linkhtmlurl, function () / * no callback * /), 1200);
Това ще спре 1200 милисекунди, преди да зареди ново съдържание. За моето демо това изглежда много по-добре и ви дава представа как ще се държи приложението на по-бавни интернет връзки.
заключение
Насърчавам всички уеб разработчици да изтеглят изходния код на наставника и да си играят сами. Това е такъв основен пример за това какво може да се постигне с HTML / CSS3 и докосване на JavaScript ефектите. Изграждането на екрани за мобилни устройства е по-лесно от всякога с медийни заявки и по-разширени уеб браузъри.
Вижте дали можете да приложите някой от тези кодове в бъдещите си уеб проекти. Изграждането на мобилни приложения е изкуство, подобно на уеб дизайна, и изисква много отдаденост и практика. Надявам се, че този урок може да бъде добра отправна точка само за няколко ентусиазирани разработчици. Ако имате въпроси или мисли за кода, не се колебайте да споделите с нас в пост-дискусионната област.
