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

时间:2023-02-14 14:19:25

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