Антон Шевчук // Web-разработчик

jQuery iPhone UI // JavaScript

jQuery iPhone UI

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

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

Interface

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

<link rel="stylesheet" href=css/iphone.css" type='text/css' media='all' />

<!-- or horizontal -->
<div class="iphone vertical">
    <div class="phone">
        <div class="topbar"></div>
        <div class="screen">
            <div class="titlebar">
                iPhone UI
            </div>
            <div class="scroll">

            </div>
        </div>
    </div>
    <a href="http://iphone.hohli.com" class="bigbutton">Exit</a>
</div>

Результатом будет следующая картинка:
iPhone UI vertical

Так же в iphone.css есть описание для пачки иконок в количестве 100 штук:
iPhone UI icons

Для их использования необходимо создать элемент с классом iicon и внутри элемент <em> с классом необходимой иконки (префикс в классе иконки необходим, дабы не было пересечений с остальными элементами):

&lt;a href=&quot;#&quot; class=&quot;iicon&quot;&gt;&lt;em class=&quot;ii-frame&quot;&gt;&lt;/em&gt;ссылка с иконкой&lt;/a&gt;

Еще есть заготовочка для кнопок, не знаю насколько они будут полезны, но всё же:
iPhone UI Buttons

HTML код:

&lt;a href=&quot;#&quot; title=&quot;Label&quot; class=&quot;button green&quot;&gt;Label&lt;/a&gt;
&lt;a href=&quot;#&quot; title=&quot;Label&quot; class=&quot;button white&quot;&gt;Label&lt;/a&gt;
&lt;a href=&quot;#&quot; title=&quot;Label&quot; class=&quot;button black&quot;&gt;Label&lt;/a&gt;
&lt;a href=&quot;#&quot; title=&quot;Label&quot; class=&quot;button orange&quot;&gt;Label&lt;/a&gt;
&lt;a href=&quot;#&quot; title=&quot;Label&quot; class=&quot;button red&quot;&gt;Label&lt;/a&gt;

Далее буду рассказывать о виджетах…

Widgets

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

  1. Берем список всех реализованных виджетов и проверяем загружены ли они
  2. Пытаемся инициализировать каждый из загруженных плагинов – подразумевая, что элемент нуждающийся в обработке имеет класс соответствующий имени плагина (т.е. плагину iScroll будут скормлены все элементы с классом iscroll)

Если говорить о виджетах в jQuery – то надо понимать – что для работы нам потребует jQuery-UI, конечно не полностью, лишь core, но не забывайте его подключать:

&lt;link rel=&quot;stylesheet&quot; href=&quot;css/iphone.css&quot; type='text/css' media='all' /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-ui.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.iphone.js&quot;&gt;&lt;/script&gt;

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

iMenu

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

HTML Код:

&lt;script type=&quot;text/javascript&quot; src=&quot;js/ui/ui.iMenu.js&quot;&gt;&lt;/script&gt;

&lt;ul class=&quot;imenu&quot;&gt;
	&lt;li&gt;&lt;a href=&quot;upackinglist/description.html&quot; title=&quot;Description&quot; class=&quot;arrow&quot;&gt;Description&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;upackinglist/gallery.html&quot; title=&quot;Gallery&quot; class=&quot;arrow&quot;&gt;Gallery&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;Try FREE version&quot; class=&quot;external&quot;&gt;Try FREE version&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;Buy FULL version&quot; class=&quot;external&quot;&gt;Buy FULL version&lt;span&gt;$1.99&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

iMenuManager

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

&lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function(){
     // вешаемся на элемент с классом = screen
	$('.screen').iMenuManager({
		link   : 'a[href!=#]:not(.external)', // внутри него ищем все ссылки которые мы будем подгружать AJAXом
		content: '.screen',    // загружать будем только то, что находится внутри данного селектора
		title  : '.titlebar',  // внутри данного элемента ищем заголовок
		back   : '.titlebar'   // внутрь данного элемента запихиваем кнопку назад
	});	
    });
&lt;/script&gt;

iTabs

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

&lt;script type=&quot;text/javascript&quot; src=&quot;js/ui/ui.iTabs.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function(){
        $(&quot;.tabbar&quot;).iTabs();
    }); 
&lt;/script&gt;

