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: 9 days 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 (about 6 years ago)
Last Synced: 2024-06-04T14:51:15.919Z (24 days 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

Lists

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 use

Hlayer 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:

### 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:

### 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:

### 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:

### 9.music

music alert

The params:

### 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();
```