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. D3.js:饼状图的制作

    假设有如下数据需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度, ...

  2. trove design翻译

    trove的设计 高水平的描述 trove的目的是支持单租户数据库,在一个nova的实例中.没有限制nova是如何配置的,因为trove与其他OpenStack组件纯粹通过API. Trove-api ...

  3. google的作恶与不作恶

    Google刚刚出现时,那时互联网还似桃花源,路不拾遗夜不闭户,最多升级升级病毒库.Google的发展,从商业模式上带来了广告对互联网无孔不入的渗透,如今Google.百度.阿里等各大巨头都有自己的广 ...

  4. [转]numpy中的matrix矩阵处理

    今天看文档发现numpy并不推荐使用matrix类型.主要是因为array才是numpy的标准类型,并且基本上各种函数都有队array类型的处理,而matrix只是一部分支持而已. 这个转载还是先放着 ...

  5. [学习笔记]agileone安装登陆报错,localhost重定向次数过多

    1.找到.htaccess文件 2.修改RewriteEngine  参数为off即可

  6. 关于php数组是否要声明

    不知道大家有没有这样玩过php数组,正常情况下直接不声明,直接使用数组,会发现输出的与声明后的结果是一样的.

  7. js onblur 和 onkeyup 事件用法

    1. onblur 表示失去焦点时触发 2. onkeyup 表示键盘每输完一个字符之后触发,就是键盘上的按键被放开时. 例子如下: <!DOCTYPE HTML PUBLIC "-/ ...

  8. hdu 3415 Max Sum of Max-K-sub-sequence(单调队列)

    题目链接:hdu 3415 Max Sum of Max-K-sub-sequence 题意: 给你一串形成环的数,让你找一段长度不大于k的子段使得和最大. 题解: 我们先把头和尾拼起来,令前i个数的 ...

  9. 递归——CPS(三)

    JScript不是天然支持CPS,但是可以写一个分发引擎使得能工作在CPS风格下.一般只有一个活动的continuation,所以可以定义规则:JScript CPS 函数允许有返回,但是它们做的最后 ...

  10. DEBUG 调试

    1.Step Into (also F5) 跳入 2.Step Over (also F6) 跳过 3.Step Return (also F7) 执行完当前method,然后return跳出此met ...