Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huruji/Hlayer
HLayer——easyuse、no-dependence web layer
https://github.com/huruji/Hlayer
dialog hlayer layer layers
Last synced: 3 months ago
JSON representation
HLayer——easyuse、no-dependence web layer
- Host: GitHub
- URL: https://github.com/huruji/Hlayer
- Owner: huruji
- License: mit
- Created: 2017-02-06T17:16:03.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-10T18:15:31.000Z (over 6 years ago)
- Last Synced: 2024-07-06T09:04:02.351Z (4 months ago)
- Topics: dialog, hlayer, layer, layers
- Language: HTML
- Homepage: https://huruji.github.io/Hlayer/test/index.html
- Size: 6.58 MB
- Stars: 10
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - Hlayer - dependence web layer | huruji | 10 | (HTML)
README
# Hlayer
[以中文查看](./README_zh-CN.md)
## Install
install with npm
```sh
npm install hlayer
```install width yarn
```sh
yarn add hlayer
```## Import
```js
// ES6
import hlayer from 'hlayer',
import 'hlayer/dist/hlayer.css'
```or link as a `script` and `link` in an html file.
```js
```
or with require.js
```js
define(['hlayer'], function(hlayer){
// your code
})
```
## How to useHlayer include a global variable 'hlayer', and this variable include all APIS.
Just like this, you can use function 'msg'
```js
hlayer.msg({text: 'message'})
```Every function include many params, you can see API
## API
### 1.msg
The simplest alert.
The params:
```js
contentBg: String // the background color of content, default #fff
contentColor: strgin // the font color of content, defulat #000
animateType: Number // the animation type, include 1-9, default 1
position: Number or 'random' // the position type, include 0-6, default 0
shadow: Bollean // shadow or not, default true
icon: Number // the icon type, include 1-8, default false
text: String // the content
width: String // layer width, default auto
height: String // layer height, default '50px'
time: Number // time of show, default 2000, if 'false', the layer can't close auto
```### 2.alert
The alert with title and buttons.
The params:
```js
contentBg: String // the background color of content, default #fff
contentColor: strgin // the font color of content, defulat #000
animateType: Number // the animation type, include 1-9, default 1
position: Number or 'random' // the position type, include 0-6, default 0
resize: Bollean // resize position with window resized, default true
shadow: Bollean // shadow or not, default true
icon: Number // the icon type, include 1-8, default false
text: String // the content
width: String // layer width, default '260px'
height: String // layer height, default '148px'
time: Number // time of show, default 2000, if 'false', the layer can't close auto
mainBg: String // background color of title
mainColor: String // font color of title
title: String // title Content
closeBtn: Bollean // need close button or not, default true
move: Bollean // can drag layer or not, default true
confirmBtn: Bollean // need confirm button or not, default true
confirmCb: Function // the callback of confirm button
cancelBtn: Function // need cancel buttton or not, default false
btn: Array // the Btns you need
btnCb: Array // the callbacks of btns
```### 3.loading
The loading alert.
The params:
```js
animateType: Number // the animation type, include 1-9, default 1
position: Number or 'random' // the position type, include 0-6, default 0
resize: Bollean // resize position with window resized, default true
shadow: Bollean // shadow or not, default true
time: Number // time of show, default 2000,
loadingType: Number // include 1-4, default 1
loadingColor: String // the color, default #169FE6
```### 4.iframe
The params:
```js
animateType: Number // the animation type, include 1-9, default 1
position: Number or 'random' // the position type, include 0-6, default 0
resize: Bollean // resize position with window resized, default true
shadow: Bollean // shadow or not, default true
width: String // layer width, default '700px'
height: String // layer height, default '500px'
time: Number // time of show, default false,
mainBg: String // background color of title, default #169FE6
mainColor: String // font color of title, default #fff
title: String // title Content
closeBtn: Bollean // need close button or not, default true
move: Bollean // can drag layer or not, default true
url: String // website url
```### 5.form
The params:
```js
contentBg: String // the background color of content, default #fff
contentColor: strgin // the font color of content, defulat #000
animateType: Number // the animation type, include 1-9, default 1
position: Number or 'random' // the position type, include 0-6, default 0
resize: Bollean // resize position with window resized, default true
shadow: Bollean // shadow or not, default true
text: String // the content
width: String // layer width, default '260px'
height: String // layer height, default '148px'
time: Number // time of show, default false
mainBg: String // background color of title
mainColor: String // font color of title
title: String // title Content
closeBtn: Bollean // need close button or not, default true
move: Bollean // can drag layer or not, default true
confirmBtn: Bollean // need confirm button or not, default true
confirmCb: Function // the callback of confirm button
cancelBtn: Function // need cancel buttton or not, default false
btn: Array // the Btns you need
btnCb: Array // the callbacks of btns
formType: Number // include 1-5 default 1
options: Object // only use when formType is 4 or 5, like {name:'sex', inputs: ['male', 'female']}
allowEmpty: Bollean // can be empty, defult true```
### 6.photo
use like slider alert
The params:
```js
animateType: Number // the animation type, include 1-9, default 1
position: Number or 'random' // the position type, include 0-6, default 0
resize: Bollean // resize position with window resized, default true
shadow: Bollean // shadow or not, default true
autoPlay: Bollean // play auto, default false
playTime: Number // default 5000
photos: Array // like [{img: '1.jpg', text: 'hello'}, {img: '2.jpg', text: 'world'}]
```### 7.tips
tips alert
The params:
```js
contentBg: String // the background color of content, default #fff
contentColor: strgin // the font color of content, defulat #000
animateType: Number // the animation type, include 1-9, default 1
position: String // only use 'left', 'top', 'right', 'left'
icon: Number // the icon type, include 1-8, default false
text: String // the content
width: String // layer width, default auto
height: String // layer height, default '40px'
time: Number // time of show, default 2000, if 'false', the layer can't close auto
```### 8.music
music alert
The params:
```js
contentBg: String // the background color of content, default #fff
contentColor: strgin // the font color of content, defulat #000
animateType: Number // the animation type, include 1-9, default 1
position: Number or 'random' // the position type, include 0-6, default 0
shadow: Bollean // shadow or not, default true
resize: Bollean // resize position with window resized, default true
time: Number // time of show, default false
mainBg: String // background color of title
mainColor: String // font color of title
title: String // title Content
closeBtn: Bollean // need close button or not, default true
move: Bollean // can drag layer or not, default true
photos: String // img of music
url: String // music url
autoPlay: Bollean // default true
```### 9.music
music alert
The params:
```js
contentBg: String // the background color of content, default #fff
contentColor: strgin // the font color of content, defulat #000
animateType: Number // the animation type, include 1-9, default 1
position: Number or 'random' // the position type, include 0-6, default 0
shadow: Bollean // shadow or not, default true
resize: Bollean // resize position with window resized, default true
time: Number // time of show, default false
mainBg: String // background color of title
mainColor: String // font color of title
title: String // title Content
closeBtn: Bollean // need close button or not, default true
move: Bollean // can drag layer or not, default true
photos: String // img of music
url: String // music url
autoPlay: Bollean // default true
```### 10.open
use this like
```js
hlayer.open({type: 'msg', //other msg params})
```### 11.remove
remove the layer
you can use to remove a layer
```js
var layer1 = hlayer.msg();
hlayer.remove(layer1)
```you can use to remove many layers
```js
var layer1 = hlayer.msg();
var layer2 = hlayer.msg();
hlayer.remove(layer1, layer2)
```you can use to close all layers
```js
halyer.remove();
```