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

转载于:https://www.cnblogs.com/yzycoder/p/5360267.html

mobiscroll 插件札记（一）相关推荐

mobiscroll 插件札记
mobiscroll 插件笔记(一) 文章参照 http://www.cnblogs.com/headwolf/archive/2013/12/23/3487207.html 最近切一个移动页面,需 ...
Mobiscroll插件-根据时间选择弹出星座
根据Mobiscroll插件-根据时间选择弹出星座,没办法,博客发文长度有限制,只有添加到外链.有需要的话把外链的下载过来自己修改整理一下. 基于插件粗鲁修改的,没有优化.用的时候自己优化一下吧! ...
mobiscroll插件的基本使用方法
前一阵子接触到了mobiscroll插件,用在移动端的日期选择上,感觉倍棒,于是便敲了一个小案例,与大家一起分享分享 1 <!DOCTYPE html> 2 <html lang=& ...
关于mobiscroll插件的使用
在网上找了很多资料,各大猿友对这个插件都做了很详细的介绍,我也是看了很多资料才发现原来这个插件有一些需要注意的地方,在这总结了一下: //时间 var currYear = (new Date()). ...
mobiscroll插件滑动时间选择效果
此插件的特点是可以适用于手机端滑动选择时间,类似于原生插件下载地址 https://download.csdn.net/download/lianzhang861/10691082 引入css和js ...
mobiscroll插件（设置时间范围）
了解插件最好的方式就是去他的后宫 Let's go! 1.主要问题:解决插件选择月份时默认只能选择当前月+1之前的月份需求:我们需要的只是月份解决方案:日期显示格式dataFormat : 'mm ...
日历插件（项目总结）（包括mobiscroll.js LCalendar 和Calendar这三个日历插件）
日历插件的总结,由于在项目中经常用到日历,所以需要总结一下日历插件的用法日历初始化 var date = new Date(); var today = dateUtil.dateFormat(da ...
关于mobiscroll日期插件无法正确的选中默认日期
在使用这个插件的时候遇到了一个问题,所以记录一下 1,先看一下错误的代码 <!DOCTYPE html> <html> <head lang="en" ...
mobiscroll js 日期插件
2019独角兽企业重金招聘Python工程师标准>>> mobiscroll js: 日期插件,一般用于移动开发界面 <!--mobiscroll会将表单控件的value属性 ...
jquery日历之昨天－－今天－－明天
本人菜鸟一枚,昨天被老大追着要一个含有前一天后一天的弹窗日历,而且还要显示当前的默认时间,这对于小白来说,无异于比长胖十斤更晴天霹雳.奈何我搜肠刮肚,绞尽脑汁,翻箱倒柜但还是没能找到一个合适的jque ...

mobiscroll 插件札记（一）

mobiscroll 插件札记（一）相关推荐

最新文章

热门文章