mobiscroll 插件札记（一）

mobiscroll 插件笔记（一）
文章参照 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,
            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">