mobiscroll控件学习

由于最近项目需要（产品提出用h5模拟客户端实现选择时间的功能），经同事的推荐，看到了一款插件比较适合使用--mobiscroll

英文版使用说明链接如下：https://docs.mobiscroll.com/3-0-0_beta6/jquery/datetime#methods

我在开发中一共用到了两个功能，一个是时间的选择，一个是自定义选择，实现效果如下图：

一：DATE & TIME

var currYear = new Date().getFullYear();

console.info(birth);

var birthday=birth.substring(0,4)+"-"+birth.substring(5,7)+"-"+birth.substring(8,10);

console.info(birthday);

$('#birthday').mobiscroll().date({

theme: 'android-holo-light',

lang: 'zh',

display: 'bottom',

/*closeOnOverlayTap:false, //true的时候点击遮罩消失控件*/

cancelText:"",

setText:"",

yearText:"年",

monthText:"月",

dayText:"日",

headerText:'生日', //弹出框的title

//circular:true, 当为true的时候，时间循环展示

//showLabel：true 当为true的时候，每一列上面将显示label设置的文字

dateWheels: 'yyyy mm dd',

dateFormat: 'yyyy年mm月dd日', //面板中日期排列格式

defaultValue: new Date(birthday), //默认值

max: new Date(new Date().setFullYear(currYear - 2)),

min: new Date(new Date().setFullYear(currYear - 80)),

onBeforeShow: function (event, inst) {

Do something

onShow: function (event, inst) {

console.info($(".mbsc-dt-whl-y").find(".mbsc-sc-whl-sc").children());

$(".mbsc-dt-whl-y").find(".mbsc-sc-whl-sc").children().each(function(){

if($(this).text() != ""){

$(this).append("年");

}

});

onClose: function (event, inst) {

Do something

}

});

这里有一个误区我要说明，当时用这个插件的时候，为了实现数字后面带文字（1980年）的效果，我以为只要设置yearText的值就可以实现，但是yearText（monthtext，dayText）一类的字段设置的其实是这一列的名称，为了显示出来年字，设置了一下加载所有的年份，然后循环遍历在所有的内容后面缀上文本，不过这个对月，日不适用，因为月日循环展示，本质有很多组一样的数据，不能通过一次加载出来，所以对源代码中function f(c, f, d, e) 方法进行了修改

function f(c, f, d, e) {

var optionText = c.label !== 0 ? c.label: "";

var test = "";

console.info(optionText + "||" + f + "|" + d + "|" + e);

for (var h, g, l, k, n, m = "",

s = r._tempSelected[f], t = c._disabled || {}; d <= e; d++) g = a(c, d),

k = i.isPlainObject(g) ? g.display: g,

l = g && g.value !== b ? g.value: k,

optionText = l == undefined ? "": optionText,

optionText = optionText == "年" ? "": optionText,

h = g && g.cssClass !== b ? g.cssClass: "",

g = g && g.label !== b ? g.label: "",

n = l !== b && l == ba[f] && !c.multiple,

m += '<div role="option" aria-selected="' + (s[l] ? !0 : !1) + '" class="mbsc-sc-itm ' + h + " " + (n ? "mbsc-sc-itm-sel ": "") + (s[l] ? P: "") + (l === b ? " mbsc-sc-itm-ph": " mbsc-btn-e") + (t[l] ? " mbsc-sc-itm-inv mbsc-btn-d": "") + '" data-index="' + d + '" data-val="' + l + '"' + (g ? ' aria-label="' + g + '"': "") + (n ? ' aria-selected="true"': "") + ' style="height:' + V + "px;line-height:" + V + 'px;">' + (1 < ma ? '<div class="mbsc-sc-itm-ml" style="line-height:' + Math.round(V / ma) + "px;font-size:" + Math.round(0.8 * (V / ma)) + 'px;">': "") + (k === b ? "": k) + r._processItem(i, 0.2) + (1 < ma ? "</div>": "") + optionText + "</div>";

/*ma) + "px;font-size:" + Math.round(0.8 * (V / ma)) + 'px;">' : "") + (k === b ? "" : k) + r._processItem(i, 0.2) + (1 < ma ? "</div>" : "") + optionText + "</div>";*/

return m

}

二：自定义

$('#height').mobiscroll().image({

theme: 'android-holo-light',

lang: 'zh',

display: 'bottom',

/*closeOnOverlayTap:false, //true的时候点击遮罩消失控件*/

cancelText:"",

setText:"",

circular:false,

/*placeholder: 'Please Select ...',*/

labels: [''],

headerText:'身高',

enhance: true,

defaultValue: [height],

onBeforeShow: function (event, inst) {

Do something

onClose: function (event, inst) {

Do something

}

});

function getHeightData(){

var heightHtml="";

for(var i=50;i<=220;i++){

heightHtml+='<li data-val="'+i+'CM">'

+'<p>'+i+'CM</p>'

+'</li>';

}

$("#height").empty();

$("#height").append(heightHtml);

}

----纸上得来终觉浅，绝知此事要躬行----

mobiscroll控件学习相关推荐

IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
ListView控件学习系列2-编辑ListView（Edit,Update,Insert,Delete）
目录: ListView控件学习系列1-了解ListView控件 ListView控件学习系列2-编辑ListView ListView控件学习系列3-ListView选择,排序,分页 ListVie ...
AJAX Control Toolkit 控件学习(转自csdn山巅)
AJAX Control Toolkit 控件学习 2006-1-16 ToggleButton 关联ASP.NET CheckBox控件 RoundedCorder 造就圆角框 PasswordSt ...
wxpython制作表格界面_[Python] wxPython 菜单栏控件学习总结（原创）
1.总结 1.大体创建过程 1.创建一个菜单栏 : menuBar = wx.MenuBar() 相当于这个白色地方,没有File这个菜单 2.创建菜单 : fileMenu = wx.Menu( ...
【转贴】ListView控件学习系列2-编辑ListView
[转贴]ListView控件学习系列2-编辑ListView 作者:方明原贴地址:http://www.cnblogs.com/nuaalfm/archive/2008/09/02/1281885. ...
Asp.net.Ajax控件学习
Asp.net.Ajax控件学习: 1. Accordion 功能: 实现了QQ.Msn好友分类的折叠效果,就像包含了多个CollapsiblePanels . 2. AlwaysVi ...
【Autojs教程】03-Autojs 控件学习 | 淘宝关注店铺取消实战
[Autojs教程]03-Autojs 控件学习 | 淘宝关注店铺取消实战写在前面本篇教程构思良久,笔者希望通过一个实际的例子,将枯燥无味的函数放到程序中进行讲解,前面一部分是理论教程(还是更加希 ...
CGRidCtrl控件学习心得
wuqinxiang0我的:收件箱资源博客空间设置|帮助|退出首页业界移动云计算研发论坛博客下载更多狂想盼盼积累点点滴滴目录视图摘要视图订阅新版论坛系列介绍之二--功能介 ...
winform控件学习（2）—HScrollBar控件和MaskedTextBox控件
好几天没系统的总结了,感觉忘得很快,还是记录下来比较好.废话不说了,接着介绍几个使用频率比较高的控件. 1.HScrollBar控件:在窗体实现一个水平滚动的滚动条,以便在较长的项列表中或大量信息中转 ...

mobiscroll控件学习

mobiscroll控件学习相关推荐

最新文章

热门文章