To make the .px-footer
element fixed, add the .px-footer-fixed
class.
<div class="px-footer px-footer-fixed" id="footer-fixed">
...
</div>
<script>
$(function() {
$('#footer-fixed').pxFooter();
});
</script>
PxFooter plugin is initialized on pre-existing markup.
$('#footer').pxFooter();
require(['jquery', 'px/plugins/px-footer'], function($) {
...
});
You can call a public method of PxFooter instance using the syntax:
$('#footer').pxFooter('methodName');
Method name | Description | update |
Update footer position.
You need to call this method after each footer content change.
|
---|---|
destroy | Destroy the PxFooter instance. |
To use PxFooter plugin, you need to include the next scripts:
<script src="path/to/js/pixeladmin/plugins/px-footer.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-footer.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['px-footer']);
Alternatively, you can include PxFooter plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'px-footer',
files: [
'path/to/js/pixeladmin/plugins/px-footer.js',
'path/to/js/pixeladmin/directives/angular-px-footer.js',
],
},
]);
px-footer
directive
Specify template-url
attribute on the element to
load footer content from a template.
NOTE: The template-url
attribute
expects an angular expression instead of a literal string.
<px-footer>Default</px-footer>
<px-footer template-url="'path/to/footer/template.html'"></px-footer>
You can use px-footer
directive where you want.
And when the scope is destroyed the directive will be destroyed.
You can define instance
attribute to get a pointer to PxFooter element:
<px-footer instance="ctrl.$footer">...</px-footer>
function SomeController() {
// Pointer
this.$footer = null;
// ...
// Then, after the initialization, you can call plugin methods:
this.$footer('update');
});