0.0.2 • Published 2 years ago
alerty v0.0.2
Alerty 
A simple, light and pretty pure javascript for developing browser dialogs and notifications which is following Google's Material Design guidelines. Obviously, it is responsive and no need other library.
Usage
you can install alerty with npm
npm install alertyvar alerty = require('alerty');or with bower
bower install alertyAlternatively, download the package and reference the JavaScript and CSS files manually:
<script src="dist/js/alerty.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/css/alerty.min.css">Examples
you can run example local with gulp if node has been installed:
cd alerty
npm install
gulpor test it on jsfiddle
Usage
For alert dialog
alerty.alert('Hello, World!');For toasts
alerty.toasts('Something has been done!');For confirm dialog
alerty.confirm('Are you sure?', funtion() {
console.log('ok callback'); // do something
}, function(){
console.log('cancel callback'); // do something
})For prompt dialog
alerty.prompt(
'Please write some thing',
{
inputType: 'email', // input type
inputPlaceholder: 'fill the blank'
},
function(value){
alerty.alert('value you typed is: <b>'+value+'</b>')
}
)API
alerty.toasts(content, opts, callback)
| param | type | description |
|---|---|---|
| content | string | message to display |
| opts | object | options, optional |
| callback | function | callback after alerty closed |
opts:
| name | type | default | description |
|---|---|---|---|
| place | string | 'bottom' | 'top' can be choosed |
| bgColor | string | '#323232' | background color of dialog body |
| fontColor | string | '#fff' | font color of dialog message |
| time | number | 2000 | time delay for dialog auto closed |
alerty.alert(content, opts, onOk)
| param | type | description |
|---|---|---|
| content | string | message to display |
| opts | object | options, optional |
| onOk | function | callback after click ok button |
opts:
| name | type | default | description |
|---|---|---|---|
| title | string | '' | title of dialog |
| okLabel | string | 确定 | ok button text |
alerty.confirm(content, opts, onOk, onCancel)
| param | type | description |
|---|---|---|
| content | string | message to display |
| opts | object | options |
| onOk | function | callback after click ok button |
| onCancel | function | callback after click cancel button |
opts:
| name | type | default | description |
|---|---|---|---|
| title | string | '' | title of dialog |
| okLabel | string | 确定 | ok button text |
| cancelLabel | string | 取消 | cancel button text |
alerty.prompt(content, opts, onOk, onCancel)
| param | type | description |
|---|---|---|
| content | string | message to display |
| opts | object | options |
| onOk | function | callback after click ok button, argument value, like above example |
| onCancel | function | callback after click cancel button |
opts:
| name | type | default | description |
|---|---|---|---|
| title | string | '' | title of dialog |
| okLabel | string | 确定 | ok button text |
| cancelLabel | string | 取消 | cancel button text |
| inputType | string | 'text' | input type, such as 'password', 'email' |
| inputPlaceholder | 'text' | '' | input placeholder text |
| inputValue | 'text' | '' | default input value |
Browser support
Alerty is tested and works in:
- IE8+
- Latest Stable: Firefox, Chrome, Safari, Edge
- Android 4.0 and Latest
- iOS7 and Latest
Contributing
If you have good ideas or suggestions, please issue or pull request
License
Alerty is licensed under MIT