mobiscroll

官网：https://www.mobiscroll.com/ 文档：https://docs.mobiscroll.com/

城市选择

引入css

<link href="css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" /> <link href="css/mobiscroll.scroller.sense-ui.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/mobiscroll.scroller.android-ics.css"/> <link rel="stylesheet" href="css/mobiscroll.animation.css"/>

引入js

selarea.js为城市数组存储的js文件

<script src="./js/jquery.min.js" type="text/javascript"></script> <script src="js/mobiscroll.core.js" type="text/javascript"></script> <script src="js/mobiscroll.scroller.js" type="text/javascript"></script> <script src="js/mobiscroll.list.js" type="text/javascript"></script> <script src="js/mobiscroll.select.js" type="text/javascript"></script> <script src="js/mobiscroll.scroller.android.js" type="text/javascript"></script> <script src="js/mobiscroll.i18n.zh.js" type="text/javascript"></script> <script src="../selarea/js/selarea.js" type="text/javascript"></script>

html格式

<div class="demo-wrapper demo-treelist"> <ul id="cityList" style="display:none"> <li data-val="Eastern Division">East <ul> <li data-val="Eden E">Eden E</li> <li data-val="Milda J">Milda J</li> <li data-val="Porfirio R">Porfirio R</li> <li data-val="Frances P">Frances P</li> <li data-val="Frank D">Frank D</li> <li data-val="Gianny P">Gianny P</li> <li data-val="Ivan F">Ivan F</li> <li data-val="John M">John M</li> <li data-val="Mildred S">Mildred S</li> <li data-val="Sam P">Sam P</li> </ul> </li> <li data-val="Western Division">West <ul> <li data-val="Cliff B">Cliff B</li> <li data-val="Helen D">Helen D</li> <li data-val="Stephan V">Stephan V</li> <li data-val="Andy G">Andy G</li> <li data-val="Danny A">Danny A</li> <li data-val="Ennio M">Ennio M</li> <li data-val="Emil E">Emil E</li> <li data-val="Frank S">Frank S</li> <li data-val="Gonzo G">Gonzo G</li> <li data-val="Hal A">Hal A</li> <li data-val="Jack G">Jack G</li> <li data-val="John A">John A</li> <li data-val="Simon D">Simon D</li> <li data-val="Victor S">Victor S</li> </ul> </li> </ul> </div> <button id="show72">show</button>

js代码

$('#show72').click(function () { $('#cityList').mobiscroll('show'); return false; }); $('#cityList').mobiscroll().treelist({ theme: 'ios', lang: 'zh', display: 'bottom', width: [266, 116], placeholder: 'Please Select ...', labels: ['省份', '城市'], headerText: function (valueText) { //自定义弹出框头部格式 return "选择城市"; }, onSelect: function (valueText, inst) { console.log(valueText); } });

如果使用城市数组.js，使用所有的城市，可以循环数组，将数据组织成#cityList 里相同的格式，然后放入其中即可。

selarea.js 中可以通过objZhArea获得城市数组，area0是省份，area1是城市，area2是地区

$(function(){ var shtml = []; for (var p in objZhArea.area0) { shtml.push('<li data-val="' + objZhArea.area0[p] + '">' + objZhArea.area0[p]); shtml.push("<ul>"); for(var c in objZhArea.area1[p]){ var sign = objZhArea.area1[p][c][1]; shtml.push('<li data-val="' + objZhArea.area1[p][c][0] + '">' + objZhArea.area1[p][c][0]); //如果是三级城市选择可以加上该部分代码 // shtml.push("<ul>"); // //for(var d in objZhArea.area2[sign]){ //shtml.push('<li data-val="' + objZhArea.area2[sign][d][1] + '">' + objZhArea.area2[sign][d][0] + '</li>'); //} shtml.push('</li>'); } shtml.push("</ul></li>"); $('#cityList').html(shtml.join('')); } });

时间选择

引入css

<link href="css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" /> <link href="css/mobiscroll.scroller.android.css" rel="stylesheet" type="text/css" /> <link href="css/mobiscroll.scroller.android-ics.css" rel="stylesheet" type="text/css" /> <link href="css/mobiscroll.scroller.ios.css" rel="stylesheet" type="text/css" /> <link href="css/mobiscroll.scroller.sense-ui.css" rel="stylesheet" type="text/css" /> <link href="css/mobiscroll.scroller.wp.css" rel="stylesheet" type="text/css" /> <link href="css/mobiscroll.animation.css" rel="stylesheet" type="text/css" />

引入js

<script src="./js/jquery.min.js" type="text/javascript"></script> <script src="js/mobiscroll.core.js" type="text/javascript"></script> <script src="js/mobiscroll.scroller.js" type="text/javascript"></script> <script src="js/mobiscroll.datetime.js" type="text/javascript"></script> <script src="js/mobiscroll.select.js" type="text/javascript"></script> <script src="js/mobiscroll.scroller.ios.js" type="text/javascript"></script> <script src="js/mobiscroll.scroller.android.js" type="text/javascript"></script> <script src="js/mobiscroll.scroller.android-ics.js" type="text/javascript"></script> <script src="js/mobiscroll.scroller.wp.js" type="text/javascript"></script> <script src="js/mobiscroll.i18n.zh.js" type="text/javascript"></script>

html

<input name="test" id="txttest" class="demo-test-date demo-test-datetime demo-test-time demo-test-credit" />

js

$("#txttest").mobiscroll().date({ theme: "android-ics", lang: "zh", display: 'bottom', dateFormat: 'yy-mm-dd', //返回结果格式化为年月格式 headerText: function (valueText) { //自定义弹出框头部格式 array = valueText.split('-'); return array[0] + "年" + array[1] + "月" + array[2] + "日"; }, onSelect: function (valueText, inst) { $("#txttest").val(valueText); } });