基础参数

内置方法

jeBox弹层组件 说明 此为 PC 弹层控件,非手机弹层控件 mBox移动端弹层

jeBox是一款备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。jeBox是基于jQuery而开发的弹层组件。
您可以免费将她用于任何个人项目。但是不能去除头部信息。
JEUI 已经集成 jeBox 控件,也可以下载独立的 jeBox 控件。

独立jeBox下载:官网下载 Github下载 当前版本:0 下载次数:0


更新日志 更新时间:2017-09-29

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浏览器等

核心方法(配置):jeBox(options)

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}); 
    
再探深处

信息框

页面层/iframe层

加载层

//信息框-例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});
    

cell - 用于控制弹层唯一标识

类型:String,默认:空字符
设置该值后,不管是什么类型的层,都只允许同时弹出一个。一般用于页面层和iframe层模式

title - 标题

类型:String/Array/Boolean,默认:'提示信息'
title支持三种类型的值,若你传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: ['文本', {color:"#ff0000", background:"#fff"}],数组第二项可以写任意css样式;
如果你不想显示标题栏,你可以title: false || "false"

content - 内容

类型: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']
});

boxStyle - 设置弹层的样式

类型:Array,默认:{ }
例如:{color:"#333", background:"#fff"}

closeBtn - 标题上的关闭按钮

类型:Boolean,默认:true
如果值为true标题上的关闭按钮显示,值为false标题上的关闭按钮不显示

maxBtn - 是否显示全屏按钮

类型:Boolean,默认:false
默认不显示最大小化按钮。需要显示配置maxBtn: true即可

boxSize - 弹层的宽度和高度

类型:Array,默认:"auto"
可以是百分比,如: [ "80%", "40%" ]
在默认状态下,是宽高都自适应的,但当你定义宽高相同时,你可以是boxSize: '500px' 或者 boxSize: ['500px','500px']。当你宽高都要定义时,你可以boxSize: ["500px", "300px"]

padding - 自定义边距

类型:String,默认:"5px"
例如: padding:"5px 10px"

offset - 坐标轴

类型:String/Array,默认:[ "auto", "auto" ]
可以是百分比,如: [ "80%", "40%" ] 或 [ "@80%", "@40%" ]
默认垂直水平居中。当您定义top、left时,你可以offset: ["100px", "200px"]。除此之外,当您定义right、bottom时,你还可以offset: ["@100px", "@200px"]

type - 显示基本层类型

类型:String,默认:'dialog'
jeBox提供了3种层类型。
'dialog', 它是(页面层,默认)(信息框)
'iframe', 它是(iframe层)
'loading', 它是(加载层)
'tips', 它是(tips提示层)

icon - 图标。信息框和加载层的私有参数

类型:Number,默认:(信息框)
信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入1-7,如果是加载层,可以传入1-3
//eg1
jeBox.alert('酷毙了', {icon: 1});
//eg2
jeBox.msg('不开心。。', {icon: 5});
//eg3
jeBox.loading(1); //风格1的加载

button - 按钮

类型: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: '关闭我'
        }
    ]
})

closefun - 右上关闭按钮回调方法

类型:Function,默认:null
该回调携带一个参数,当前层DOM对象。如:
jeBox({
    content: '测试回调',
    button: [ {name: '确定'},{name: '取消'}],
    closeBtn: true,   // 标题上的关闭按钮
    closefun: function(index, id){
    //do something
    }
}); 

success - 加载成功后的回调

类型:Function,默认:null
当弹层出现后函数就会执行,不携带任何参数。
jeBox({
    content: '测试回调',
    button: [ {name: '确定'},{name: '取消'}],
    success: function(id, index){
    //do something
    }
}); 

endfun - 层销毁后触发的回调

类型:Function,默认:null
无论是确认还是取消,只要层被销毁了,endfun都会执行,不携带任何参数。

time - 自动关闭所需毫秒

类型:Number,默认:0
默认不会自动关闭。当你想自动关闭时,可以time: 5,即代表5秒后自动关闭

