Compare commits
No commits in common. "master" and "v1.0.0" have entirely different histories.
3 changed files with 28 additions and 139 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
module.exports = grunt => {
|
module.exports = function (grunt) {
|
||||||
require('load-grunt-tasks')(grunt);
|
require('load-grunt-tasks')(grunt);
|
||||||
|
|
||||||
grunt.initConfig({
|
grunt.initConfig({
|
||||||
|
|
|
||||||
63
package.json
63
package.json
|
|
@ -1,37 +1,28 @@
|
||||||
{
|
{
|
||||||
"name": "bs-advanced-alert",
|
"name": "bs-advanced-alert",
|
||||||
"version": "1.0.1",
|
"version": "1.0.0",
|
||||||
"description": "Extra functionality for the bootstrap alert component",
|
"description": "Extra functionality for the bootstrap alert component",
|
||||||
"homepage": "https://gitlab.com/AdeAttwood/bs-advanced-alert",
|
"main": "index.js",
|
||||||
"main": "index.js",
|
"scripts": {
|
||||||
"scripts": {
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
},
|
||||||
},
|
"author": "",
|
||||||
"keywords": [
|
"license": "ISC",
|
||||||
"bootstrap",
|
"dependencies": {
|
||||||
"jquery",
|
"bootstrap": "^3.3.7",
|
||||||
"alert",
|
"jquery": "^3.2.1"
|
||||||
"advanced"
|
},
|
||||||
],
|
"devDependencies": {
|
||||||
"author": {
|
"babel-core": "^6.26.0",
|
||||||
"name": "Ade Attwood"
|
"babel-preset-env": "^1.6.0",
|
||||||
},
|
"eslint": "^4.8.0",
|
||||||
"license": "BSD-2-Clause",
|
"eslint-plugin-prettier": "^2.3.1",
|
||||||
"dependencies": {
|
"eslint-plugin-prettify": "^2.0.2",
|
||||||
"bootstrap": "^3.3.7",
|
"grunt": "^1.0.1",
|
||||||
"jquery": "^3.2.1"
|
"grunt-babel": "^7.0.0",
|
||||||
},
|
"grunt-contrib-uglify": "^3.1.0",
|
||||||
"devDependencies": {
|
"grunt-eslint": "^20.1.0",
|
||||||
"babel-core": "^6.26.0",
|
"load-grunt-tasks": "^3.5.2",
|
||||||
"babel-preset-env": "^1.6.0",
|
"prettier": "^1.7.3"
|
||||||
"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
102
readme.md
|
|
@ -1,102 +0,0 @@
|
||||||
# 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