layer组件

Intro

具备丰富api，支持ajax，static方式的弹层组件

Author

  name: Janking
  concat:[email protected]

Example

http://codepen.io/janking/pen/EyZRMJ

Options

@param  {String}            container           组件的执行上下文，默认是body
@param  {Boolean}           cache               是否缓存 ajax 页面
@param  {Boolean}           shadow              是否开启阴影层关闭
@param  {String}            confirmHandle       确认按钮Class
@param  {String}            closeHandle         关闭按钮Class
@param  {String}            offsetWidth         layer 宽度
@param  {String}            offsetHeight        layer 高度
@param  {String}            url                 ajax url
@param  {String}            dataType            ajax dataType:html,json,xml...
@param  {String}            method              ajax type : get/post
@param  {String}            data                ajax data
@param  {Function}          successCall         ajax success callback
@param  {Function}          errorCall           ajax error callback
@param  {Function}          showCall            回调函数 - 显示触发
@param  {Function}          confirmCall         回调函数 - 确认触发
@param  {Function}          cancelCall          回调函数 - 关闭触发

Methods

@method [showLayer]  显示层
@method [hideLayer]  隐藏层
@method [ajaxLoad]   ajax弹层
@method [cutTo]      切换layer                      [layerBoxId]

Events

/**
 * $('selector').on('layer.show',function(){});
 * $('selector').on('layer.hide',function(){});
 */

Usage

// 注意：selector必须是唯一，
// 当页面中没有div#selector，将自动创建，并 append 到 container 中
var staticLayer = $('#demoOne').IUI('layer', {
    offsetWidth: 500,
    content: $('#demoOne-template').html(),
    showCall:function(layer){
      // this  --> selector
      // layer --> Layer object
    },
    hideCall:function(layer){
      // this  --> selector
      // layer --> Layer object
    },
    successCall:function(response,xhr,layer){
      // this  --> selector
      // response -->  backend return data
      // xhr --> XmlHttpRequest object
      // layer --> Layer object
    },
    errorCall:function(response,xhr,layer){
      // this  --> selector
      // response -->  backend return data
      // xhr --> XmlHttpRequest object
      // layer --> Layer object
    }
});

$('.btn-primary').on('click', function(event) {
    staticLayer.showLayer();
});

$('#demoOne').on('layer.show',function(event,layer){
    //当 layer 显示时触发事件，此事件【先于】 showCall 回调方法，【后于】 successCall 回调方法
});

$('#demoOne').on('layer.hide',function(event,layer){
    //当 layer 隐藏时触发事件，此事件 【先于】 cancelCall 回调方法，【后于】 errorCall 回调方法
});
//ajax example 在codepen.io上不好实现，如需看动态效果，请直接下载源码
var ajaxLayer = $('#demoThree').IUI('layer',{
    url:'./ext/layer-ajaxPage.html',
    offsetWidth:600,
    successCall:function(res,ajax,deferred){
        deferred.$content.html(res);
    }
});

//切换layer
$('#demoOne').on('click','#btn-switch-1',function(){
    layerOne.cutTo('#demoTwo');
});

$('#demoTwo').on('click','#btn-switch-2',function(){
    layerTwo.cutTo('#demoOne');
});

Attention

• 在遇到层与层切换的需求时，不建议用两个layer，可以在一个layer中划分区域来显示隐藏

• 因为已经用一种css方式实现垂直水平居中，不再需要js计算，兼容IE8+，故在 IUI 1.2.0 后 layer 删除了vertical resize，开发者在更新以前项目的 IUI.js 时，需要注意一下

• 2016-07-09 新增cutTo方法用于layer切换。