10 jQuery iPhone Style Plugins

Share this article

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

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

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

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

jQuery
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week