jeBox是一款备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。jeBox是基于jQuery而开发的弹层组件。
您可以免费将她用于任何个人项目。但是不能去除头部信息。
JEUI 已经集成 jeBox 控件,也可以下载独立的 jeBox 控件。
独立jeBox下载:官网下载 Github下载 当前版本:0 下载次数:0次
0、由原来的 jeBox.open() 改成 jeBox() 调用,核心参数不变
1、修复因bootstrap造成的弹层高度的问题
2、修改了一些发现的问题
3、更多功能自己去体验
浏览器兼容,下面是我们的主要兼容目标
1、IE8 或者 IE8以上 (Windows), IE8以下浏览器不兼容
2、Safari (Mac)
3、Chrome (Windows, Mac, Linux)
4、Firefox (Windows, Mac, Linux)
5、谷歌内核(webkit)浏览器,如360浏览器,搜狗浏览器,QQ浏览器等
options是一个对象,它包含了以下key: '默认值'
cell: "", // 独立ID,用于控制弹层唯一标识 title: "提示信息", // 标题,参数一:提示文字,参数二:提示条样式 ["提示信息",{color:"#ff0000"}] content: "暂无内容!", // 内容 boxStyle: {}, // 设置弹层的样式 closeBtn: true, // 标题上的关闭按钮 closefun:null, // 标题上的关闭按钮回调方法 maxBtn: false, // 是否开启最大化按钮 boxSize: ["auto","auto"], // 参数一:弹层宽度,参数二: 弹层高度 padding: "5px", // 自定义边距 offset: ["auto", "auto"], // 坐标轴 type: 'dialog', // 显示基本层类型 icon: 0, // 图标,信息框和加载层的私有参数 button: [], // 各按钮 btnAlign:"right", // btnAlign 按钮对齐方式 left center right time: 0, // 自动关闭时间(秒),0表示不自动关闭 maskLock: true, // 是否开启遮罩层 maskClose: true, // 点击遮罩层是否可以关闭 maskColor: ["#000", .5], // 参数一:遮罩层颜色,参数二:遮罩层透明度 isDrag: true, // 是否可以拖拽 fixed: true, // 是否静止定位 zIndex: 9999, // 弹层层级关系 scrollbar: false, // 是否允许浏览器出现滚动条 shadow: true, // 拖拽风格 success: null, // 层弹出后的成功回调方法 endfun: null
//初体验 var icon = 1; (function changeIcon(){ var idxs = jeBox.alert('Hi,你好! 点击确定更换图标', { icon: icon, maskClose: true, title: icon === 1 ? '初体验 - jeBox 1.0' : 'icon:'+icon + ' - jeBox 1.0' }, function(idx){ jeBox.close(idx); changeIcon(); }); if(9 === ++icon) jeBox.close(idxs); }()); //询问层 jeBox({ cell:"jbx", title:"你的选择", //boxSize:["400px","150px"], content:'您是如何看待前端开发?', maskLock : true , btnAlign:"center", button:[ { name: '重要', callback: function(index){ jeBox.msg('的确很重要', {icon: 2,time:3}); jeBox.close(index); } }, { name: '奇葩', callback:function(){ jeBox.msg('也可以这样认为', {icon: 1,time:3,button:[{name:"确定"},{name:"取消"}]}); } }, { name: '无效', disabled: true }, { name: '关闭我' } ] }) //提示层 jeBox.msg('我就是要提示!', {icon: 2,time:3}); //页面层 jeBox({ boxSize:["400px","240px"], content:'<div style="padding:20px;">即直接给content传入html字符<br>当内容宽高超过定义宽高,会自动出现滚动条。<br><br><br><br><br><br><br><br><br><br><br>很高兴在下面遇见你</div>', maskLock : true }) //捕获页 jeBox({ boxSize:["400px","220px"], content: $("#notice"), maskLock : true }) //iframe层 jeBox({ title:"mBox mobile页", type:'iframe', padding:"0", boxSize:["450px","80%"], content: "http://www.jemui.com/mbox/", maskLock : true }) //iframe窗 jeBox({ title:"很多时候,我们想最大化看,不显示滚动条", type:'iframe', maxBtn:true, padding:"0", boxSize:["90%","90%"], content: ["http://www.jemui.com/",'no'], //iframe的url,no代表不显示滚动条 maskLock : true }) //加载层 var er = jeBox.loading(1,"玩命加载中"); setTimeout(function(){ jeBox.close(er) }, 5000); //loading层 var san = jeBox.loading(2,"Loading..."); setTimeout(function(){ jeBox.close(san) }, 5000); //tips提示层 jeBox.tips(".demotip","tip提示内容", {align:"right",time:3});
//信息框-例1 jeBox.alert('见到你真的很高兴', {icon: 7}); //信息框-例2 jeBox.msg('你确定你很帅么?', { time: 0 , button: [ { name: '必须啊', callback:function(index){ jeBox.close(index); jeBox.msg('雅蠛蝶 O.o', { icon: 7 }); } },{ name: '丑到爆' } ], boxStyle:{ background:"#333", border:"1px solid #333", "border-radius":"4px", color:"#fff",opacity:"0.93", filter:"alpha(opacity=90)" } }); //信息框-例3 jeBox.msg('这是最常用的吧'); //信息框-例4 jeBox.msg('不开心。。', {icon: 6}); //页面层-自定义 jeBox({ title:false, closeBtn:false, maskClose:true, boxSize:["450px","250px"], content: "自定义HTML内容", boxStyle:{ background:"#81BA25", border:"1px solid #81BA25", "border-radius":"4px", color:"#fff" } }) //iframe-子父操作 jeBox({ type: 'iframe', boxSize: ['700px', '530px'], maxBtn: true, scrollbar: false, content: 'iframe.html' }); //iframe-多媒体 jeBox({ title:false, closeBtn:false, type:'iframe', padding:"0", boxSize:['630px', '360px'], content: "http://player.youku.com/embed/XMTI4MTE1NTY0MA", maskClose:true }) jeBox.msg('点击任意处关闭'); //iframe-禁滚动条 jeBox({ title:"禁滚动条", type:'iframe', padding:"0", boxSize:["450px","80%"], content: ["http://www.jemui.com/mbox/","no"], maskLock : true }) //加载风格1 var one = jeBox.loading(1); setTimeout(function(){ jeBox.close(one) }, 3000); //加载风格2 jeBox.loading(1,"玩命加载中",{time:3}); //加载风格3 jeBox.loading(2,"加载中...",{time:3}); //加载风格4 jeBox.loading(3,"Loading...",{time:3});
类型:String,默认:空字符
设置该值后,不管是什么类型的层,都只允许同时弹出一个。一般用于页面层和iframe层模式
类型:String/Array/Boolean,默认:'提示信息'
title支持三种类型的值,若你传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: ['文本', {color:"#ff0000", background:"#fff"}],数组第二项可以写任意css样式;
如果你不想显示标题栏,你可以title: false || "false"
类型:String/DOM/Array,默认:'暂无内容!'
content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。譬如:
//如果是页面层 jeBox({ type: 'dialog', content: '传入任意的文本或html' //这里content是一个普通的String }); jeBox({ type: 'dialog', content: document.getElementById(id) //这里content是一个DOM }); //Ajax获取 $.post('url', {}, function(str){ jeBox({ type: 'dialog', content: str //注意,如果str是object,那么需要字符拼接。 }); }); //如果是iframe层 jeBox({ type: 'iframe', content: 'http://www.jemui.com/' //这里content是一个URL,如果你不想让iframe出现滚动条, //你还可以content: ['http://www.jemui.com/', 'no'] });
类型:Array,默认:{ }
例如:{color:"#333", background:"#fff"}
类型:Boolean,默认:true
如果值为true标题上的关闭按钮显示,值为false标题上的关闭按钮不显示
类型:Boolean,默认:false
默认不显示最大小化按钮。需要显示配置maxBtn: true即可
类型:Array,默认:"auto"
可以是百分比,如: [ "80%", "40%" ]
在默认状态下,是宽高都自适应的,但当你定义宽高相同时,你可以是boxSize: '500px' 或者 boxSize: ['500px','500px']。当你宽高都要定义时,你可以boxSize: ["500px", "300px"]
类型:String,默认:"5px"
例如: padding:"5px 10px"
类型:String/Array,默认:[ "auto", "auto" ]
可以是百分比,如: [ "80%", "40%" ] 或 [ "@80%", "@40%" ]
默认垂直水平居中。当您定义top、left时,你可以offset: ["100px", "200px"]。除此之外,当您定义right、bottom时,你还可以offset: ["@100px", "@200px"]
类型:String,默认:'dialog'
jeBox提供了3种层类型。
'dialog', 它是(页面层,默认)(信息框)
'iframe', 它是(iframe层)
'loading', 它是(加载层)
'tips', 它是(tips提示层)
类型:Number,默认:(信息框)
信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入1-7,如果是加载层,可以传入1-3
//eg1 jeBox.alert('酷毙了', {icon: 1}); //eg2 jeBox.msg('不开心。。', {icon: 5}); //eg3 jeBox.loading(1); //风格1的加载
类型:Array,默认:[ ]
var index = jeBox({ maxBtn:true, boxSize:["80%","400px"], type:'dialog', maskLock : true , button: [ { name: '确定', callback: function(index, id){ //do something jeBox.close(index); //如果设定了yes回调,需进行手工关闭 } },{ name: '取消', callback: function(index){ return false; } }, { name: '改变内容为同意', callback: function (index) { jeBox.content('你同意了',index) return false; } },{ name: '不同意', callback: function () { jeBox.msg("你选择了不同意",{ icon:1, button:[{name:"确定"},{name:"取消"}] }) } },{ name: '无效按钮', disabled: true },{ name: '关闭我' } ] })
类型:Function,默认:null
该回调携带一个参数,当前层DOM对象。如:
jeBox({ content: '测试回调', button: [ {name: '确定'},{name: '取消'}], closeBtn: true, // 标题上的关闭按钮 closefun: function(index, id){ //do something } });
类型:Function,默认:null
当弹层出现后函数就会执行,不携带任何参数。
jeBox({ content: '测试回调', button: [ {name: '确定'},{name: '取消'}], success: function(id, index){ //do something } });
类型:Function,默认:null
无论是确认还是取消,只要层被销毁了,endfun都会执行,不携带任何参数。
类型:Number,默认:0
默认不会自动关闭。当你想自动关闭时,可以time: 5,即代表5秒后自动关闭
类型:Boolean,默认:true
默认显示遮罩层。如果不显示配置maskLock: false即可
类型:Boolean,默认:false
如果你的maskLock是存在的,那么你可以设定maskClose来控制点击弹层外区域关闭。
类型:Array,默认: [ "#000000", 0.5 ]
参数一:遮罩层颜色,参数二:遮罩层透明度
类型:Boolean,默认: true
默认为可以拖拽,如果不容许拖拽配置isDrag: false即可
类型:Boolean,默认:true
即鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed: false即可
类型:Number,默认:9999
一般用于解决和其它组件的层叠冲突。
类型:Boolean,默认:true
默认允许浏览器滚动,如果设定scrollbar: false,则屏蔽
类型:Boolean,默认: true
默认为拖动有虚影,如果不容许拖拽有虚影配置shadow: false即可
基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走jeBox(),创建任何类型的弹层都会返回一个当前层索引,上述的options即是基础参数,另外,该文档统一采用options作为基础参数的标识例子:
var index = jeBox({ content: 'test' }); //拿到的index是一个重要的凭据,它是诸如jeBox.close(index)等方法的必传参数。
关于它似乎没有太多介绍的必要,唯一让你疑惑的,可能就是这个index了吧,事实上它非常容易得到。
//正如你看到的,每一种弹层调用方式,都会返回一个index jeBox.close(index); //此时你只需要把获得的index,轻轻地赋予jeBox.close即可 //当你在iframe页面关闭自身时 var index = parent.jeBox.frameIndex(window.name); //先得到当前iframe层的索引 parent.jeBox.close(index); //再执行关闭 。
closeAll真的可以帮上你,她可以帮你关闭所有显示的层
jeBox.closeAll(); //疯狂模式,关闭所有层 jeBox.closeAll('dialog'); //关闭信息框 jeBox.closeAll('iframe'); //关闭所有的iframe层 jeBox.closeAll('loading'); //关闭加载层 jeBox.closeAll('tips'); //关闭所有的tips层
使用方式:jeBox.title('标题变了', index)
使用方式:jeBox.content('改变了内容', index)
jeBox({ content: '测试回调', button: [ { name: '确定', callback: function(index, id){ jeBox.title('标题变了', index); jeBox.content('改变了内容', index); } },{ name: '取消' } ] });
我在源码中有了相对较大的篇幅来定制了这个msg,目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。因为它简单,而且足够得自觉,它不仅占据很少的面积,而且默认还会3秒后自动消失所有这一切都决定了我对msg的爱。因此我赋予了她许多可能在外形方面,它坚持简陋的变化,在作用方面,他坚持零用户操作。而且它的参数也是机会自动补齐的。
//例1 jeBox.msg('只想弱弱提示'); //例2 jeBox.msg('有表情地提示', {icon: 6}); //例3 jeBox.msg('关闭后想做些什么', function(){ //do something }); //例 jeBox.msg('同上', { icon: 1, time: 2 //2秒关闭(如果不配置,默认是3秒) }, function(){ //do something });
它的弹出似乎显得有些高调,一般用于对用户造成比较强烈的关注,类似系统alert,但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数,可以设定各种你所需要的基础参数,但如果你不需要的话,直接写回调即可。
//例1 jeBox.alert('只想简单的提示'); //例2 jeBox.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调,可以放在第三个参数中。 //例3 jeBox.alert('有了回调', function(index){ //do something jeBox.close(index); });
type:3的深度定制。loading并不需要你传太多的参数,但如果你不喜欢默认的加载风格,你还有选择空间。icon支持传入1-3。另外特别注意一点:loading默认是不会自动关闭的,因为你一般会在ajax回调体中关闭它。
//例1 var index = jeBox.load(1,"正在加载中"); //例2 var index = jeBox.load(2,"正在加载中", {time: 10}); //又换了种风格,并且设定最长等待10秒 //关闭 jeBox.close(index);
cell 为提示的对象吸附器,可以(#id 或者 .class)
content 为提示内容
options 为tips的私有配置
//tips的可用配置 options { cell: "", // 为提示的对象吸附器,可以(#id 或者 .class) boxSize: ["auto", "auto"], // 参数一:弹层宽度,参数二: 弹层高度 time: 0, // 自动关闭时间(秒),0表示不自动关闭 align:"top", // 提示层的箭头方向 boxStyle:{'background-color':"#5eb95e"}, // 提示层的风格,参数为提示边框颜色 spacing:10, // 默认为箭头距离对象的尺寸 success: null, // 层弹出后的成功回调方法 endfun: null } align 分别有4个箭头方向("top", "right", "bottom", "left") //示例 jeBox.tips('吸附元素选择器,如#id 或者 .class',"提示内容", { time:3, align:"bottom" });
一般用于在自定义元素上触发最大化和全屏
一般用于在自定义元素上触发最大化和全屏
当你试图在当前页获取iframe页的DOM元素时,你可以用此方法。selector即iframe页的选择器
jeBox({ type: 'iframe', content: 'test/iframe.html', success: function(cellid, index){ var body = jeBox.frameCell('body', index); var iframeWin = window[cellid.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法 console.log(body.html()) //得到iframe页的body内容 } });
此方法一般用于在iframe页关闭自身时用到。
//假设这是iframe页 var index = parent.jeBox.frameIndex(window.name); //先得到当前iframe层的索引 parent.jeBox.close(index); //再执行关闭
似乎不怎么常用的样子。使用方式:jeBox.frameUrl(index, 'http://www.jemui.com/')