You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
2.7 KiB
121 lines
2.7 KiB
#SweetAlert
|
|
|
|
An awesome replacement for JavaScript's alert.
|
|
|
|
|
|
|
|
[See it in action!](http://tristanedwards.me/sweetalert)
|
|
|
|
[Learn how to use it!](https://www.ludu.co/lesson/how-to-use-sweetalert)
|
|
|
|
#Usage
|
|
|
|
You can install SweetAlert through bower:
|
|
|
|
```bash
|
|
bower install sweetalert
|
|
```
|
|
|
|
Or through npm:
|
|
|
|
```bash
|
|
npm install sweetalert
|
|
```
|
|
|
|
Alternatively, download the package and reference the JavaScript and CSS files manually:
|
|
|
|
```html
|
|
<script src="lib/sweet-alert.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">
|
|
```
|
|
|
|
#Tutorial
|
|
|
|
The easiest way to get started is follow the [SweetAlert tutorial on Ludu](https://www.ludu.co/lesson/how-to-use-sweetalert)!
|
|
|
|
#Examples
|
|
|
|
The most basic message:
|
|
|
|
```javascript
|
|
sweetAlert("Hello world!");
|
|
```
|
|
|
|
A message signaling an error:
|
|
|
|
```javascript
|
|
sweetAlert("Oops...", "Something went wrong!", "error");
|
|
```
|
|
|
|
A warning message, with a function attached to the "Confirm"-button:
|
|
|
|
```javascript
|
|
sweetAlert({
|
|
title: "Are you sure?",
|
|
text: "You will not be able to recover this imaginary file!",
|
|
type: "warning",
|
|
showCancelButton: true,
|
|
confirmButtonColor: "#DD6B55",
|
|
confirmButtonText: "Yes, delete it!",
|
|
closeOnConfirm: false,
|
|
html: false
|
|
}, function(){
|
|
swal("Deleted!",
|
|
"Your imaginary file has been deleted.",
|
|
"success");
|
|
});
|
|
```
|
|
|
|
A prompt modal where the user's input is logged:
|
|
|
|
```javascript
|
|
sweerAlert({
|
|
title: "An input!",
|
|
text: 'Write something interesting:',
|
|
type: 'input',
|
|
showCancelButton: true,
|
|
closeOnConfirm: false,
|
|
animation: "slide-from-top"
|
|
}, function(inputValue){
|
|
console.log("You wrote", inputValue);
|
|
});
|
|
```
|
|
|
|
[View more examples](http://tristanedwards.me/sweetalert)
|
|
|
|
|
|
#Browser compatibility
|
|
|
|
SweetAlert works in all major browsers (yes, even IE). Some details:
|
|
|
|
- **IE8**: Works, but icons (checkmark, x-mark...) are hidden.
|
|
- **IE9**: Works, but icons are not animated.
|
|
- **IE10+**: Works!
|
|
- **Safari 4+**: Works!
|
|
- **Firefox 3+**: Works!
|
|
- **Chrome 14+**: Works!
|
|
- **Opera 15+**: Works!
|
|
|
|
|
|
#Contributing
|
|
|
|
If you want to contribute:
|
|
|
|
- Fork the repo
|
|
|
|
- Make sure you have [Node](http://nodejs.org/), [NPM](https://www.npmjs.com/) and [Gulp](http://gulpjs.com/) installed. When in the SweetAlert directory, run the command:
|
|
```
|
|
npm install
|
|
```
|
|
to install the dependencies. Then run ```gulp``` while working to automatically minify the SCSS and JS-files.
|
|
|
|
- After you're done, make a pull request and wait for approval! :)
|
|
|
|
|
|
|
|
#Related projects
|
|
|
|
* [SweetAlert for Android](https://github.com/pedant/sweet-alert-dialog)
|
|
* [SweetAlert for Bootstrap](https://github.com/lipis/bootstrap-sweetalert)
|
|
* [SweetAlert for AngularJS](https://github.com/oitozero/ngSweetAlert)
|
|
|
|
|