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);}});

mobiscroll相关推荐

移动端省际联动插件mobiscroll
移动端省际联动插件mobiscroll <link href="assets/css/mobiscroll.custom-2.17.0.min.css" rel=" ...
关于mobiscroll插件的使用
在网上找了很多资料,各大猿友对这个插件都做了很详细的介绍,我也是看了很多资料才发现原来这个插件有一些需要注意的地方,在这总结了一下: //时间 var currYear = (new Date()). ...
JQ插件 jquery mobiscroll
参数: theme是指主题 display:bottom 是指弹出框的位置,分别可以使用top,bottom,inline来定义,这里解释一下inline的用法:inline的话就可以实现页面一加载就 ...
Mobiscroll的介绍【一款兼容PC和移动设备的滑动插件】
Mobiscroll是一个用于触摸设备的日期和时间选择器,它的使用不会改变HTML5.PhoneGap以及混合应用的原生用户体验.作为一款jQuery滑动选择插件,用户可以自定义主题样式,为自己的移动 ...
推荐一款移动端的web UI控件 -- mobiscroll
用mobiscroll 可实现ios系统自带的选择器控件效果,支持几乎所有的移动平台(iOS, Android, BlackBerry, Windows Phone 8, Amazon Kindle) ...
手机日期插件jquery mobiscroll 实例
net视图引擎可直接渲染mobiscroll控件 @using (Html.BeginForm()) { @Html.LabelFor(m => m.Name) @Html.TextBoxFor ...
用mobiscroll.js的treelist实现弹出下拉效果
首先跟上次说的一样, 第一步:引入js.css样式 1)mobiscroll-2.13.2.full.min.css 2)jquery.min.js 3)mobiscroll-2.13.2.full. ...
移动端日期控件 mobiscroll
Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.可以让用户很方便的只需要滑动数字既可以选择 ...
日历插件（项目总结）（包括mobiscroll.js LCalendar 和Calendar这三个日历插件）
日历插件的总结,由于在项目中经常用到日历,所以需要总结一下日历插件的用法日历初始化 var date = new Date(); var today = dateUtil.dateFormat(da ...
jquery mobile mobiscroll 日期插件使用mobiscroll
jquery mobile mobiscroll 日期插件使用mobiscroll 官网网站: http://www.mobiscroll.com/ http://code.google.com/p ...

mobiscroll

城市选择

引入css

引入js

时间选择

引入css

引入js

html

js

mobiscroll相关推荐

最新文章

热门文章