Today we are going to create an iOS-like home screen using CoffeeScript – a new JavaScript based language, and the jQuery library. CoffeScript has a clean syntax that lies 
somewhere in between Ruby and Python. If you haven’t used any of them, don’t worry – it is not required. However you will need to be familiar with JavaScript so you can better understand the concepts behind the language.
We are also going to use the Touchable plugin, so we can listen for touch-based events.
Implementing in your web application is pretty simple.
Here goes the steps to implement.
Step1 :
Adding required library
|
1 2 3 |
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script src="assets/js/touchable.js"></script> <script src="assets/js/coffee-script.js"></script> |
Step2 :
Include CoffeeScript as added in the download files (links mentioned below)
Step3:
HTML Markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<section id="homeScreen"> <div id="mask"> <div id="allScreens"> <!-- The .screen divs will go here --> </div> </div> <ul id="indicators"> <!-- A LI element for every screen --> </ul> <div id="dock"> <!-- The three dock icons will go here --> </div> </section> |
Requirement : – jQuery and CoffeeScript
Demo :- http://demo.tutorialzine.com/2011/10/ios-homescreen-coffeescript/
Download :- http://mydons.com/download/75b5411e5c83ea7e9a8f9f80d0746f21/ios-homescreen.zip
License :- License Free
0 Comments Leave a comment