你的位置:首页 > Java教程

[Java教程]使用sui实现的选择控件【性别、日期、省市级联】


使用sui mobile做的选择控件,其中sm.js有修改,增加自定义api,详情请看index.html的注释,不多说了,上代码

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  <meta name="apple-mobile-web-app-capable" content="no">  <meta http-equiv="pragma" content="no-cache">  <meta http-equiv="cache-control" content="no-cache">  <meta http-equiv="expires" content="0">  <title>sui mobile</title>  <link rel="stylesheet" href="sui/sm.css" /></head><body>  <div class="page">    <input type="text" class="J-choose-sex" value="男" placeholder="请选择性别" />    <input type="text" class="J-choose-birth" value="" placeholder="请选择出生日期" />    <input type="text" class="J-choose-address" value="" placeholder="请选择所在地" />  </div>    <script type="text/javascript" src="sui/zepto.js"></script>  <script type="text/javascript" src="sui/sm.js"></script>  <script type="text/javascript" src="sui/sm-city-picker.js"></script>  <script type="text/javascript">      /**     * 因为Zepto和jQuery框架的$冲突,又不想清掉jQuery的重置,所以改用Zepto调用     * 其中sm.js有修改     * 其中的dataPicker在官方文件中不存在,是自己加的     */    Zepto(function () {          'use strict';            var _$ = Zepto;      _$(".J-choose-address").cityPicker({        value: ['四川', '内江', '东兴区']      });            _$(".J-choose-sex").picker({        toolbarTemplate: '<header >\       <button >确定</button>\       <h1 >请选择性别</h1>\       </header>',        cols: [          {            textAlign: 'center',            values: ['男', '女']          }        ]      });            _$(".J-choose-birth").datePicker({        value: ["2000", "01", "01"]      });      Zepto.init();    });  </script></body></html>

 

Code

引用文件及demo:http://pan.baidu.com/s/1i5tuuzz