@autofe/layer v0.3.1

Layer

TODO

• 自定义对话框和遮罩层的 z-index
• 自定义遮罩层 background-color

Usage

可以通过两种方式来初始化 Layer 控件, 你可以根据自己的需要来进行选择. 另外, 对话框的关闭也非常方便.

Via data attributes

无需写 JavaScript , 即可启用对话框. 在一个触发元素（比如按钮）上设置 data-toggle="layer" , 然后通过 data-target="#ID" 指定一个对应的要打开的弹出层.

<button type="button" data-toggle="layer" data-target="#layer">打开</button>

Via JavaScript

直接在对应的弹出层 DOM 上调用即可.

$('#layer').layer(options);

data-dismiss="layer"

除了下文中将会提到的隐藏对话框的 JS 方法外, 你也可以在对话框的某个（或某些）DOM元素上配置 data-dismiss="layer" 来达到目的

<div id="layer" class="layer" style="display:none;">
  <i data-dismiss="layer">关闭</i>
  <div class="layer-content">内容</div>
</div>

Options

参数可以通过 data attributes 或者 JavaScript 两种方式来配置.

Methods

.layer(options)

初始化当前 DOM 内容为一个对话框, 可以接受参数进行配置.

$('#layer').layer({
  keyboard: false
});

.layer('show')

手动打开对话框. 该方法运行结束并不代表对话框已真实显示, 如果需要在真实显示后执行代码, 可以使用后面的自定义事件.

$('#layer').layer('show');

.layer('hide')

手动关闭对话框. 该方法运行结束并不代表对话框已真实显示, 如果需要在真实显示后执行代码, 可以使用后面的自定义事件.

$('#layer').layer('hide');

.layer('toggle')

手动打开或者关闭. 该方法运行结束并不代表对话框已真实显示, 如果需要在真实显示后执行代码, 可以使用后面的自定义事件.

$('#layer').layer('toggle');

.layer('handleUpdate')

手动调整对话框的位置, 常用于对话框尺寸发生变化的情况.

$('#layer').layer('handleUpdate');

Event

$('#layer').on('show.fe.layer', function (e) {
  // 阻止对话框打开
  e.preventDefault();

  // 如果是通过点击按钮打开的，则可以获取到点击按钮
  e.relatedTarget;
});

End

Thanks to Bootstrap