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

  • Беремо список всіх реалізованих віджетів і перевіряємо завантажені вони
  • Намагаємося ініціалізувати кожен з завантажених плагінів – маючи на увазі, що елемент потребує в обробці має відповідний клас імені плагіна (тобто плагіну iScroll будуть згодовані всі елементи з класом iscroll)
  • Якщо говорити про віджети в 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
    • Полікувати дрібні і не дуже баги
    • Реалізувати список контактів