mobiscroll 插件札记
来源:互联网 发布:针对接口编程 编辑:程序博客网 时间:2024/05/22 02:31
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">
阅读全文
0 0
- mobiscroll 插件札记
- mobiscroll 插件札记(一)
- mobiscroll插件使用
- mobiscroll 日期插件 详解
- mobiscroll calendar插件
- mobiscroll 触屏日期插件
- 手机版日期插件mobiscroll
- mobiscroll时间插件的用法
- 手机日期插件mobiscroll奇巧淫技&mobiscroll 中文API
- jquery mobile mobiscroll 日期插件使 用mobiscroll
- 手机日期插件mobiscroll奇巧淫技&mobiscroll 中文API
- mobiscroll
- mobiscroll
- 关于手机端选择日期插件 mobiscroll
- 一款不错的JS日期插件 Mobiscroll
- 手机日期插件jquery mobiscroll 实例
- mobiscroll js日期插件的基本案例
- 推荐手机端时间插件mobiscroll
- SpringMVC架构与Mybatis整合
- 【转】模仿绘画风格的算法:A Neural Algorithm of Artistic Style
- DPM代码(C++)
- 离散正(余)弦信号的时域与FFT变换后所得频域之间的关系(幅值和相角)
- layui结合form,table的全选、反选v1.0
- mobiscroll 插件札记
- Task+ConcurrentQueue+Parallel多线程编程
- git push -u orgin master报错
- java生成两种二维码
- uC/OS-II源码解析(os_q.c)
- SharePoint Framework 企业向导(三)
- springboot整合多个activemq
- SharePoint Framework 企业向导(四)
- Collections排序List<Map>