- 1. Create iPhone Style Password Fields using jQuery
- 2. iToggle for jQuery
- 3. SpinTheWheel jQuery iPhone Spin Wheel Effect Plugin
- 4. Create iPhone-style buttons with the iButton jQuery Plug-in
- 5. An iPhone Scrolling Plugin for jQuery
- 6. iPhone Click Effect Using MooTools or jQuery
- 7. jQuery Iphone Style Ajax Switch
- 8. jQuery iPhone UI
- 9. Create the iPhone Springboard in XHTML, CSS and jQuery
- 10. Creating the iPhone Contacts App with CSS and jQuery
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.
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.
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
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.
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.
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.
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.
8. jQuery iPhone UI
This is JavaScript library for prototype iPhone interface on web pages.
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.
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”.
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.