jQuery iPhone UI

For probably a month already, I have been bragging to my colleagues for writing some widgets under jQuery-UI, but I couldn’t have done the last step to a finished and useful product, until today ...


It all started with the fact that it took a promotional website for the iPhone application, the implementation was based on the idea of ​​a simple and unobtrusive website that should have a lot in common with the iPhone itself. The result of such reasoning was the page with the image of the phone, the screen of which served as an information board. But I decided not to stop at that - I wanted interactivity, and a greater resemblance to the “prototype”, which I did - you can try on the jQuery iPhone UI library home page.
')

Most recently, the jQTouch library was announced at Habré , which is designed to develop web-based interfaces for mobile devices. The jQuery iPhone UI library is designed for desktop browsers and simulates the iPhone interface.

Interface

I will start with the main thing - the “creation” of the iPhone — after all, this is exactly where the development began. We need to connect iphone.css and create a fairly simple HTML page (graphic elements are from 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 >

The result will be the following image:


Also in iphone.css there is a description for a pack of icons in the amount of 100 pieces :


To use them, you must create an element with the iicon class and inside the <em> element with the class of the required icon (the prefix in the icon class is necessary so that there are no intersections with the other elements):

<a href = "#" class = "iicon"> < em class = "ii-frame" > < / em > link with icon < / a >

There is also a blank for the buttons, I don’t know how useful they will be, but still:


HTML code:

<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 >

Next, I will talk about widgets ...

Widgets

The library currently contains 10 widgets, and the jquery.iphone.js file, which implements the auto-initialization of widgets with a simple algorithm:

1. We take a list of all implemented widgets and check whether they are loaded
2. We are trying to initialize each of the loaded plugins - meaning that the element that needs to be processed has a class corresponding to the name of the plugin (i.e., the iScroll plugin will feed all the elements with the iscroll class)

If we talk about widgets in jQuery, then we need to understand that to work we will need jQuery-UI, of course, not completely, only the core, but do not forget to connect it:

< 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 >

Now I’ll go directly to the list of widgets (all images lead to the corresponding demos).

iMenu

Create a menu in the style of the standard options menu on the iPhone:


HTML Code:

< 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

A specific widget, its main task is to change the “screens” using AJAX, you can see its work on the first page of the project, as well as on the promo page of the uPackingList application. While his work is closely tied to the "phone", in the future I will try to fix it.

// hang on the element with the class = screen
$ ( '.screen' ) . iMenuManager ( {
link : 'a [href! = #]: not (.external)' , // inside it we are looking for all the links that we will load with AJAX
content : '.screen' , // we will load only what is inside this selector
title : '.titlebar' , // inside this element we are looking for a title
back : '.titlebar' // inside this element we push the button back
} ) ;

iTabs

Tabs with icons, simple initialization:

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

< ul class = "tabbar" >
<! - link indicates tab identifier ->
< 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 >

Predictable result:

iScroll

Vertical scrolling, initially the idea / code was taken from the following: Realization of iPhone UI charms using jQuery , but with further processing it turned out to be a completely full-fledged and independent product:



To work requires the plugin jQuery Mousewheel , optionally you can connect the disableTextSelect plugin - and then the text will not stand out when scrolling with the cursor.

HTML Code:

< 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

Gallery of pictures, to scroll through the image, you will have to drag it, similar to the iPhone interface:



HTML Code:

< 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 >

Form elements

There is a whole set of widgets that replace the usual form elements:

• iInput
• iPassword - can use the dPassword plugin
• iCheckBox - I recommend using it with backgroundPosition plugin for smoother switching of checkboxes
• iRadioButton
• iSelect - requires the already mentioned mousewheel plugin

HTML Code:

< 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 >

Result:

PS

I hope this library is useful for you if you notice bugs - write reports , if you do not have a Google account - write in the comments ...

My blog's RSS is available at http://anton.shevchuk.name/feed/ , and twitter here is http://twitter.com/AntonShevchuk