使用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 class="bar bar-nav">\ <button class="button button-link pull-right close-picker">確定</button>\ <h1 class="title">請選擇性別</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