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>
|