jQuery iPhone UI

Вже, напевно, місяць хвалюся своїм колегам своїми успіхами у написанні тих чи інших віджетів під jQuery-UI, але ось останнього кроку до закінченого і корисного продукту зробити не виходило, до сьогодні…

Почалося все з того, що потрібен був промо-сайт для iPhone додатки, в основу реалізації лягла ідея про простому і ненавящевом сайті, який повинен мати багато спільного з самим iPhone. Результатом таких міркувань стала сторінка з зображенням телефону, екран якого виконував роль інформаційного табло. Але на цьому я вирішив не зупинятися – хотілося інтерактивності, і більшого подібності “прототипу”, що у мене вийшло – зможете спробувати на домашній сторінці бібліотеки jQuery iPhone UI

Interface

Почну з основного – “створення” iPhone – адже саме з цього і починалася розробка. Нам буде потрібно підключити iphone.css і створити досить просту HTML сторінку (графічні елементи взяті з iPhone GUI PSD 3.0):

iPhone UI
Exit

Результатом буде наступна картинка:

Так само в iphone.css є опис пачки іконок в кількості 100 штук:

Для їх використання необхідно створити елемент з класом iicon і всередині елемент з класом необхідної іконки (префікс в класі іконки необхідний, щоб не було перетинів з іншими елементами):

посилання з іконкою

Ще є заготовочка для кнопок, не знаю наскільки вони будуть корисні, але все ж:

HTML код:

Label
Label
Label
Label
Label

Далі буду розповідати про віджети…

Widgets

Бібліотека на даний момент містить 10 віджетів, і файл jquery.iphone.js, в якому реалізована автоинициализация віджетів з простим алгоритмом:

Якщо говорити про віджети в jQuery – то треба розуміти – що для роботи нам зажадає jQuery-UI, звичайно не повністю, лише core, але не забувайте його підключати:

Тепер перейду безпосередньо до списку віджетів (всі картинки ведуть на відповідні демки).

iMenu

Створюємо меню в стилі стандартного меню опцій iPhone:

HTML Код:

• Description
• Gallery
• Try FREE version
• Buy FULL version$1.99

iMenuManager

Специфічний віджет, його основне завдання – зміна “екранів” використовуючи AJAX, його роботу можете побачити вже на першій сторінці проекту, а так само на промо-сторінці додатка uPackingList. Поки його робота тісно зав’язана на “телефон”, надалі постараюся це виправити.

$(document).ready(function(){
// вешаемся на елемент з класом = screen
$(‘.screen’).iMenuManager({
link : ‘a[href!=#]:not(.external)’, // всередині нього шукаємо всі посилання які ми будемо довантажувати АЈАХом
content: ‘.screen’, // завантажувати будемо тільки те, що знаходиться всередині даного селектора
title : ‘.titlebar’, // усередині даного елемента шукаємо заголовок
back : ‘.titlebar’ // всередину даного елемента запихаємо кнопку назад
});
});

iTabs

Таби з іконками, проста ініціалізація:

$(document).ready(function(){
$(“.tabbar”).iTabs();
});

• Mail
• Chat
• Search
• Options

…
…
…
…

Передбачуваний результат:

iScroll

Вертикальний скролинг, спочатку ідея/код був узятий отсель: Реалізація айФонных UI принад з допомогою jQuery, але при подальшій переробці вийшов цілком повноцінний самостійний продукт:

Для роботи вимагає плагін jQuery Mousewheel, опціонально можна підключити плагін disableTextSelect – і тоді текст не буде виділятися при скроле за допомогою курсору.

HTML Код:

Lorem Ipsum…

iGallery

Галерея картинок, для гортання зображення вам доведеться його “перетягувати”, аналогічно iPhone інтерфейсу:

HTML Код:

Елементи форм

Тут цілий набір віджетів які замінюють звичні нам елементи форм:

• iInput
• iPassword – може використовувати плагін dPassword
• iCheckBox – рекомендую використовувати з плагіном backgroundPosition, для більш плавного перемикання чекбокса
• iRadioButton
• iSelect – вимагає вже згаданий mousewheel плагін

HTML Код:

remember me
forgot me
ABC
DEF
GHI
Option 1
Option 2
Option 3
Option 4

Результат:

TODO

На цьому поки що все, у найближчих планах виконати наступне:

• Зібрати файл все-в-одному – для прискорення завантаження бібліотеки
• Додати підтримку AJAX’a в віджет iTabs і iGallery
• Полікувати дрібні і не дуже баги
• Реалізувати список контактів