一开始是弄个日期选择的插件,网上看到这个mobiscroll这个插件,然后各种下各种找demo,最后自己研究了一天下面把自己项目的demo拔出来分享给大家(以及文件下载),多多海涵,如果大家看了我的这文章有更好的写法还望赐教~
首先是常用的日期使用:
HTML部分:
JS部分:
$("#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('网络繁忙,请您稍后再试');
}
});*/ 这是后端入库部分
}
});
这上门就是这个插件用在日期选择的部分,比较简单,查查api就知道了。这是效果图
下面的是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();
});
这里我说明下 由于我的项目结构比较例外,所以我才这样写的,官方的demo是直接
$("#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();
});
至于三项选择的我还用到,但应该是可以的,好久没写博客,可能写的很馄饨,有什么不明白的可以留言交流。
附上css、js文件:
http://pan.baidu.com/s/1i5qcrUt
http://pan.baidu.com/s/1bpC9g5p