jquery mobile 数字键盘类似计算器的布局采用Grid实现



jquery mobile 数字键盘类似计算器的布局采用Grid实现,3列N行,jquery mobile1.45

如图:

jquery mobile 数字键盘类似计算器的布局采用Grid实现_第1张图片


    
短信模板:
位置分类:


后来发现一个这个

http://book.51cto.com/art/201409/451893.htm

jquery mobile 数字键盘类似计算器的布局采用Grid实现_第2张图片

  1. 01  >       
  2. 02  <html>       
  3. 03  <head>       
  4. 04  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. 05  <meta name="viewport" content="width=device-width, initial-scale=1">       
  6. 06  <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.  
  7. mobile.min.css" />       
  8. 07  <script src="http://code.jquery.com/jquery-1.7.1.min.js">script>       
  9. 08  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js">script>      
  10. 09  head>                 
  11. 10  <body> 
  12. 11      <div data-role="page" data-theme="a"> 
  13. 12          <div data-role="header"> 
  14. 13              <h1>简单的QWER键盘h1> 
  15. 14          div> 
  16. 15          <div data-role="content"> 
  17. 16               
  18. 17              <a href="#" data-role="button" data-inline="true">~a> 
  19. 18               
  20. 19              <a href="#" data-role="button" data-inline="true">0a> 
  21. 20              <a href="#" data-role="button" data-inline="true">-a> 
  22. 21              <a href="#" data-role="button" data-inline="true">+a> 
  23. 22              <a href="#" data-role="button" data-inline="true">Dela> 
  24. 23              <br/> 
  25. 24              <a href="#" data-role="button" data-inline="true">Taba> 
  26. 25               
  27. 26              <a href="#" data-role="button" data-inline="true">\a> 
  28. 27              <br/> 
  29. 28              <a href="#" data-role="button" data-inline="true">Caps Locka> 
  30. 29               
  31. 30              <a href="#" data-role="button" data-inline="true">;a> 
  32. 31              <a href="#" data-role="button" data-inline="true">'a> 
  33. 32              <a href="#" data-role="button" data-inline="true">Entera> 
  34. 33              <br/> 
  35. 34              <a href="#" data-role="button" data-inline="true" data-icon=  
  36. "arrow-u" style="width:130px;"> 
  37. 35                    Shift  
  38. 36              a> 
  39. 37               
  40. 38              <a href="#" data-role="button" data-inline="true"><a> 
  41. 39              <a href="#" data-role="button" data-inline="true">>a> 
  42. 40              <a href="#" data-role="button" data-inline="true">/a> 
  43. 41               
  44. 42              <a href="#" data-role="button" data-inline="true" data-icon="arrow-u" style="width:130px;"> 
  45. 43                  Shift  
  46. 44              a> 
  47. 45              <br/> 
  48. 46               
  49. 47              <a href="#" data-role="button" data-inline="true" style=  
  50. "width:130px;">Ctrla> 
  51. 48              <a href="#" data-role="button" data-inline="true">Fna> 
  52. 49              <a href="#" data-role="button" data-inline="true">Wina> 
  53. 50              <a href="#" data-role="button" data-inline="true">Alta> 
  54. 51               
  55. 52              <a href="#" data-role="button" data-inline="true" style=  
  56. "width:300px;">Spacea> 
  57. 53              <a href="#" data-role="button" data-inline="true">Alta> 
  58. 54              <a href="#" data-role="button" data-inline="true">Ctrla> 
  59. 55              <a href="#" data-role="button" data-inline="true">PrntScra> 
  60. 56          div> 
  61. 57      div> 
  62. 58  body> 
  63. 59  html> 


你可能感兴趣的:(jquery mobile 数字键盘类似计算器的布局采用Grid实现)