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">

mobiscroll 插件札记（一）的更多相关文章

  1. mobiscroll插件的基本使用方法

    前一阵子接触到了mobiscroll插件,用在移动端的日期选择上,感觉倍棒,于是便敲了一个小案例,与大家一起分享分享 <!DOCTYPE html> <html lang=" ...

  2. 关于mobiscroll插件的使用

    在网上找了很多资料,各大猿友对这个插件都做了很详细的介绍,我也是看了很多资料才发现原来这个插件有一些需要注意的地方,在这总结了一下: //时间 var currYear = (new Date()). ...

  3. 利用jquery mobiscroll插件选择日期、select、treeList的具体运用

    体验更优排版请移步原文:http://blog.kwin.wang/programming/jquery-mobiscroll-select-treeList.html mobiscroll是个很好用 ...

  4. Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

  5. (转)JQM 日期插件 mobiscroll Demo

    (原)http://www.wglong.com/main/artical!details?id=11  JQM 日期插件 mobiscroll Demo 2013-04-25 / 分类:Jquery ...

  6. (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

    (原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...

  7. jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明

    近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好 ...

  8. 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)

    1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...

  9. Mobiscroll日期插件使用

    相关资源 官方帮助文档:https://docs.mobiscroll.com/3-0-1 导入资源文件 <link href="${webRoot}/template/green/w ...

随机推荐

  1. 记一次kali和win8.1的双系统修复！！

    简要情况: 原来电脑存在的系统:win7和kali. 后来的系统:win8.1和原本的kali 情况描述:在我装完win8.1后就直接启动到win8.1了没有了grub2的选择启动界面,但是我还是想要 ...

  2. JSON对象和字符串的转换

    JSON.parse()和JSON.stringify()   1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf& ...

  3. 【1】Hover 效果收集

    各种 hover 效果  github repository>>  git 仓库 1. 背景图的 hover 效果 原页面>> githubSite>>

  4. Android进程回收的一些知识

    关于OOM_ADJ说明: Android 进程易被杀死的情形: 参考:Android进程保活招式大全

  5. CHD 2015迎新杯题解

    A.预防流感的拉面女神 简析:计算 n 的二进制表示里面 1 的个数 #include <cstdio> #include <cstring> #include <alg ...

  6. 谷歌游览器对<input type='file'> change只能响应1次解决和样式的改变

    在项目过程中遇到的需要上传本地文件,file的原始控件不太美观,但是这个控件和button有点不太一样, 改变这个样式的思路就是在控件外面套一层链接,然后把file控件的透明度设置为0(透明).样式只 ...

  7. ubuntu_虚拟机和SD卡链接失败，可能的原因

    这个问题很简单吧,但是自己解决却用了很长时间,说一下方法吧! 1.有的虚拟机不兼容USB3.0的接口,所以在接SD卡(读卡器)时,请将读卡器拔出,插入笔记本USB2.0的接口上(当时自己没注意到这点, ...

  8. android之活动状态、生存期、启动模式

    活动状态:1.运行状态2.暂停状态3.停止状态4.销毁状态 活动的生存期 七个回调方法1.onCreate()2.onStart()3.onResume()4.onPause()5.onStop()6 ...

  9. AC日记——【模板】字符串哈希 洛谷 3370

    题目描述 如题,给定N个字符串(第i个字符串长度为Mi,字符串内包含数字.大小写字母,大小写敏感),请求出N个字符串中共有多少个不同的字符串. 友情提醒:如果真的想好好练习哈希的话,请自觉,否则请右转 ...

  10. thinkphp5.0 自动加载

    自动加载 概述 ThinkPHP5.0真正实现了按需加载,所有类库采用自动加载机制,并且支持类库映射和composer类库的自动加载. 自动加载的实现由think\Loader类库完成,自动加载规范符 ...