jQuery iPhone UI

<a href="#" class="iicon"><em class="ii-frame"></em>ссылка с иконкой</a>

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

HTML код:

<a href="#" title="Label" class="button green">Label</a>
<a href="#" title="Label" class="button white">Label</a>
<a href="#" title="Label" class="button black">Label</a>
<a href="#" title="Label" class="button orange">Label</a>
<a href="#" title="Label" class="button red">Label</a>

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

Widgets

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

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

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

<link rel="stylesheet" href="css/iphone.css" type='text/css' media='all' />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.iphone.js"></script>

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

iMenu

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

HTML Код:

<script type="text/javascript" src="js/ui/ui.iMenu.js"></script>

<ul class="imenu">
	<li><a href="upackinglist/description.html" title="Description" class="arrow">Description</a></li>
	<li><a href="upackinglist/gallery.html" title="Gallery" class="arrow">Gallery</a></li>
	<li><a href="#" title="Try FREE version" class="external">Try FREE version</a></li>
	<li><a href="#" title="Buy FULL version" class="external">Buy FULL version<span>$1.99</span></a></li>
</ul>

iMenuManager

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

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

iTabs

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

<script type="text/javascript" src="js/ui/ui.iTabs.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".tabbar").iTabs();
    }); 
</script>

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

<div id="mail" title="Mail">...</div>
<div id="chat" title="Chat">...</div>
<div id="search" title="Search">...</div>
<div id="options" title="Options">...</div>

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

iScroll

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

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

HTML Код:

<script type="text/javascript" src="js/other/jquery.disable.text.select.js"></script>
<script type="text/javascript" src="js/other/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/ui/ui.iScroll.js"></script>

<div class="iscroll" style="height:200px;">
Lorem Ipsum...
</div>

iGallery

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

HTML Код:

<script type="text/javascript" src="js/ui/ui.iGallery.js"></script>

<div class="igallery" style="width:320px;height:480px">
    <img src="images/home.jpg" alt="Home Screen"/>
    <img src="images/list.jpg" alt=""/>
    <img src="images/list_edit.jpg" alt=""/>
</div>

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

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

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

HTML Код:

<script type="text/javascript" src="js/ui/ui.iInput.js"></script>
<script type="text/javascript" src="js/ui/ui.iPassword.js"></script>
<script type="text/javascript" src="js/ui/ui.iCheckBox.js"></script>
<script type="text/javascript" src="js/ui/ui.iRadioButton.js"></script>
<script type="text/javascript" src="js/ui/ui.iSelect.js"></script>

<script type="text/javascript" src="js/other/jquery.dPassword.js"></script>
<script type="text/javascript" src="js/other/jquery.backgroundPosition.js"></script>
<script type="text/javascript" src="js/other/jquery.mousewheel.js"></script>

<input class="iinput" type="text" id="login" name="login" value=""/>
<input class="ipassword" type="password" id="password" name="password" value=""/>

<input class="icheckbox" type="checkbox" id="remember" name="remember" value="1"/> <label for="remember">remember me</label>

<input class="icheckbox" type="checkbox" id="noremember" name="noremember" value="1" checked="checked"/> <label for="noremember">forgot me</label>

<input class="iradiobutton" type="radio" name="type" id="type_abc" value="ABC" checked="checked" /> <label for="type_abc">ABC</label>
<input class="iradiobutton" type="radio" name="type" id="type_def" value="DEF" /> <label for="type_def">DEF</label>
<input class="iradiobutton" type="radio" name="type" id="type_ghi" value="GHI" /> <label for="type_ghi">GHI</label>

<select class="iselect" name="options" style="width:100%">
    <option>Option 1</option>
    <option selected="selected">Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

Результат:

TODO

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

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