您的位置：首页 > 其它

mobiscroll 日期插件 详解

2016-09-07 17:53 246 查看
文章参照  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,
//设置为false，则点击空白地方不会关闭弹出层，默认为true
closeOnOverlay:false,
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">

 
备注：
closeOnOverlay:false, 点击空白地方，控件不退出。

 

 

mobiscroll-master.rar (104 KB)

下载次数: 4
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航