1、为了能更好体验,您可通过Chrome设备模式浏览。或手机扫右边的二维码进入
2、mBox是为移动设备(手机、平板等webkit内核浏览器/webview)量身定做的弹层插件,插件采用JavaScript编写,您需要按照场景选择使用。插件开源、体积小、简单实用、功能强大,是你架构移动终端网站的重要选择!
3、苹果:完美兼容ios系统(已测试ios5/6/7/8/9,机型包括ip4、ip4s、ip5、ip6等)
4、安卓:兼容,尚未发现问题(已测试android2.34/2.35/4.0x/4.1x等,机型包括小米1/2、HTC One、三星GALAXY、索尼Xperia、小辣椒等)
GitHub下载:github.com/singod/mbox
官网下载:mbox.zip
下载次数:..
官网下载: mbox2.3.zip mbox2.3演示
boxtype弹层的类型, 1为(提示框,信息框,询问框), 2为(页面层), 3为(加载条)
options是一个对象,它包含了以下key: '默认值'
width:"", // 弹层的宽度,可用是百分比,可用是如(320px) height:"", // 弹层的高度,可用是百分比,可用是如(320px) boxtype:0, //弹层的类型 title:[], // 标题可以有2个参数,例如 ["标题","color:#fff"],如果title:[]参数为空,不显示标题 content:"请稍等,暂无内容!", // 内容 conStyle:"background-color:#fff;", //内容框的css样式,你可以写更多样式 btnName:[], // 是否显示按钮 确定:"\u786E\u5B9A", 取消:"\u53D6\u6D88" btnStyle:[], //按钮CSS样式 yesfun:null, // 确定按钮回调函数 nofun:null, // 取消按钮回调函数 closefun:null, // 右上角关闭取消按钮回调函数 closeBtn:[ false, 1 ], // 参数一是否显示右上角关闭取消按钮,默认false,参数二按钮颜色 1是黑色,2是白色 time:null, // 自动关闭时间(毫秒) fixed:true, // 是否静止定位 mask:true, //是否显示遮罩层 maskClose:true, // 点击遮罩层是否关闭,默认true maskColor:"rgba(0,0,0,0.5)", // 遮罩层颜色可以是rgba也可以是rgb margin:"10px 10px", zIndex:1e4, // 层级关系 success:null, //层成功弹出层的回调函数,返回一个参数为当前层元素对象 endfun:null //层彻底销毁后的回调函
调用方式:jemBox.open(options) 或 mBox.open(options) 或 $M.open(options)
/** 以下是调用代码(此处不展示事件绑定)*/ //提示框 mBox.open({ content: '您好', time: 2 //2秒后自动关闭 }); //信息框 mBox.open({ title: ['信息','border-bottom: 1px solid #EBEBEB;'], content: '移动版和PC版不能同时使用在同一页面。' }); //询问框 mBox.open({ title: ['提示','border-bottom: 1px solid #EBEBEB;'], content: '您确定要刷新一下本页面吗?', btnName: ['嗯', '不要'], yesfun: function(index){ location.reload(); mBox.close(index); } }); //页面层 mBox.open({ boxtype: 2, content: '可传入任何内容,支持html。一般用于手机页面中', conStyle: 'position:fixed; bottom:0; left:0; width:100%; height:150px; padding:10px 0; border:none;' }); //加载层 mBox.open({ boxtype: 3, conStyle: 'text-align:center;', maskColor:"rgba(0,0,0,0.8)", time: 6, content: '<div class="jemboxloadspin"><div class="jemboxloading"></div></div><p style="line-height:20px;">加载测试中</p>' });
mBox 弹层插件不对iframe提供支持
普通信息框,并设置2秒自动关闭:
jemBox.open({
content: '通过conStyle设置你想要的样式',
conStyle: 'background-color:#09C1FF; color:#fff; border:none;',
time: 2
});
运行
$M.open({
title: [
'我是标题',
'background-color:#0099CC; color:#fff;'
],
closeBtn:[ true, 2 ],
content: '标题风格任你定义。。'
});
运行
$M.open({
content: '通过conStyle设置你想要的样式',
btnName: ['OK']
});
运行
mBox.open({
content: '你是想确认呢,还是想取消呢?',
btnName: ['确认', '取消'],
maskClose: false,
yesfun: function(){
mBox.open({content: '你点了确认', time: 1});
}, nofun: function(){
mBox.open({content: '你选择了取消', time: 1});
}
});
运行
类型:String/DOM,content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM
1、当content为String时,接受并展现字符串型的内容
1、当content为DOM时,接受的是一段html片段并展现html片段的内容
//如果是页面层 mBox.open({ boxtype: 1, content: '传入任意的文本或html' //这里content是一个普通的String }); //html片段大家好!我就是html片段了mBox.open({ boxtype: 1, content: mBox.cell("#piand") //mBox.cell(elem),elem可以是ID\CLASS\TAG等 //这里content是一个DOM }); //Ajax获取 $.post('url', {}, function(str){ mBox.open({ boxtype: 1, content: str //注意,如果str是object,那么需要字符拼接。 }); }); 运行页面层 运行DOM-html片段
mBox.close(idx); //idx为你调用mBox时返回的索引
mBox.closeAll(); // 它将关闭所有层
var pageii = mBox.open({
boxtype: 2,
content: html,
conStyle: 'position:fixed; left:0; top:0; width:100%; height:100%; border:none;background-color:#fff;'
});
运行
例子毕竟只是带你入门,我们更希望你认真去阅读文档手册,那里列举了mBox所有的接口,它们会帮助你完成形。
Powered by jayui.com ©2015-2016