使用JQ，写的一个小小的虚拟键盘。 

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="textml; charset=utf-8">
  5 <title>虚拟键盘</title>
  6 <script type="text/javascript" src="jquery-1.8.2.js"></script>
  7 <style>
  8 *{
  9     margin:0;
 10     padding:0;
 11 }
 12 li {
 13     list-style-type: none;
 14 }
 15 #search {
 16     position: absolute;
 17     top: 0px;
 18     left: 0px;
 19 }
 20 .keyboard {
 21     width: 190px;
 22     border: 1px #e5e5e5 solid;
 23     
 24 }
 25 .uls {
 26     margin-left: 3px;
 27 }
 28 .keyboard_two {
 29     margin-top: 1px;
 30 }
 31 .keyboard_thr {
 32     margin-top: 1px;
 33 }
 34 .keyboard li{
 35     float: left;
 36     width: 44px;
 37     height: 44px;
 38     border: 1px #c2c2c2 solid;
 39     line-height: 44px;
 40     text-align: center;
 41     font-size: 17px;
 42     background: -webkit-linear-gradient(#fff 0%,#d8d8d8 100%);
 43     cursor: pointer;
 44 }
 45 .keyboard .search {
 46     width: 44px;
 47     height: 62px;
 48     padding-top: 25px;
 49     line-height: 20px;
 50 }
 51 .keyboard .zero {
 52     width: 135px;
 53     height: 40px;
 54     position: absolute;
 55     left: 4px;
 56     top: 211px;
 57 }
 58 #search {
 59     position: absolute;bottom: 0px;right: 77px;
 60     height: 32px;
 61     width: 190px;
 62 }
 63 
 64 #search input {
 65     padding-left: 30px;
 66     background: none;
 67     border: none;
 68     height: 32px;
 69     width: 160px;
 70     font-family: Helvetica, Arial, sans-serif;
 71     font-weight: bold;
 72     font-size: 1.1em;
 73     color: #999;
 74 
 75 }
 76 #submit{
 77     position: absolute;bottom: 4px;right: 0px;
 78     height: 33px;
 79     width: 70px;
 80     border: 1px red solid;
 81     position: absolute;
 82     top: 0px;
 83     left: 300px;
 84 }
 85 
 86 #submits {
 87     background: none;
 88     border: none;
 89     height: 34px;
 90     width: 55px;
 91     cursor: pointer;
 92 }
 93 </style>
 94 </head>
 95 <body>
 96 <form id="head">
 97     <div id="search">
 98         <input type="text" placeholder='用户名/手机号' name='number'>
 99         <span class="close"></span>
100         <div class="keyboard">
101             <ul class='keyboard_one uls'>
102                 <li class="num">7</li>
103                 <li class="num">8</li>
104                 <li class="num">9</li>
105                 <li class='cut'>-</li>
106                 <div class="clear">&nbsp;</div>
107             </ul>
108             <ul class='keyboard_two uls'>
109                 <li class="num">4</li>
110                 <li class="num">5</li>
111                 <li class="num">6</li>
112                 <li class='plus'>+</li>
113                 <div class="clear">&nbsp;</div>
114             </ul>
115             <ul class='keyboard_thr uls'>
116                 <li class="num">1</li>
117                 <li class="num">2</li>
118                 <li class="num">3</li>
119                 <li class='search'>搜</br>索</li>
120                 <li class="zero num">0</li>
121             </ul>
122         </div>
123         <div class="clear">&nbsp;</div>
124     </div>
125     <div id="submit">
126         <input id="submits" type="submit" value="dianwo">
127     </div>
128 </form>
129 </body>
130 <script>
131 $(function(){
132     $('.num').on('click',function(){
133         var Num = $('#search input').val();
134         $('#search input').val(Num+$(this).html());
135     });
136     $('.plus').on('click',function(){
137         $('#search input').val(Number($('#search input').val())+1);
138     });
139     $('.cut').on('click',function(){
140         $('#search input').val(Number($('#search input').val())-1);
141     });
142 });
143 
144 
145 
146 </script>
147 </html>
View Code
posted @ 2013-05-23 19:10  Darkdreams  阅读(268)  评论(0)    收藏  举报