Вже, напевно, місяць хвалюся своїм колегам своїми успіхами у написанні тих чи інших віджетів під 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();
});
- 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
- Полікувати дрібні і не дуже баги
- Реалізувати список контактів