Showcasing jQuery List with a fake iPhone

Download jQuery List View Demo

The inspiration for our jQuery List comes from Apple's iOS and its nice display of a persistent header and index navigation in lists - what Apple calls a UITableView.

Table views are versatile user interface objects frequently found in iOS apps. A table view presents data in a scrollable list of multiple rows that may be divided into sections.iOS Developer Library, About Table Views in iOS Apps

The problem we sometimes face is having a small amount of screen real-estate and a large amount of data to display. Thankfully Apple really nailed the UI (user interface) of the Table View and we have replicated two key features within our jQuery List Plugin:

  1. Permanent header situated at the top of the list to indicate the current section
  2. Clickable table index to quickly jump to the related section of the list (A to Z index)
jQuery List

To really show off our plugin and pay homage to Apple, we have created (with the help of some friends) the UITableView of the web world.


Live iPhone Demo

Check out a live demo of our jQuery List plugin using the iPhone 4 below. Take note of the header as you scroll the list and click the A to Z index for quick navigation.

This demo uses the latest web technologies. If it doesn't look anything like an iPhone, you should download a decent browser.

Real World Examples

We've used the jQuery List plugin in a few projects but we're interested in how you use it. Send us a screenshot of your implementation with a small description and we will showcase your example below.

Streamtimer - Timesheet Widget for Streamtime

Streamtimer is a simple desktop tool, built with Adobe AIR using HTML, CSS & javascript. It lists tasks assigned to you, grouped by day. Displaying the day info in a header which sticks to the top of the panel is critical, as the number of tasks per day can vary from one or two to a dozen or so.



Check out our other Open Source Plugins and Add-ons.

iPhone is a registered trademark of Apple.
iOS is a registered trademark of Cisco.

Download jQuery List View Demo

Write a response...