Creating A Responsive Phone Dial Pad with jQuery and CSS3 - dialpad
File Size: | 810 KB |
---|---|
Views Total: | 37913 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A clean and responsive virtual phone dial pad (alpha-numeric keypad) built on top of jQuery, Html5 and CSS3.
How to use it:
1. Add the required resources in the html document.
<link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/plugins.js"></script>
2. Create the Html for an virtual dial pad.
<div id="main-wrapper"> <section role="main"> <div class="dialPad compact"> <div class="number"></div> <div class="dials"> <ol> <li class="digits"> <p><strong>1</strong></p> </li> <li class="digits"> <p><strong>2</strong><sup>abc</sup></p> </li> <li class="digits"> <p><strong>3</strong><sup>def</sup></p> </li> <li class="digits"> <p><strong>4</strong><sup>ghi</sup></p> </li> <li class="digits"> <p><strong>5</strong><sup>jkl</sup></p> </li> <li class="digits"> <p><strong>6</strong><sup>mno</sup></p> </li> <li class="digits"> <p><strong>7</strong><sup>pqrs</sup></p> </li> <li class="digits"> <p><strong>8</strong><sup>tuv</sup></p> </li> <li class="digits"> <p><strong>9</strong><sup>wxyz</sup></p> </li> <li class="digits"> <p><strong>*</strong></p> </li> <li class="digits"> <p><strong>0</strong><sup>+</sup></p> </li> <li class="digits"> <p><strong>#</strong></p> </li> <li class="digits"> <p><strong><i class="icon-refresh icon-large"></i></strong> <sup>Clear</sup></p> </li> <li class="digits"> <p><strong><i class="icon-remove-sign icon-large"></i></strong> <sup>Delete</sup></p> </li> <li class="digits pad-action"> <p><strong><i class="icon-phone icon-large"></i></strong> <sup>Call</sup></p> </li> </ol> </div> </div> </section> </div>
3. The main javascript.
$(function(){ var dials = $(".dials ol li"); var index; var number = $(".number"); var total; dials.click(function(){ index = dials.index(this); if(index == 9){ number.append("*"); }else if(index == 10){ number.append("0"); }else if(index == 11){ number.append("#"); }else if(index == 12){ number.empty(); }else if(index == 13){ total = number.text(); total = total.slice(0,-1); number.empty().append(total); }else if(index == 14){ //add any call action here }else{ number.append(index+1); } }); $(document).keydown(function(e){ switch(e.which){ case 96: number.append("0"); break; case 97: number.append("1"); break; case 98: number.append("2"); break; case 99: number.append("3"); break; case 100: number.append("4"); break; case 101: number.append("5"); break; case 102: number.append("6"); break; case 103: number.append("7"); break; case 104: number.append("8"); break; case 105: number.append("9"); break; case 8: total = number.text(); total = total.slice(0,-1); number.empty().append(total); break; case 27: number.empty(); break; case 106: number.append("*"); break; case 35: number.append("#"); break; case 13: $('.pad-action').click(); break; default: return; } e.preventDefault(); }); });
This awesome jQuery plugin is developed by waanit. For more Advanced Usages, please check the demo page or visit the official website.