如何在HTML按钮中标记ABC并单击事件

Question

我使用HTML和CSS创建了电话拨号盘。这是我的jsfiddle为创建：

http://goo.gl/lP0qdl

我想补充ABC，DEF，GHI ....到准确的数字看起来像一个电话。但我的设计搞乱了所有的用户界面。我怎样才能做到这一点 ？

而当用户点击任何按钮时，例如：2->首先我要再次显示2和A，B，C和2。类似智能手机。

我正在使用JQuery，HTML，CSS。

我该如何做到这一点？

Answer 1

你在寻找类似

<div id="result"></div> 
<table class="dialpad" id="dialPad"> 
    <tbody> 
     <tr> 
      <td> 
       <input type="button" class="button" value="1" data-values='[1]' /> 
      </td> 
      <td> 
       <input type="button" class="button" value="2" data-values='[2, "A", "B", "C"]' /> 
      </td> 
      <td> 
       <input type="button" class="button" value="3" data-values='[3, "D", "E", "F"]' /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="button" class="button" value="4" data-values='[4, "G", "H", "I"]' /> 
      </td> 
      <td> 
       <input type="button" class="button" value="5" data-values='[5, "J", "K", "L"]' /> 
      </td> 
      <td> 
       <input type="button" class="button" value="6" data-values='[6, "M", "N", "O"]' /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="button" class="button" value="7" data-values='[7, "P", "Q", "R", "S"]' /> 
      </td> 
      <td> 
       <input type="button" class="button" value="8" data-values='[8, "T", "U", "V"]' /> 
      </td> 
      <td> 
       <input type="button" class="button" value="9" data-values='[9, "W", "X", "Y", "Z"]' /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="button" class="button" value="*" data-values='["*"' /> 
      </td> 
      <td> 
       <input type="button" class="button" value="0" data-values='[0, " "]' /> 
      </td> 
      <td> 
       <input type="button" class="button" value="#" data-values='["#"]' /> 
      </td> 
     </tr> 
    </tbody> 
</table> 

然后

jQuery(function ($) { 
    var prev, $result = $('#result'), 
     counter = 0, 
     timer; 
    $('#dialPad input').click(function() { 
     var values = $(this).data('values'), 
      result = $result.text(); 
     if (this == prev) { 
      result = result.slice(0, -1); 
      counter = values.length == counter + 1 ? 0 : counter + 1; 
     } else { 
      counter = 0; 
     } 
     $result.text(result + values[counter]); 
     prev = this; 

     //timer to reset 
     clearTimeout(timer) 
     timer = setTimeout(function() { 
      prev = undefined; 
     }, 1000) 
    }) 
}) 

演示：Fiddle