| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 | <!doctype html><html><head><meta charset="utf-8"><title></title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">  <link rel="stylesheet" href="../style/weui.css"/>  <link rel="stylesheet" href="../style/weui2.css"/>  <link rel="stylesheet" href="../style/weui3.css"/>      <script src="../zepto.min.js"></script><script src="../picker.js"></script><script src="../picker-city.js"></script>      <script>  $(function(){    $("#text2").picker({        title: "你喜欢的国家",        toolbarCloseText:'确定',        cols: [          {            textAlign: 'center',            values: [1,2,3],            displayValues:['新西兰','美国','日本'],          }        ]      });      $("#text1").picker({        title: "他们都喜欢什么",        cols: [          {            textAlign: 'center',            values: ['刘备', '关羽','张飞']          },          {            textAlign: 'center',            values: ['喜欢', '憎恶', '基情', '可怜']          },           {            textAlign: 'center',            values: ['吃西瓜', '吃盒饭', '喝酒']          }        ]      });              $("#date").datetimePicker({title:"选择日期",m:1});$("#time").datetimePicker({title:"选择日期时间",min:'2015-12-10',max:'2050-10-01'});$("#time2").picker({title:"选择时间",        cols: [          {            textAlign: 'center',            values: (function () {                var arr = [];                for (var i = 0; i <= 23; i++) { arr.push(i < 10 ? '0' + i : i); }                return arr;            })()                      },          {            textAlign: 'center',            values:  (function () {                var arr = [];                for (var i = 0; i <= 59; i++) { arr.push(i < 10 ? '0' + i : i); }                return arr;            })(),          }        ]});          $("#ssx").cityPicker({        title: "选择省市县"      }); $("#ss").cityPicker({        title: "选择省市",        showDistrict: false      });                           	  	  });                     </script></head><body ontouchstart style="background-color: #f8f8f8;"><div class="page-hd">        <h1 class="page-hd-title">            picker为基础的弹出框        </h1>        <p class="page-hd-desc">使用picker,需加载picker.js,使用省市县还需要加载picker-city.js</p>    </div><form id="form"><div class="weui_cells weui_cells_form ">                      <div class="weui_cell">                <div class="weui_cell_hd"><label for="" class="weui_label">多列:</label></div>                <div class="weui_cell_bd weui_cell_primary">                    <input class="weui_input" type="text" value="" id='text1'/>                  </div>                          </div>           <div class="weui_cell">                <div class="weui_cell_hd"><label for="" class="weui_label">单列:</label></div>                <div class="weui_cell_bd weui_cell_primary">                    <input class="weui_input" type="text" value="" id='text2'/>                                    </div>                          </div>                   <div class="weui_cell">                <div class="weui_cell_hd"><label for="" class="weui_label">日期:</label></div>                <div class="weui_cell_bd weui_cell_primary">                    <input class="weui_input" type="text" value="2016-12-10" id='date'/>                                    </div>                          </div>             <div class="weui_cell">                <div class="weui_cell_hd"><label for="" class="weui_label">时间:</label></div>                <div class="weui_cell_bd weui_cell_primary">                    <input class="weui_input" type="text" value="" id='time'/>                                     </div>                          </div>                            <div class="weui_cell">                <div class="weui_cell_hd"><label for="" class="weui_label">时间2:</label></div>                <div class="weui_cell_bd weui_cell_primary">                    <input class="weui_input" type="text" value="09 12" id='time2'/>                                    </div>                          </div>                          <div class="weui_cell">                <div class="weui_cell_hd"><label for="" class="weui_label">省市县:</label></div>                <div class="weui_cell_bd weui_cell_primary">                    <input class="weui_input" type="text" value="" id='ssx'/>                                    </div>                          </div>                                    <div class="weui_cell">                <div class="weui_cell_hd"><label for="" class="weui_label">省市:</label></div>                <div class="weui_cell_bd weui_cell_primary">                    <input class="weui_input" type="text" value="" id='ss'/>                                    </div>                          </div>                  </div>   <div class="weui_btn_area">        <a id="reset" href="javascript:" class="weui_btn weui_btn_primary" onclick="document.getElementById('form').reset();">重置</a>    </div> </form> </body></html>
 |