Creating A Responsive Phone Dial Pad with jQuery and CSS3 - dialpad

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.