10 jQuery iPhone Style Plugins

Sam Deering
Unleash the power of jQuery on iPhone and create impressive iPhone style cool effects and widgets with these jQuery plugins. You might also want to compare these to: 10 Android Style jQuery Plugins.


1. Create iPhone Style Password Fields using jQuery


Apple has implemented an alternative method on iPhone/iPod Touch: where the passwords get masked while typing but the last character in row is shown in plain text. So now lets us learn how to create such cool iPhone style password fields using jQuery.
Create-iPhone-Style-Password-Fields-using-jQuery.jpg
Source


2. iToggle for jQuery


A completely unashamed rip of those lovely sliding on/off buttons on the iPhone, making checkboxes (and radio buttons) look good! For a little challenge the other day we decided to see how closely we could re-create the iPhone’s toggle switches on the web.
iToggle-for-jQuery.jpg
Source


3. SpinTheWheel jQuery iPhone Spin Wheel Effect Plugin


It’s designed to create an intuitive way of selecting a value in a defined span. Use where you want total control of the value the user can pick but where a standard slider won’t do the trick due to a too big span
SpinTheWheel-jQuery-iPhone-Spin-Wheel-Effect-Plugin.jpg
Source


4. Create iPhone-style buttons with the iButton jQuery Plug-in


This plug-in allows you to generate iPhone-style buttons from checkbox and radio elements.
Create-iPhone-style-buttons-with-the-iButton-jQuery-Plug-in.jpg
Source


5. An iPhone Scrolling Plugin for jQuery


Ever want to replicate the iPhone scrolling experience in your browser? Well I thought it would be a novel idea so I whipped together a small jQuery plug-in that turns any overflowed block element into a scrollable pane.
An-iPhone-Scrolling-Plugin-for-jQuery.jpg
Source


6. iPhone Click Effect Using MooTools or jQuery


Safari on iPhone provides a darkened background effect when you click a link. It is the most subtle of details but just enforces than an action is taking place. So why not implement that on any page? We can easily do so using MooTools or jQuery.
iPhone-Click-Effect-Using-MooTools-or-jQuery.jpg
Source


7. jQuery Iphone Style Ajax Switch


In this tutorial I will purely be looking at making a simple AJAX request using the functionality of the iPhone buttons to trigger a script to return a string based on whether the switch is on or off. You need to include the jquery.iphone-switch.js file along with jQuery which is in the download.
jQuery-Iphone-Style-Ajax-Switch.jpg
Source


8. jQuery iPhone UI


This is JavaScript library for prototype iPhone interface on web pages.
jQuery-iPhone-UI.jpg
Source


9. Create the iPhone Springboard in XHTML, CSS and jQuery


With this jQuery tutorial; I will enlighten you on how to create the iPhone Springboard in xHTML, CSS and jQuery.
Create-the-iPhone-Springboard-in-XHTML-CSS-and-jQuery.jpg
Source


10. Creating the iPhone Contacts App with CSS and jQuery


The design of the Contacts app will be used and displayed in your browser. Funny fact is that this is the first “iPhone to CSS/jQuery conversion”.
Creating-the-iPhone-Contacts-App-with-CSS-and-jQuery.jpg
Source

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.yourkeepers.com Jerry

    How are you ?jquery4uI I came across your website on Msn the other day and I am genuinely excited that I did!
    I really like your publishing style and facts that you present.
    I will bookmark your site for future reference!
    Thanks jQuery4u, a great blog post!

    • jquery4u

      @Jerry – Thanks man!

  • Pingback: 10 Android Style jQuery Plugins | jQuery4u

  • Pingback: 10 Awesome jQuery Mobile Plugins | jQuery4u

  • http://blog.biernacki.ca Jakub

    Any thoughts on which “iButton” we should stick to? There are quite a few and all seem to look and function the same, have you actually reviewed the pros/cons to them?

    Just curious.

  • http://teamdf.com Sam

    Great list, thanks! If you like iPhone style plugins check out this one, which implements the fixed headings when scrolling a list like in the iOS contacts app: jQuery Fixed List Headings Plugin.