form4.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7. <link rel="stylesheet" href="../style/weui.css"/>
  8. <link rel="stylesheet" href="../style/weui2.css"/>
  9. <link rel="stylesheet" href="../style/weui3.css"/>
  10. <script src="../zepto.min.js"></script><script src="../picker.js"></script><script src="../picker-city.js"></script>
  11. <script>
  12. $(function(){
  13. $("#text2").picker({
  14. title: "你喜欢的国家",
  15. toolbarCloseText:'确定',
  16. cols: [
  17. {
  18. textAlign: 'center',
  19. values: [1,2,3],
  20. displayValues:['新西兰','美国','日本'],
  21. }
  22. ]
  23. });
  24. $("#text1").picker({
  25. title: "他们都喜欢什么",
  26. cols: [
  27. {
  28. textAlign: 'center',
  29. values: ['刘备', '关羽','张飞']
  30. },
  31. {
  32. textAlign: 'center',
  33. values: ['喜欢', '憎恶', '基情', '可怜']
  34. },
  35. {
  36. textAlign: 'center',
  37. values: ['吃西瓜', '吃盒饭', '喝酒']
  38. }
  39. ]
  40. });
  41. $("#date").datetimePicker({title:"选择日期",m:1});
  42. $("#time").datetimePicker({title:"选择日期时间",min:'2015-12-10',max:'2050-10-01'});
  43. $("#time2").picker({title:"选择时间",
  44. cols: [
  45. {
  46. textAlign: 'center',
  47. values: (function () {
  48. var arr = [];
  49. for (var i = 0; i <= 23; i++) { arr.push(i < 10 ? '0' + i : i); }
  50. return arr;
  51. })()
  52. },
  53. {
  54. textAlign: 'center',
  55. values: (function () {
  56. var arr = [];
  57. for (var i = 0; i <= 59; i++) { arr.push(i < 10 ? '0' + i : i); }
  58. return arr;
  59. })(),
  60. }
  61. ]});
  62. $("#ssx").cityPicker({
  63. title: "选择省市县"
  64. });
  65. $("#ss").cityPicker({
  66. title: "选择省市",
  67. showDistrict: false
  68. });
  69. });
  70. </script>
  71. </head>
  72. <body ontouchstart style="background-color: #f8f8f8;">
  73. <div class="page-hd">
  74. <h1 class="page-hd-title">
  75. picker为基础的弹出框
  76. </h1>
  77. <p class="page-hd-desc">使用picker,需加载picker.js,使用省市县还需要加载picker-city.js</p>
  78. </div>
  79. <form id="form">
  80. <div class="weui_cells weui_cells_form ">
  81. <div class="weui_cell">
  82. <div class="weui_cell_hd"><label for="" class="weui_label">多列:</label></div>
  83. <div class="weui_cell_bd weui_cell_primary">
  84. <input class="weui_input" type="text" value="" id='text1'/>
  85. </div>
  86. </div>
  87. <div class="weui_cell">
  88. <div class="weui_cell_hd"><label for="" class="weui_label">单列:</label></div>
  89. <div class="weui_cell_bd weui_cell_primary">
  90. <input class="weui_input" type="text" value="" id='text2'/>
  91. </div>
  92. </div>
  93. <div class="weui_cell">
  94. <div class="weui_cell_hd"><label for="" class="weui_label">日期:</label></div>
  95. <div class="weui_cell_bd weui_cell_primary">
  96. <input class="weui_input" type="text" value="2016-12-10" id='date'/>
  97. </div>
  98. </div>
  99. <div class="weui_cell">
  100. <div class="weui_cell_hd"><label for="" class="weui_label">时间:</label></div>
  101. <div class="weui_cell_bd weui_cell_primary">
  102. <input class="weui_input" type="text" value="" id='time'/>
  103. </div>
  104. </div>
  105. <div class="weui_cell">
  106. <div class="weui_cell_hd"><label for="" class="weui_label">时间2:</label></div>
  107. <div class="weui_cell_bd weui_cell_primary">
  108. <input class="weui_input" type="text" value="09 12" id='time2'/>
  109. </div>
  110. </div>
  111. <div class="weui_cell">
  112. <div class="weui_cell_hd"><label for="" class="weui_label">省市县:</label></div>
  113. <div class="weui_cell_bd weui_cell_primary">
  114. <input class="weui_input" type="text" value="" id='ssx'/>
  115. </div>
  116. </div>
  117. <div class="weui_cell">
  118. <div class="weui_cell_hd"><label for="" class="weui_label">省市:</label></div>
  119. <div class="weui_cell_bd weui_cell_primary">
  120. <input class="weui_input" type="text" value="" id='ss'/>
  121. </div>
  122. </div>
  123. </div>
  124. <div class="weui_btn_area">
  125. <a id="reset" href="javascript:" class="weui_btn weui_btn_primary" onclick="document.getElementById('form').reset();">重置</a>
  126. </div>
  127. </form>
  128. </body>
  129. </html>