mobiscroll 一个很好用的前端插件

来源:互联网 发布:jira 数据库配置 编辑:程序博客网 时间:2024/05/16 05:36

1、附上api官网地址

我是飞机票,点我

基础的东西这里不介绍,官网和很多博客上面都有写。


2、mobiscroll是一款手机端很好用的下拉插件,说实在话,这个插件在官方其实给的demo过多,导致了我对这个插件有个意见,就是看着像是静态页用的,但我们很多项目都是动态页面,咋办呢,后来发现其实只要将所有要用到这个样式的下拉框给个公共属性,比如说class样式,我们就可以一起用到了,附上例子:




只要给这个方法一写必要的初始化json,绑定之后就能够显示漂亮的样式啦:


$(function () {var opt = {        'default': {            theme: 'default',            mode: 'scroller',            display: 'modal',            animate: 'fade'        },        'select': {            preset: 'select'        },    }$('.demo-test-select').scroller($.extend(opt['select'],opt['default']));});


页面图:



3、当然,这个插件最大的作用还是手机端的时间选择器,我们项目经常用到的是对开始日期选择的限制,比如开始日期只能是从今天往后的第3天,那么就要对opt里面 的参数做一点限制:


var opt = {        'dateYMD': {            preset: 'date',            dateFormat: 'yyyy-mm-dd',            defaultValue: new Date(new Date()),            minDate: new Date(date1.split("-")[0], Number(date1.split("-")[1])-1, date1.split("-")[2]),//月份小一个月            maxDate: new Date(date2.split("-")[0], Number(date2.split("-")[1])-1, date2.split("-")[2]),//月份小一个月        },    }

限制了开始日期选择的最大时间和最小时间。



未完待续......