Compare commits
2 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
0a6c8bfe46 | ||
|
|
e846efa7c7 |
3 changed files with 139 additions and 28 deletions
|
|
@ -1,4 +1,4 @@
|
|||
module.exports = function (grunt) {
|
||||
module.exports = grunt => {
|
||||
require('load-grunt-tasks')(grunt);
|
||||
|
||||
grunt.initConfig({
|
||||
|
|
|
|||
63
package.json
63
package.json
|
|
@ -1,28 +1,37 @@
|
|||
{
|
||||
"name": "bs-advanced-alert",
|
||||
"version": "1.0.0",
|
||||
"description": "Extra functionality for the bootstrap alert component",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"bootstrap": "^3.3.7",
|
||||
"jquery": "^3.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"eslint": "^4.8.0",
|
||||
"eslint-plugin-prettier": "^2.3.1",
|
||||
"eslint-plugin-prettify": "^2.0.2",
|
||||
"grunt": "^1.0.1",
|
||||
"grunt-babel": "^7.0.0",
|
||||
"grunt-contrib-uglify": "^3.1.0",
|
||||
"grunt-eslint": "^20.1.0",
|
||||
"load-grunt-tasks": "^3.5.2",
|
||||
"prettier": "^1.7.3"
|
||||
}
|
||||
{
|
||||
"name": "bs-advanced-alert",
|
||||
"version": "1.0.1",
|
||||
"description": "Extra functionality for the bootstrap alert component",
|
||||
"homepage": "https://gitlab.com/AdeAttwood/bs-advanced-alert",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [
|
||||
"bootstrap",
|
||||
"jquery",
|
||||
"alert",
|
||||
"advanced"
|
||||
],
|
||||
"author": {
|
||||
"name": "Ade Attwood"
|
||||
},
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"bootstrap": "^3.3.7",
|
||||
"jquery": "^3.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"eslint": "^4.8.0",
|
||||
"eslint-plugin-prettier": "^2.3.1",
|
||||
"eslint-plugin-prettify": "^2.0.2",
|
||||
"grunt": "^1.0.1",
|
||||
"grunt-babel": "^7.0.0",
|
||||
"grunt-contrib-uglify": "^3.1.0",
|
||||
"grunt-eslint": "^20.1.0",
|
||||
"load-grunt-tasks": "^3.5.2",
|
||||
"prettier": "^1.7.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
102
readme.md
Normal file
102
readme.md
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
# Bootstrap Advanced Alert
|
||||
|
||||
## Basic usage
|
||||
|
||||
Working in the same way as the standard alert component.
|
||||
|
||||
~~~html
|
||||
<div class="alert alert-warning in">
|
||||
<a href="#" class="close" data-dismiss="aalert">×</a>
|
||||
<div class="alert-content">
|
||||
<strong>Warning!</strong> There was a problem.
|
||||
</div>
|
||||
</div>
|
||||
~~~
|
||||
|
||||
## Adding open and close effects.
|
||||
|
||||
You can add open and close effects the same as the standard component. The available effects are `slide` and `fade`, classes can be added to the alert component to apply the effects. If no class is added the alert will just hide.
|
||||
|
||||
~~~html
|
||||
<div class="alert alert-success slide in">
|
||||
<a href="#" class="close" data-dismiss="aalert">×</a>
|
||||
<div class="alert-content">
|
||||
<strong>Success!</strong> Well done.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info fade in">
|
||||
<a href="#" class="close" data-dismiss="aalert">×</a>
|
||||
<div class="alert-content">
|
||||
<strong>Info!</strong> This is some info.
|
||||
</div>
|
||||
</div>
|
||||
~~~
|
||||
|
||||
## Timeout
|
||||
|
||||
You can add a `data-timeout` attribute to close the alert after a set amount of time set in milliseconds.
|
||||
|
||||
~~~html
|
||||
<div class="alert alert-info fade in" data-timeout="1000">
|
||||
<a href="#" class="close" data-dismiss="aalert">×</a>
|
||||
<div class="alert-content">
|
||||
<strong>Info!</strong> This is some info.
|
||||
</div>
|
||||
</div>
|
||||
~~~
|
||||
|
||||
The above sample will close after 1 second
|
||||
|
||||
## jQuery extension api
|
||||
|
||||
### `changeTo`
|
||||
|
||||
This will change the alert style. The below snippet with change the `alert-` class to `alert-error`.
|
||||
|
||||
~~~js
|
||||
$('my-alert').aalert('changeTo', 'error');
|
||||
~~~
|
||||
|
||||
### `changeContentTo`
|
||||
|
||||
The will change the content of the alert. The function takes a optional second parameter `open`. This will open the alert after the content has been changed and is `true` by default.
|
||||
|
||||
~~~js
|
||||
$('.my-alert').aalert('changeContentTo', 'Some new content', false);
|
||||
~~~
|
||||
|
||||
### `closeAfter`
|
||||
|
||||
This will close the alert after the specified time
|
||||
|
||||
~~~js
|
||||
$('my-alert').aalert('closeAfter', 2000);
|
||||
~~~
|
||||
|
||||
### `toggle`
|
||||
|
||||
~~~js
|
||||
$('my-alert').aalert('toggle');
|
||||
~~~
|
||||
|
||||
### `close`
|
||||
|
||||
~~~js
|
||||
$('my-alert').aalert('close');
|
||||
~~~
|
||||
|
||||
### `open`
|
||||
|
||||
~~~js
|
||||
$('my-alert').aalert('open');
|
||||
~~~
|
||||
|
||||
## Changing functions
|
||||
|
||||
~~~js
|
||||
$('.my-alert')
|
||||
.aalert('changeTo', 'success')
|
||||
.aalert('changeContentTo', 'Success message')
|
||||
.aalert('closeAfter', 3000);
|
||||
~~~
|
||||
Loading…
Reference in a new issue