https://github.com/cferdinandi/alerts
Simple alert messages.
https://github.com/cferdinandi/alerts
Last synced: 10 months ago
JSON representation
Simple alert messages.
- Host: GitHub
- URL: https://github.com/cferdinandi/alerts
- Owner: cferdinandi
- License: mit
- Created: 2013-05-19T00:24:36.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2020-05-05T15:46:26.000Z (over 5 years ago)
- Last Synced: 2024-10-12T08:14:00.301Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 53.7 KB
- Stars: 14
- Watchers: 2
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Alerts [](https://travis-ci.org/cferdinandi/alerts)
Simple alert messages.
[Download Alerts](https://github.com/cferdinandi/alerts/archive/master.zip) / [View the demo](http://cferdinandi.github.io/alerts/)
## Getting Started
Compiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code.
### 1. Include Alerts on your site.
If you'd like to be able to dismiss alerts, also include `alerts.js`. For basic alerts, it can be excluded.
```html
```
### 2. Add the markup to your HTML.
Create an alert by adding the `.alert` class to a `
` element. Add optional `.alert-success`, `.alert-danger`, or `.alert-warning` classes for additional colors, and to convey meaning.
```html
...
...
...
...
```
For dismissable alerts, also add an element with the `.alert-dismiss` class and `[data-alert-dismiss]` attribute. By default, dismissed alerts remain in the DOM but are hidden. To remove them entirely give `[data-alert-dmiss]` a value of `remove`.
```html
X
This is a dismissable alert. It will be hidden in the DOM.
X
This is a dismissable alert. It will be removed from the DOM entirely.
```
And that's it, you're done. Nice work!
## Installing with Package Managers
You can install Alerts with your favorite package manager.
* **NPM:** `npm install cferdinandi/alerts`
* **Bower:** `bower install https://github.com/cferdinandi/alerts.git`
* **Component:** `component install cferdinandi/alerts`
## Working with the Source Files
If you would prefer, you can work with the development code in the `src` directory using the included [Gulp build system](http://gulpjs.com/). This compiles, lints, and minifies code, and runs unit tests.
### Dependencies
Make sure these are installed first.
* [Node.js](http://nodejs.org)
* [Gulp](http://gulpjs.com) `sudo npm install -g gulp`
### Quick Start
1. In bash/terminal/command line, `cd` into your project directory.
2. Run `npm install` to install required files.
3. When it's done installing, run one of the task runners to get going:
* `gulp` manually compiles files.
* `gulp watch` automatically compiles files and applies changes using [LiveReload](http://livereload.com/).
* `gulp test` compiles files and runs unit tests.
## Options and Settings
Alerts includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.
### Global Settings
You can pass options and callbacks into Alerts through the `init()` function:
```javascript
alerts.init({
alert: '.alert', // The alert selector
dismiss: '[data-alert-dismiss]', // The dismiss button selector
initClass: 'js-alerts', // Class added to `` element when initiated
callback: function () {} // Function that's run after content is expanded or collapsed
});
```
### Use Alerts events in your own scripts
You can also call Alerts events in your own scripts.
#### dismissAlert()
Dismisses an alert.
```javascript
alerts.dismissAlert(
alert, // The alert to dismiss
remove, // [Boolean] If true, remove the alert from the DOM entirely (optional)
options // Selectors and callbacks. Same options as those passed into the init() function.
);
```
**Example**
```javascript
var alert = document.querySelector( '#some-alert' );
alerts.dismissAlert( alert );
```
#### destroy()
Destroy the current `alerts.init()`. This is called automatically during the `init` function to remove any existing initializations.
```javascript
alerts.destroy();
```
## Browser Compatibility
Alerts works with all modern browsers, including IE 6 and above. Dismissable alerts work in IE 9 and above. In unsupported browsers, the dismiss icon will not display.
## How to Contribute
In lieu of a formal style guide, take care to maintain the existing coding style. Please apply fixes to both the development and production code. Don't forget to update the version number, and when applicable, the documentation.
## License
The code is available under the [MIT License](LICENSE.md).