移动端选择插件mobiscroll的使用demo
一开始是弄个日期选择的插件，网上看到这个mobiscroll这个插件，然后各种下各种找demo，最后自己研究了一天下面把自己项目的demo拔出来分享给大家（以及文件下载），多多海涵，如果大家看了我的这文章有更好的写法还望赐教~
首先是常用的日期使用：
HTML部分：
$("#birthday").mobiscroll().date({
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('网络繁忙，请您稍后再试');
}
});*/ 这是后端入库部分
}
});
下面的是treelist的，这个可用在比如选择文本项的时候，就因为这点我才觉得它真的够强大：
单项选择文本的
HTML部分：
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();
});$("#sex-list").mobiscroll().treelist({..})这因情况而异，后面那段$("input[id^=sex-list]").focus();这里可能会问怎么回事啊，我也不知道怎么回事，只是我发现只要调用mobiscroll().treelist 的元素会自动变成input，然后弹出让你选择，这里我的项目结构为了美观，预算我设置了个inputClass:'tmp'
这个tmp就是样式名，属性就一个透明度为0(input.tmp{
opacity: 0;
}
valueText 这个参数在treelist方法里面是返回当前选择的第几个元素li的值。
HTML部分：
这个列表比较长，结构看明白就好
JS部分：
$("#current-area").click(function () {
var that = this;
$("#current-area-list").mobiscroll().treelist({
theme: "android-ics",
lang: "zh",
display: 'bottom',
inputClass: 'tmp',
headerText: '请您选择',
onSelect: function (valueText, inst) {
console.log(valueText);
var n = valueText.split(' ');
var m1 = $(this).children("li").eq(n[0]).find("div").html();
var m1_id = $(this).children("li").eq(n[0]).find("div").attr("data-value");
var m2 = $(this).children("li").eq(n[0]).find("li").eq(n[1]).html();
var m2_id = $(this).children("li").eq(n[0]).find("li").eq(n[1]).attr("data-value");
console.log(m1);
console.log(m2);
console.log(m1_id);
console.log(m2_id);
/*$.post("inc/person.org.php", {apart: "resume_base", current_area: m1+m2, current_areaPID: m1_id, current_areaCID: m2_id}, function (result) {
if (result == 'ok') {
$(that).find(".mbase-menu-txt").html(m1+m2);
}
else {
error('网络繁忙，请您稍后再试');
}
});*/后端处理部分
}
});
$("input[id^=current-area-list]").focus();
});其它的和单选文本的没什么区别，只是想说下这时候的valueText，它的值是这样的 2 6，意思就是第一项选择的元素所在位置，后面那个数字表示的是第二项选择的元素所在的位置。
至于三项选择的我还用到，但应该是可以的，好久没写博客，可能写的很馄饨，有什么不明白的可以留言交流。
附上css、js文件：
http://pan.baidu.com/s/1i5qcrUt
http://pan.baidu.com/s/1bpC9g5p