By default, PxBlockAlert plugin places alerts at the top of the container.
To change this behavior, you need to insert the .px-block-alerts
element to targeted position manually.
Tab content
.px-content
$('#element').pxBlockAlert('Alert content
', options);
| Option | Default | Description |
|---|---|---|
| type | null |
Alert type:
|
| style | null |
Alert style:
|
| namespace | default | Add alert to the given namespace. |
| animate | true | Animate alert. |
| timer | 0 | Automatically close alert after timer seconds. 0 - do not close alert automatically. |
| closeButton | true | Show close button. |
require(['jquery', 'px/plugins/px-block-alert'], function($) {
...
});
$('#element').pxBlockAlert('methodName', arg1, arg2, ...);
| Method name | Description |
|---|---|
| remove($alert, animate = true) | Remove the given $alert. |
| clear(namespace = 'default', animate = true) | Remove all alerts within the given namespace. |
| clearAll(animate = true) | Remove all alerts. |
| destroy | Remove the .px-block-alerts container with all alerts. |
To use PxBlockAlert plugin, you need to include the next scripts:
<script src="path/to/js/pixeladmin/plugins/px-block-alert.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-block-alert.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['px-block-alert']);Alternatively, you can include PxBlockAlert plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'px-block-alert',
files: [
'path/to/js/pixeladmin/plugins/px-block-alert.js',
'path/to/js/pixeladmin/directives/angular-px-block-alert.js',
],
},
]);
$pxBlockAlert service
Inject $pxBlockAlert service into a controller to create alerts.
By default it comes with five methods:
NOTE: Define options.container attribute to
specify parent container (Default: .px-content).
For example, the next lines of code are equivalent:
// jQuery
$('#some-block').pxBlockAlert('Alert text.', { type: 'danger', closeButton: false });
// Angular
$pxBlockAlert.add('Alert text.', { container: '#some-block', type: 'danger', closeButton: false });