Code Monkey home page Code Monkey logo

hlayer's Introduction

forks stars issues css HTML HTML gulp

Hlayer

以中文查看

Install

install with npm

npm install hlayer

install width yarn

yarn add hlayer

Import

// ES6
import hlayer from 'hlayer',
import 'hlayer/dist/hlayer.css'

or link as a script and link in an html file.

<link href="dist/hlayer.css"></link>
<script src="dist/hlayer.js"></script>

or with require.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'

hlayer.msg({text: 'message'})

Every function include many params, you can see API

API

1.msg

The simplest alert.

The params:

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:

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:

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:

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:

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:

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:

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:

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:

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

hlayer.open({type: 'msg', //other msg params})

11.remove

remove the layer

you can use to remove a layer

var layer1 = hlayer.msg();
hlayer.remove(layer1)

you can use to remove many layers

var layer1 = hlayer.msg();
var layer2 = hlayer.msg();
hlayer.remove(layer1, layer2)

you can use to close all layers

halyer.remove();

hlayer's People

Contributors

huruji avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

flywor

hlayer's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.