弹层 Layer组件

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

代码演示

layer-static layer-ajax layer-cutto
layer-static
Layer static 的用法
查看代码 
<script type="text/html" id="tpl-static">
  <!-- layer header -->
  <div class="layer-header clearfix">
    <div class="pull-left"><div class="layer-title">标题</div></div>
    <div class="pull-right"><a href="javascript:;" class="btn-close icon-close"></a></div>
  </div>
  <!-- layer header end -->
  <!-- layer body -->
  <div class="layer-body">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- layer body end -->
  <!-- layer footer -->
  <div class="layer-footer">
      <button type="button" class="btn btn-primary btn-sm btn-confirm">确定</button>
      <button type="button" class="btn btn-default btn-sm btn-close" data-dismiss="modal">取消</button>
  </div>
  <!-- layer footer end -->
</script>
          
/**
 * static layer demo
 * 静态层是指层内容片段已经存在于dom结构中，layer的作用是负责显示/隐藏
 */
var layerStatic = $('#layer-static').IUI('layer',{
  offsetWidth:700,
  content:$('#tpl-static').html()
});

// layerStatic === $('#layer-static').data('layer')   // true

$('.J-layer-0').click(function(event) {
  layerStatic.showLayer();
});

layer-ajax
Layer ajax load 的用法
查看代码 
/**
 * ajax layer demo
 *
 * 先初始化一个没有 content 的Layer
 * #layer-ajax 是随意拟定的，最终生成的layer Id 就是 #layer-ajax
 * 由于是本站是Jekyll搭建的静态页，success 返回的只是一段html,需要将res转为json-object,在实际项目中并不需要。
 */

var layerAjax = $('#layer-ajax').IUI('layer',{
  offsetWidth:700,
  url:'/data/ajaxLayer.json',
  cache:false,
  successCall:function(res,xhr,layer){
    var data = JSON.parse(res);
    var html = data.html;
    this.find('.layer-content').html(html);
  },
  confirmCall:function(event,layer){
    this.find('form').off('submit').on('submit', function(event) {
      event.preventDefault();
      $.alert({
        text:'<span style="margin-right:10px;font-size:20px;" class="glyphicon glyphicon-ok-sign"></span>触发表单提交事件'
      });
    }).trigger('submit');
  },
  cancelCall:function(event,layer){
    $.alert({
      text:'<span style="margin-right:10px;font-size:20px;" class="glyphicon glyphicon-ok-sign"></span>触发关闭事件'
    });
  }
});

$('.J-layer-1').click(function(event) {
  layerAjax.ajaxLoad();
});

layer-cutto
Layer cutto 的用法
查看代码 
<script type="text/html" id="tpl-one">
<!-- layer header -->
  <div class="layer-header clearfix">
    <div class="pull-left"><div class="layer-title">标题</div></div>
    <div class="pull-right"><a href="javascript:;" class="btn-close icon-close"></a></div>
  </div>
<!-- layer header end -->
<!-- layer body -->
  <div class="layer-body">
    这是弹层一
  </div>
  <!-- layer body end -->
  <!-- layer footer -->
  <div class="layer-footer">
      <button type="button" class="btn btn-primary btn-sm btn-next">切换</button>
      <button type="button" class="btn btn-default btn-sm btn-close" data-dismiss="modal">取消</button>
  </div>
  <!-- layer footer end -->
</script>
  <script type="text/html" id="tpl-two">
  <!-- layer header -->
  <div class="layer-header clearfix">
    <div class="pull-left"><div class="layer-title">标题</div></div>
    <div class="pull-right"><a href="javascript:;" class="btn-close icon-close"></a></div>
  </div>
  <!-- layer header end -->
<!-- layer body -->
  <div class="layer-body">
    这是弹层二
  </div>
  <!-- layer body end -->
  <!-- layer footer -->
  <div class="layer-footer">
      <button type="button" class="btn btn-primary btn-sm btn-prev">切换</button>
      <button type="button" class="btn btn-default btn-sm btn-close" data-dismiss="modal">取消</button>
  </div>
  <!-- layer footer end -->
</script>
          
/**
 * cutto layer demo
 * 两个不同层之间切换的用法
 */

var layerOne = $('#layer-one').IUI('layer',{
  offsetWidth:700,
  content:$('#tpl-one').html()
});

var layerTwo = $('#layer-two').IUI('layer',{
  offsetWidth:700,
  content:$('#tpl-two').html()
});


$('.J-layer-2').click(function(event) {
  layerTwo.showLayer();
});

$('body').on('click', '.btn-prev', function(event) {
  event.preventDefault();
  layerTwo.cutTo('#layer-one');
});

$('body').on('click', '.btn-next', function(event) {
  event.preventDefault();
  layerOne.cutTo('#layer-two');
});

##API

属性 说明 类型 默认值
container 组件的执行上下文环境 String body
cache 是否缓存 ajax 页面 Boolean true
shadow 是否开启阴影层关闭 Boolean true
confirmHandle 侦听确认按钮的className String .btn-confirm
closeHandle 侦听取消按钮的className String .btn-cancel
offsetWidth layer 宽度 Number/String auto
offsetHeight layer 高度 Number/String auto
url ajax url String -
dataType ajax dataType String html
data ajax data Object null
method ajax method String GET
content Layer的内容注入接口，仅对 static layer 有效 String -
showCall showLayer的回调函数 Function -
hideCall hideLayer的回调函数，在cancelCall之后执行 Function -
cancelCall 点击 closeHandle 元素时触发回调 Function -
confirmCall 点击 confirmHandle 元素时触发回调 Function -
successCall ajax success callback,仅对 ajax layer 有效 Function -
errorCall ajax error callback,仅对 ajax layer 有效 Function -

##Methods

如果回调满足不了需求，就试试事件侦听吧，代码耦合度会比回调要高！

// layer showLayer 触发
$('layerId').on('layer.show',function(event,layer){
  // codes ...
});

// layer hideLayer 触发
$('layerId').on('layer.hide',function(event,layer){
  // codes ...
});

如果您发现本页有什么问题，欢迎来提单 Issue : https://github.com/Janking/infinite-ui/issues