https://github.com/athm-fe/layer
https://github.com/athm-fe/layer
dialog jquery-plugin layer modal
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/athm-fe/layer
- Owner: athm-fe
- License: mit
- Created: 2018-01-17T01:03:46.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-29T01:18:45.000Z (over 8 years ago)
- Last Synced: 2025-01-30T06:47:02.348Z (over 1 year ago)
- Topics: dialog, jquery-plugin, layer, modal
- Language: JavaScript
- Homepage: https://athm-fe.github.io/layer/
- Size: 25.4 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Layer
## TODO
* 自定义对话框和遮罩层的 `z-index`
* 自定义遮罩层 `background-color`
## Usage
可以通过两种方式来初始化 Layer 控件, 你可以根据自己的需要来进行选择. 另外, 对话框的关闭也非常方便.
### Via data attributes
无需写 JavaScript , 即可启用对话框. 在一个触发元素（比如按钮）上设置 `data-toggle="layer"` , 然后通过 `data-target="#ID"` 指定一个对应的要打开的弹出层.
```html
打开
```
### Via JavaScript
直接在对应的弹出层 DOM 上调用即可.
```javascript
$('#layer').layer(options);
```
### `data-dismiss="layer"`
除了下文中将会提到的隐藏对话框的 JS 方法外, 你也可以在对话框的某个（或某些）DOM元素上配置 `data-dismiss="layer"` 来达到目的
```javascript
关闭
内容
```
## Options
参数可以通过 data attributes 或者 JavaScript 两种方式来配置.
Name | Type | Default | Description
---- | ---- | ------- | -----------
keyboard | boolean | true | 是否支持 ESC 关闭.
backdrop | boolean or the string `'lock'` | true | 是否创建遮罩层. 默认点击遮罩层可以关闭对话框, 当值为 `'lock'` 时，不支持点击遮罩层关闭对话框.
opacity | number | 0.5 | 遮罩层的透明度, 0 到 1 之间的浮点数.
show | boolean | true | 初始化时是否打开对话框.
time | number | 0 | 自动关闭, 默认不自动关闭, 可以配置毫秒数表示关闭时间
## Methods
### `.layer(options)`
初始化当前 DOM 内容为一个对话框, 可以接受参数进行配置.
```javascript
$('#layer').layer({
keyboard: false
});
```
### `.layer('show')`
手动打开对话框. 该方法运行结束并不代表对话框已真实显示, 如果需要在真实显示后执行代码, 可以使用后面的自定义事件.
```javascript
$('#layer').layer('show');
```
### `.layer('hide')`
手动关闭对话框. 该方法运行结束并不代表对话框已真实显示, 如果需要在真实显示后执行代码, 可以使用后面的自定义事件.
```javascript
$('#layer').layer('hide');
```
### `.layer('toggle')`
手动打开或者关闭. 该方法运行结束并不代表对话框已真实显示, 如果需要在真实显示后执行代码, 可以使用后面的自定义事件.
```javascript
$('#layer').layer('toggle');
```
### `.layer('handleUpdate')`
手动调整对话框的位置, 常用于对话框尺寸发生变化的情况.
```javascript
$('#layer').layer('handleUpdate');
```
## Event
Event Type | Description
---------- | -----------
show.fe.layer | 当 `show` 方法被调用, 此事件会立即触发. 如果是通过点击按钮打开的, 则可以通过事件对象的 `relatedTarget` 获取到点击按钮.
shown.fe.layer | 对话框已呈现完毕时触发.
hide.fe.layer | 当 `hide` 方法被调用, 此事件会立即触发. 如果是通过点击按钮打开的, 则可以通过事件对象的 `relatedTarget` 获取到点击按钮.
hidden.fe.layer | 对话框已隐藏完毕时触发.
```javascript
$('#layer').on('show.fe.layer', function (e) {
// 阻止对话框打开
e.preventDefault();
// 如果是通过点击按钮打开的，则可以获取到点击按钮
e.relatedTarget;
});
```
# End
Thanks to [Bootstrap](http://getbootstrap.com/)