Wednesday, March 19th, 2008

CiUI: CNET iPhone UI

Category: iPhone, JavaScript, UI

Vladimir Olexa of CNET has released CiUI a iUI inspired iPhone JavaScript libary that mimics the iPhone UI behavior.

It’s already being used on CNET¹s iPhone page (http://iphone.cnet.com). It’s been greatly inspired by iUI with a few key differences:

  1. AJAX calls are performed after a page slides
  2. DOM doesn’t get overloaded with “pages” as they load. Instead, two DIVs are constantly being reused
  3. Page titles are set on the source page, not on the destination page
  4. Only specified “a” tags are assumed a part of the UI.

To create a sliding load you simply annotate the link (iUI takes over automatically, in contrast):

  1. <a class="go_forward" title="CNET" href="http://www.cnet.com">CNET</a>

Check out the source and an enclosed working example or go to iphone.cnet.com to see it in live action. You can download the library from our download page.

Posted by Dion Almaer at 10:52 am
3 Comments

+++--
3.8 rating from 26 votes

3 Comments »

Comments feed TrackBack URI

I feel this version, like the iUI library has a key failing in the use of animation. Due to the iPhone/iTouch’s poor JavaScript performance the sliding animation looks very jittery.

Imitation is the best form of flattery, but if you can’t get it right, its surely better to leave it out.

Comment by card — March 19, 2008

card: It does look a little sloppy. One can only hope the next version of MobileSafari will have CSS animation ( http://webkit.org/blog/138/css-animation/ )

Comment by coob — March 25, 2008

OK thats good
thanks

Comment by Aphrodisiac — July 31, 2008

Leave a comment

You must be logged in to post a comment.