Уже, наверное, месяц хвастаюсь своим коллегам своими успехами в написании тех или иных виджетов под jQuery-UI, но вот последнего шага к законченому и полезному продукту сделать не получалось, до сегодня…
Началось всё с того, что потребовался промо-сайт для iPhone приложения, в основу реализации легла идея о простом и ненавязчивом сайте, который должен иметь много общего с самим iPhone. Результатом таких рассуждений стала страничка с изображением телефона, экран которого выполнял роль информационного табло. Но на этом я решил не останавливаться — хотелось интерактивности, и большего подобия «прототипу», что у меня получилось — сможете попробовать на домашней странице библиотеки
jQuery iPhone UI
Совсем недавно на хабре был анонс библиотеки jQTouch, которая предназначена для разработки web-интерфейсов для мобильных устройств, бибилотека jQuery iPhone UI предназначена для desktop-браузеров и имитирует интерфейс iPhone
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="iphone.hohli.com" class="bigbutton">Exit</a>
</div>
Результатом будет следующая картинка:
Так же в iphone.css есть описание для
пачки иконок в количестве
100 штук:
Для их использования необходимо создать элемент с классом
iicon и внутри элемент <em> с классом необходимой иконки (префикс в классе иконки необходим, дабы не было пересечений с остальными элементами):
<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, в котором реализована автоинициализация виджетов с простым алгоритмом:
- Берем список всех реализованных виджетов и проверяем загружены ли они
- Пытаемся инициализировать каждый из загруженных плагинов — подразумевая, что элемент нуждающийся в обработке имеет класс соответствующий имени плагина (т.е. плагину 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. Пока его работа тесно завязана на «телефон», в дальнейшем постараюсь это исправить.
// вешаемся на элемент с классом = screen
$(`.screen`).iMenuManager({
link : `a[href!=#]:not(.external)`, // внутри него ищем все ссылки, которые мы будем подгружать AJAXом
content: `.screen`, // загружать будем только то, что находится внутри данного селектора
title : `.titlebar`, // внутри данного элемента ищем заголовок
back : `.titlebar` // внутрь данного элемента запихиваем кнопку назад
});
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>
Результат:
P.S.
Я надеюсь, данная библиотека Вам пригодится, если заметили баги —
пишите репорты, если у вас нет Google аккаунта — пишите в комментариях…
RSS моего блога доступен по адресу http://anton.shevchuk.name/feed/, а твиттер тут http://twitter.com/AntonShevchuk
Распечатать статью