mobiscroll 日期插件详解

来源：互联网发布：手机淘宝开店要钱吗编辑：程序博客网时间：2024/05/13 23:06

文章参照 http://www.cnblogs.com/headwolf/archive/2013/12/23/3487207.html

最近切一个移动页面，需要使用弹出日期控件，在网上搜了很多控件，觉得mobiscroll这个插件的效果是最好的，但问题是该控件是收费的，并且API没有统一给出，我自己总结了一下，仅供学习

例子：

<!DOCTYPE html><html lang="zh-CN"><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="../js/jquery.min.js"></script><title>mobiscroll 日期控件例子</title><script type="text/javascript">$(document).ready(function(){    function init() {        $('#demo_date').mobiscroll().date({            theme: 'ios',/* scroller —— 以wheel滑动方式选择 clickpick —— 显示 - + 按钮选择 mixed —— 兼容以上两种方式* */            mode: 'scroller',/* modal —— 显示在中间 inline —— 直接显示在页面中 bubble —— 类似于tip弹出显示 top —— 显示在顶部 bottom —— 显示在底部*/            display: 'bottom',            //设置按钮显示的样式            btnClass : 'sqh_color_56 font_16 sqh_line_height_15 margin_10 sqh_font_type',            minDate:new Date() ,            //点击确定按钮，触发事件。            onSelect:mobiscroll_select,            //当时间选择的内容发生变化触发的事件            onChange:mobiscroll_change,            //被调用之前触发该方法，可以在显示之前修改配置文件            onBeforeShow:mobiscroll_beforeShow,            //点击取消按钮触发的事件            onCancel:mobiscroll_cancel,            //当弹出效果退出的时候执行该方法，在onSelect 和 onCancel之前执行            onClose:mobiscroll_close,//            onDestroy:mobiscroll_destroy,//生成完HTML代码之后还有显示代码之前执行这个函数，可以自定义HTML内容            onMarkupReady:mobiscroll_markupReady,//显示位置之前调用该方法            onPosition:mobiscroll_position,            //改变一个值之后触发的时间，参数是其中一个的值            //Gets called when the user taps on a value on the wheel.            onValueTap:mobiscroll_valueTap,            //显示之前触发的时间            onShow:mobiscroll_show,            //Gets called on initialization and on every wheel change            validate:mobiscroll_validate,        //设置为false，则点击空白地方不会关闭弹出层，默认为true        closeOnOverlay:false,            lang: 'zh'        });    }    $("#show").click(function(){        $("#demo_date").mobiscroll("show");    });    $("#clear").click(function(){        $("#demo_date").mobiscroll("clear");    });    init();});function mobiscroll_validate(item, inst){}function mobiscroll_show(html, valueText, inst){}function mobiscroll_valueTap(html, inst){    //html是变化值控件的HTML代码，与mobiscroll_position中的第一个参数不一致，    console.log("valueText : " + html[0].outerHTML);    //mobiscroll对象    console.log("inst : " + inst);}function mobiscroll_position(html, inst){    //html是一个数组对象，用户显示HTML的内容，代表的是整个显示控件的内容    console.log("html : " + html[0].outerHTML);    console.log("inst : " + inst);}function mobiscroll_markupReady(html, inst){    console.log("html : " + html);    console.log("inst : " + inst);    //inst._markup 就是生成的html 对象    console.log(inst._markup == html);}function mobiscroll_destroy(valueText, btn, inst){    //valueText是选中的值    console.log("valueText : " + valueText);    console.log("btn : " + btn);    //mobiscroll对象    console.log("inst : " + inst);}    function mobiscroll_close(valueText, btn, inst){        //valueText是选中的值        console.log("valueText : " + valueText);        console.log("btn : " + btn);        //mobiscroll对象        console.log("inst : " + inst);    }    function mobiscroll_cancel(valueText, inst){        //valueText是选中的值        console.log("valueText : " + valueText);        //mobiscroll对象        console.log("inst : " + inst);    }    function mobiscroll_beforeShow(inst){        //mobiscroll对象        console.log("inst : " + inst);    }    function mobiscroll_select(valueText,inst){        //valueText是选中的值        console.log("valueText : " + valueText);        //mobiscroll对象        console.log("inst : " + inst);    }    function mobiscroll_change(valueText,inst){        //valueText是选中的值        console.log("valueText : " + valueText);        //mobiscroll对象        console.log("inst : " + inst);    }</script></head><body><input id="demo_date" placeholder="Please Select ..." /><button id="clear">Clear</button><button id="show">Show</button></body></html><script src="../package/mobiscroll/js/mobiscroll.core.js"></script><script src="../package/mobiscroll/js/mobiscroll.frame.js"></script><script src="../package/mobiscroll/js/mobiscroll.scroller.js"></script><script src="../package/mobiscroll/js/mobiscroll.util.datetime.js"></script><script src="../package/mobiscroll/js/mobiscroll.datetimebase.js"></script><script src="../package/mobiscroll/js/mobiscroll.datetime.js"></script><script src="../package/mobiscroll/js/mobiscroll.select.js"></script><script src="../package/mobiscroll/js/mobiscroll.listbase.js"></script><script src="../package/mobiscroll/js/mobiscroll.image.js"></script><script src="../package/mobiscroll/js/mobiscroll.treelist.js"></script><script src="../package/mobiscroll/js/mobiscroll.frame.ios.js"></script><script src="../package/mobiscroll/js/mobiscroll.frame.sense-ui.js"></script><script src="../package/mobiscroll/js/mobiscroll.frame.wp.js"></script><script src="../package/mobiscroll/js/mobiscroll.mobiscroll-dark.js"></script><script src="../package/mobiscroll/js/i18n/mobiscroll.i18n.zh.js"></script><link rel="stylesheet" href="../package/mobiscroll/css/import.css">

备注：

closeOnOverlay:false, 点击空白地方，控件不退出。

mobiscroll-master.rar (104 KB)
下载次数: 4

0 0

mobiscroll 日期插件 详解

mobiscroll 日期插件详解