jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

因为做的项目需要，在我网上看到mobiscroll这个插件，然后各种找demo，最后自己研究一下，下面是就我自己项目上用到的进行分析；首先是常用的日期使用：HTML部分：

<li id="birthday">
<div class="mbase-menu-title">生日</div>
<div
class="mbase-menu-txt">未设置</div>
<div class="clear"></div>
</li>

JS部分：

$("#birthday").mobiscroll().date({  //这里是date，还有time，datetime不在本文范围
theme: "android-ics",  //这个是主题，即控制着样式，可根据操作系统不同设置不一样的样式
lang: "zh",  //语言
display: 'bottom',  //弹窗显示底部
dateFormat: 'yy-mm-dd', //返回结果格式化为年月格式
// wheels:[], 设置此属性可以只显示年月，此处演示，就用下面的onBeforeShow方法,另外也可以用treelist去实现
//onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }, //弹掉“日”滚轮
headerText: function (valueText) { //自定义弹出框头部格式
array = valueText.split('-');
return array[0] + "年" + array[1] + "月" + array[2] + "日";
},
onSelect: function (valueText, inst) {
$(this).find(".mbase-menu-txt").html(valueText);
/*$.post("inc/person.org.php", {apart: "resume_base", birthday: valueText}, function (result) {
if (result == 'ok') {
$(this).find(".mbase-menu-txt").html(valueText);
}
else {
error('网络繁忙，请您稍后再试');
}
});*/ 这是后端入库部分
}
});

这个是插件用在日期选择的部分，参数可以查看官网的api,下面的是效果图下面是自定义选项treelist的，可以用在比如选择文本项的时候移动端单项选择文本HTML部分：<li id="sex"><div class="mbase-menu-title">性别</div><div class="mbase-menu-txt">未设置</div><div class="clear"></div></li>

<ul id="sex-list" style="display: none"><li>先生</li><li>女士</li></ul> 

JS部分：$("#sex").click(function () {var that = this;$("#sex-list").mobiscroll().treelist({theme: "android-ics",lang: "zh",display: 'bottom',inputClass: 'tmp',headerText: '请您选择',onSelect: function (valueText) {var m = $(this).find("li").eq(valueText).html();/*$.post("inc/person.org.php", {apart: "resume_base", sex: m}, function (result) {if (result == 'ok') {$(that).find(".mbase-menu-txt").html(m);}else {error('网络繁忙，请您稍后再试');}});*/后端入库部分}});$("input[id^=sex-list]").focus();}); 效果：接下来是我自己的项目中的运用：要实现点击“-- 请选择市区 --”，出现市区的弹窗，可以滑动选择市区在实现这个功能之前，需要下载该插件的CSS和js 。因为在官网下载麻烦，需要注册，所以大家可以去这个博客下载http://blog.csdn.net/enjoy_gw/article/details/52779852HTML代码：<div class="chose" id="chose"><div class="Tit border-bottom border-top"><em>--   请选择市区    --</em><i>▼</i></div></div>

<!--选择市区--><ul id="select-list" style="display: none"><li>杭州市</li><li>宁波市</li><li>温州市</li><li>湖州市</li><li>嘉兴市</li><li>绍兴市</li><li>金华市</li><li>衢州市</li><li>舟山市</li><li>台州市</li><li>丽水市</li></ul> 

CSS：.chose{margin-bottom: 0.20rem;}.Tit{position: relative; height: 0.78rem;line-height: 0.78rem;background: #fff;font-size: 0.30rem; color: #333;text-align: center; cursor: pointer;}.Tit i{position: absolute;top: 0;right: 0.20rem;color: #999;}

.mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }.mbsc-ios7 .dwb{color:#323232;}.mbsc-ios7 .dw-li{text-align: center;}

JS代码：$("#chose").click(function () {var that = this;$("#select-list").mobiscroll().treelist({theme: "ios7",lang: "zh",display: 'bottom',onSelect: function (valueText) {var m = $(this).find("li").eq(valueText).html();$('.chose em').text(m);alert(valueText);

	这里是点击确定之后执行的/*$.post("inc/person.org.php", {apart: "resume_base", sex: m},function (result) {if (result == 'ok') {$(that).find(".mbase-menu-txt").html(m);}else {error('网络繁忙，请您稍后再试');}});*/后端入库部分}});$("input[id^=select-list]").focus();$('#select-list_dummy').hide();});

总结：要想改一些参数什么的，请看官网的api，也可以参考这个博客http://www.cnblogs.com/mingtianct/p/5761914.html笔记： http://note.youdao.com/yws/public/redirect/share?id=95fd7bf95aa4f13bd6ba0f9ed16b6f6b&type=false参数详解：$("#id").mobiscroll().date({//这里是date，还有time，datetime不在本文范围。            theme: theme,//样式，可根据操作系统不同设置不一样的样式            lang: "zh",            cancelText: "取消",            dateFormat: 'yyyy-mm-dd',            onBeforeShow: function (inst) { },            endYear: 2016,//可根据当前年份设置            dayText: '日', monthText: '月', yearText: '年',            headerText: function(valueText) {                 var array = valueText.split('-');                return array[0] + "年" + array[1] + "月" + array[2] + "日";            },            onBeforeShow:function(inst){//展示前的事件        inst.settings.readonly=true;//只读属性       },            onSelect: function (valueText, inst) {//选择时事件（点击确定后），valueText 为选择的时间，                var selectedDate = valueText;            }        });配置里的theme参数，提供多种样式供参考：android android-holoandroid-holo-lightandroid-icsandroid-ics-lightios(窗口底部划出)ios7(窗口底部划出)jqm（感觉类似透明的效果，自己去试试效果）sense-uiwp更多请参考官方网站 https://docs.mobiscroll.com/2-17-2可以一个一个试，找到自己的想要的主题样式。