maskLock - 是否开启遮罩层

类型:Boolean,默认:true
默认显示遮罩层。如果不显示配置maskLock: false即可

maskClose - 是否点击遮罩关闭

类型:Boolean,默认:false
如果你的maskLock是存在的,那么你可以设定maskClose来控制点击弹层外区域关闭。

maskColor - 遮罩层的颜色与透明度

类型:Array,默认: [ "#000000", 0.5 ]
参数一:遮罩层颜色,参数二:遮罩层透明度

isDrag - 是否开启层拖拽

类型:Boolean,默认: true
默认为可以拖拽,如果不容许拖拽配置isDrag: false即可

fixed - 是否静止定位

类型:Boolean,默认:true
即鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed: false即可

zIndex - 层叠顺序

类型:Number,默认:9999
一般用于解决和其它组件的层叠冲突。

scrollbar - 是否允许浏览器出现滚动条

类型:Boolean,默认:true
默认允许浏览器滚动,如果设定scrollbar: false,则屏蔽

shadow - 是否开启层拖动虚影

类型:Boolean,默认: true
默认为拖动有虚影,如果不容许拖拽有虚影配置shadow: false即可

内置方法

jeBox(options) - 原始核心方法

基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走jeBox(),创建任何类型的弹层都会返回一个当前层索引,上述的options即是基础参数,另外,该文档统一采用options作为基础参数的标识例子:
var index = jeBox({
  content: 'test'
});
//拿到的index是一个重要的凭据,它是诸如jeBox.close(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); //再执行关闭  。

jeBox.closeAll() - 关闭所有层

closeAll真的可以帮上你,她可以帮你关闭所有显示的层

    jeBox.closeAll(); //疯狂模式,关闭所有层
    jeBox.closeAll('dialog'); //关闭信息框
    jeBox.closeAll('iframe'); //关闭所有的iframe层
    jeBox.closeAll('loading'); //关闭加载层
    jeBox.closeAll('tips'); //关闭所有的tips层 
        

jeBox.title(title, index) - 改变层的标题

使用方式:jeBox.title('标题变了', index)

jeBox.content(content, index) - 改变层的内容

使用方式:jeBox.content('改变了内容', index)
jeBox({
  content: '测试回调',
  button: [ {
        name: '确定',
        callback: function(index, id){
            jeBox.title('标题变了', index);
            jeBox.content('改变了内容', index);
        }
        },{
        name: '取消'
        }
  ]
}); 

jeBox.msg(content, options, end) - 提示框

我在源码中有了相对较大的篇幅来定制了这个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
});  

jeBox.alert(content, options, yes) - 普通信息框

它的弹出似乎显得有些高调,一般用于对用户造成比较强烈的关注,类似系统alert,但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数,可以设定各种你所需要的基础参数,但如果你不需要的话,直接写回调即可。
//例1
jeBox.alert('只想简单的提示');        
//例2
jeBox.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调,可以放在第三个参数中。
//例3
jeBox.alert('有了回调', function(index){
  //do something 
  jeBox.close(index);
}); 

jeBox.loading(icon, content, options) - 加载层

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);

jeBox.tips(cell,content,options) - tips提示层

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"
    });
    

jeBox.restore(index) - 还原层的原始大小

一般用于在自定义元素上触发最大化和全屏

jeBox.full(index) - 把层最大化

一般用于在自定义元素上触发最大化和全屏

jeBox.frameCell(selector, index) - 获取iframe页的DOM

当你试图在当前页获取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内容
  }
});

jeBox.frameIndex(windowName) - 获取特定iframe层的索引

此方法一般用于在iframe页关闭自身时用到。
//假设这是iframe页
var index = parent.jeBox.frameIndex(window.name); //先得到当前iframe层的索引
parent.jeBox.close(index); //再执行关闭

jeBox.frameUrl(index, url) - 重置特定iframe url

似乎不怎么常用的样子。使用方式:jeBox.frameUrl(index, 'http://www.jemui.com/')