Мобільний додаток Дизайн / Dev будівлі навігації з jQuery

Смартфони тепер оснащені дуже ефективними веб-браузерами. JavaScript є більш потужним, ніж будь-коли раніше, і його можна розширити за допомогою бібліотек кодів, таких як jQuery. Коли ви додаєте найостанніші специфікації HTML5 / CSS3, можна створювати дуже швидкі веб-програми для мобільних пристроїв з деякими базовими кодами.

У цьому уроці я покажу, як можна створити веб-сайт / webapp для мобільних пристроїв. Ми будемо використовувати медіа-запити CSS3 для націлювання на певні пристрої та дозвіл екрана. Плюс трохи jQuery допомагає анімувати меню і завантажувати вміст зовнішньої сторінки за допомогою викликів Ajax. Навіть краще, розташування може навіть розширюватися, щоб відображатися належним чином у звичайних настільних браузерах, таких як Chrome або Firefox.

• Демо в прямому ефірі
• Вихідний код

Визначення структури сторінки

Почнемо з переходу на HTML-сторінку і стилюємо її за допомогою деяких правил CSS. Я пропущу більшість незвичайних мета-тегів у заголовку, оскільки вони не впливають на веб-додаток безпосередньо. Проте є кілька, про які я маю згадати, а саме з фрагмента нижче:

X-UA-Compatible використовується для опису того, як документ повинен відображатися в певних веб-переглядачах. Це цікавий сценарій при кодуванні в HTML5, тому я не надто турбуюся про це. Однак мета вікна перегляду Тег дуже важливий. Він встановлює вікно мобільного браузера на 100% замість стандартного ефекту масштабування.

Також можна вимкнути масштабування користувача значенням вмісту user-scalable = no. Але в цьому випадку ми просто хочемо встановити ширину всього екрана, як і ширину нашого пристрою. Теги веб-додатків Apple дозволять веб-сайту зберігати піктограму головного екрану на вашому iPhone або iPod Touch. Не повністю необхідний, але, безумовно, варто мати.

Внутрішній вміст тіла

Всередині тега тіла я встановив оболонку div з ідентифікатором #w. Всередині я зламав макет на ще два divs, використовуючи ідентифікатори #pagebody і #navmenu. Ширина всієї сторінки обмежена 640px за вибором, так що макет масштабується до суворого числа.

 
  
HK Mobile
 
 
 
Ласкаво просимо на мобільний сайт!
 
 
 
 
 
Посилання меню
 
 
 
Головна
 
Про нас
 
Реклама
 
Пишіть для нас
 
Контакти
 
Політика конфіденційності
 
 
 

Меню навігації надається нижчим значенням z-індексу таким чином #pagebody завжди зверху. Це має вирішальне значення, оскільки код JavaScript буде пересуватися по тілу сторінки певну кількість пікселів, щоб відкрити навігацію під ним.

Я використав хеш-символ (#) перед кожною сторінкою .html, щоб зупинити погане поводження в Mobile Safari. Всякий раз, коли ви натискаєте на посилання, з'являється панель URL і витісняє вміст. Але при посиланні на ідентифікатор нічого не перезавантажується, за винятком викликів 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; 

Цей верхній сегмент визначає стилі для обох розділів сторінки. Наше навігаційне меню має ширину всього 300px, тому це залишає трохи місця для того, щоб зміст сторінки все ще можна було побачити. Кнопка меню відкриття / закривання також розташована безпосередньо з лівого боку і завжди доступна. Тут важливим є значення властивості z-index та використання положення: фіксований; на нашому меню.

Заголовок верхньої панелі інструментів також є цікавим розділом. Вона встановлюється на фіксовану позицію, щоб вона прокручувалася зі змістом сторінки. Це повторює аналогічний ефект, який можна знайти в будь-якому рядку заголовка програми iOS.

/ ** @group header ** / #w #pagebody header # toolbarnav display: block; положення: фіксований; ліворуч: 0px; зверху: 0px; z-індекс: 9999; background: # 0b1851 url ('img / tabbar-solid-bg.png') ліворуч; кордон-радіус: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -о-прикордонний радіус: 5px; border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; кордон-нижній-лівий-радіус: 0; -моз-кордон-радіус-знизуліфт: 0; -webkit-border-bottom-left-радіус: 0; висота: 44px; ширина: 100%; max-width: 640px;  #w #pagebody header # toolbarnav h1 text-align: center; прокладка: 10px; padding-right: 40px; колір: # e6e8f2; font-weight: bold; розмір шрифту: 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 і піктограму кнопки меню для пристроїв сітківки.

/ ** відображення сітківки ** / @media тільки для екрана та (-bubit-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 background: url ('img/[email protected] ') не повторюється; розмір фону: 53px 30px; 

Створення стрілок меню

У області навігації я також включив невелику піктограму зі стрілкою на праву сторону кожного посилання меню. Це може бути легко замінено зображенням з будь-якої творчої роботи. Але в основному всі шанувальники CSS3 будуть любити тестування цього методу.

#w #navmenu ul li a :: after content: "; display: block; ширина: 6px; висота: 6px; правий край: 3px solid # d0d0d8; border-top: 3px solid # 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 (function () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" var viewport = width: $ (window) .width (), height: $ (window) .height (); // отримання змінних як // viewport.width / viewport.height 

function openme () $ (function () topbar.animate (left: "290px", length: 300, queue: false); pagebody.animate (left: "290px", duration: 300 , queue: false););  function closeme () var closeme = $ (function () topbar.animate (left: "0px", length: 180, queue: false); pagebody.animate (left: "0px", length: 180, queue: false);); 

// завантаження вмісту сторінки для навігації $ ("a.navlink"). live ("клік", функція (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length);'; 

closeme (); $ (function () topbar.css ("зверху", "0px"); window.scrollTo (0, 1););

content.html (imgloader); setTimeout (function () content.load (linkhtmlurl, function () / * без зворотного виклику * /), 1200);