&lt;ul class=&quot;tabbar&quot;&gt;
    &lt;!-- ссылка указывает на идентификатор таба --&gt;
    &lt;li&gt;&lt;a class=&quot;iicon&quot; href=&quot;#mail&quot; title=&quot;Mail&quot;&gt;&lt;em class=&quot;ii-envelope&quot;&gt;&lt;/em&gt;Mail&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class=&quot;iicon&quot; href=&quot;#chat&quot; title=&quot;Chat&quot;&gt;&lt;em class=&quot;ii-chat2&quot;&gt;&lt;/em&gt;Chat&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class=&quot;iicon&quot; href=&quot;#search&quot; title=&quot;Search&quot;&gt;&lt;em class=&quot;ii-magnify&quot;&gt;&lt;/em&gt;Search&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class=&quot;iicon&quot; href=&quot;#options&quot; title=&quot;Options&quot;&gt;&lt;em class=&quot;ii-gear2&quot;&gt;&lt;/em&gt;Options&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div id=&quot;mail&quot; title=&quot;Mail&quot;&gt;...&lt;/div&gt;
&lt;div id=&quot;chat&quot; title=&quot;Chat&quot;&gt;...&lt;/div&gt;
&lt;div id=&quot;search&quot; title=&quot;Search&quot;&gt;...&lt;/div&gt;
&lt;div id=&quot;options&quot; title=&quot;Options&quot;&gt;...&lt;/div&gt;

Предсказуемый результат:
iTabs Widget

iScroll

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

iScroll Widget

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

HTML Код:

&lt;script type=&quot;text/javascript&quot; src=&quot;js/other/jquery.disable.text.select.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/other/jquery.mousewheel.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/ui/ui.iScroll.js&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;iscroll&quot; style=&quot;height:200px;&quot;&gt;
Lorem Ipsum...
&lt;/div&gt;

iGallery

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

iGallery Widget

HTML Код:

&lt;script type=&quot;text/javascript&quot; src=&quot;js/ui/ui.iGallery.js&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;igallery&quot; style=&quot;width:320px;height:480px&quot;&gt;
    &lt;img src=&quot;images/home.jpg&quot; alt=&quot;Home Screen&quot;/&gt;
    &lt;img src=&quot;images/list.jpg&quot; alt=&quot;&quot;/&gt;
    &lt;img src=&quot;images/list_edit.jpg&quot; alt=&quot;&quot;/&gt;
&lt;/div&gt;

Элементы форм

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

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

HTML Код:

&lt;script type=&quot;text/javascript&quot; src=&quot;js/ui/ui.iInput.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/ui/ui.iPassword.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/ui/ui.iCheckBox.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/ui/ui.iRadioButton.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/ui/ui.iSelect.js&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot; src=&quot;js/other/jquery.dPassword.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/other/jquery.backgroundPosition.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/other/jquery.mousewheel.js&quot;&gt;&lt;/script&gt;

&lt;input class=&quot;iinput&quot; type=&quot;text&quot; id=&quot;login&quot; name=&quot;login&quot; value=&quot;&quot;/&gt;
&lt;input class=&quot;ipassword&quot; type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot;/&gt;

&lt;input class=&quot;icheckbox&quot; type=&quot;checkbox&quot; id=&quot;remember&quot; name=&quot;remember&quot; value=&quot;1&quot;/&gt; &lt;label for=&quot;remember&quot;&gt;remember me&lt;/label&gt;

&lt;input class=&quot;icheckbox&quot; type=&quot;checkbox&quot; id=&quot;noremember&quot; name=&quot;noremember&quot; value=&quot;1&quot; checked=&quot;checked&quot;/&gt; &lt;label for=&quot;noremember&quot;&gt;forgot me&lt;/label&gt;

&lt;input class=&quot;iradiobutton&quot; type=&quot;radio&quot; name=&quot;type&quot; id=&quot;type_abc&quot; value=&quot;ABC&quot; checked=&quot;checked&quot; /&gt; &lt;label for=&quot;type_abc&quot;&gt;ABC&lt;/label&gt;
&lt;input class=&quot;iradiobutton&quot; type=&quot;radio&quot; name=&quot;type&quot; id=&quot;type_def&quot; value=&quot;DEF&quot; /&gt; &lt;label for=&quot;type_def&quot;&gt;DEF&lt;/label&gt;
&lt;input class=&quot;iradiobutton&quot; type=&quot;radio&quot; name=&quot;type&quot; id=&quot;type_ghi&quot; value=&quot;GHI&quot; /&gt; &lt;label for=&quot;type_ghi&quot;&gt;GHI&lt;/label&gt;

&lt;select class=&quot;iselect&quot; name=&quot;options&quot; style=&quot;width:100%&quot;&gt;
    &lt;option&gt;Option 1&lt;/option&gt;
    &lt;option selected=&quot;selected&quot;&gt;Option 2&lt;/option&gt;
    &lt;option&gt;Option 3&lt;/option&gt;
    &lt;option&gt;Option 4&lt;/option&gt;
&lt;/select&gt;

Результат:
Form Elements WidgetsiSelect Widget

TODO

На этом пока всё, в ближайших планах выполнить следующее:

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

© Антон Шевчук 2007-2014