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