click
/focus
event, to an input element.
Place hidden content within the .expanding-input-content
container.
.expanding-input
on click,
add the data-collapse="true"
attribute to the <button>
.
PxExpandingInput plugin is initialized on pre-existing markup.
$('.expanding-input').pxExpandingInput();
require(['jquery', 'px/plugins/px-expanding-input'], function($) {
...
});
You can call a public method of PxExpandingInput instance using the syntax:
$('.expanding-input').pxExpandingInput('methodName');
Method name | Description |
---|---|
expand | Show the .expanding-input-content element. |
collapse | Hide the .expanding-input-content element. |
destroy | Destroy the PxExpandingInput instance. |
You can subscribe on expanding input events using the syntax:
$('.expanding-input').on('event.px.expanding-input', function(e) {
// ...
// Preventable events can be prevented:
// e.preventDefault();
});
Event | Description |
---|---|
expand* | This event is fired immediately when the expand() method is called. |
expanded | This event is fired when the expanding input has expanded. |
collapse* | This event is fired immediately when the collapse() method is called. |
collapsed | This event is fired when the expanding input has collapsed. |
To use PxExpandingInput plugin, you need to include the next scripts:
<script src="path/to/js/pixeladmin/plugins/px-expanding-input.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-expanding-input.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['px-expanding-input']);
Alternatively, you can include PxExpandingInput plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'px-expanding-input',
files: [
'path/to/js/pixeladmin/plugins/px-expanding-input.js',
'path/to/js/pixeladmin/directives/angular-px-expanding-input.js',
],
},
]);
px-expanding-input
directive
You can use px-expanding-input
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 PxExpandingInput element:
<px-expanding-input instance="ctrl.$expandingInput">...</px-expanding-input>
function SomeController() {
// Pointer
this.$expandingInput = null;
// ...
// Then, after the initialization, you can call plugin methods:
this.$expandingInput('expand');
this.$expandingInput('collapse');
});
expand
expand option have an angular $watch listener applied to it.
Values:
true
- show hidden content.false
- hide content.
<px-expanding-input expand="ctrl.expanded">...</px-expanding-input>
Event handlers can be bound using attributes:
<px-expanding-input on-collapse="ctrl.collapse" on-expanded="ctrl.expanded">
...
</px-expanding-input>
function SomeController() {
this.collapse = function(e) { ... };
this.expanded = function(e) { ... };
});