Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
You can change the default active step by adding the .active class
to the targeted .wizard-steps > li element.
Create a wizard that acts like a panel by adding the .wizard-bordered
class to the .wizard.
PxWizard plugin is initialized on pre-existing markup.
data-, for example:
<div class="wizard" data-min-step-width="150">...</div>.
$('.wizard').pxWizard(options);
| Option | Default | Description |
|---|---|---|
| minStepWidth | 200 | Minimal wizard's step width in pixels. |
require(['jquery', 'px/plugins/px-wizard'], function($) {
...
});
You can call a public method of PxWizard instance using the syntax:
$('.wizard').pxWizard('methodName', argumentOne, argumentTwo);
| Method name | Description |
|---|---|
| resizeStepItems | Force step elements resize. |
| getActiveStepIndex | Get the index of the active step. |
| getActivePane | Returns the active content element as a jQuery object. |
| getStepCount | Get the number of steps. |
| goTo(stepIndex) | Jump to another step by the specified index. |
| getPaneByIndex(stepIndex) | Returns a content element as a jQuery object by the specified index. |
| goNext |
Jump to the next step. NOTE: Thefinish() method will be invoked if the active step is the last.
|
| goPrev | Jump to the previous step. |
| finish | Finish and freeze the wizard. |
| isFinished | Returns whether the wizard is finished. |
| freeze | Freeze the wizard. Frozen wizard will not respond to user actions. |
| unfreeze | Unfreeze the wizard. |
| isFrozen | Returns whether the wizard is frozen. |
| reset | Reset the wizard state (finished, frozen) and jump to the first step. |
| destroy | Destroy the PxWizard instance. |
You can bind some actions on buttons inside the .wizard-content container using the data-wizard-action attribute:
...
...
...
| Action name | Description |
|---|---|
| prev | Jump to the previous step. |
| next | Jump to the next step. |
| finish | Finish the wizard. |
You can subscribe on wizard events using the syntax:
$('.wizard').on('event.px.wizard', function(e) {
// ...
// Preventable events can be prevented:
// e.preventDefault();
});
| Event | Description |
|---|---|
| stepchange* |
This event is fired when the active step is changing. NOTE: The event handler receives a data hash as a second argument. The hash contains active and next step indexes. |
| stepchanged |
This event is fired when the active step has changed. NOTE: The event handler receives a data hash as a second argument. The hash contains previous and active step indexes. |
| finish* | This event is fired immediately when the finish() method is called. |
| finished | This event is fired when the wizard has finished. |
| frozen | This event is fired when the wizard has frozen. |
| unfrozen | This event is fired when the wizard has unfrozen. |
| reseted | This event is fired when the wizard has reseted. |
| destroy* | This event is fired immediately when the destroy() method is called. |
To use px-wizard plugin, you need to include the next scripts:
<script src="path/to/js/pixeladmin/plugins/px-wizard.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-wizard.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['px-wizard']);Alternatively, you can include px-wizard plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'px-wizard',
files: [
'path/to/js/pixeladmin/plugins/px-wizard.js',
'path/to/js/pixeladmin/directives/angular-px-wizard.js',
],
},
]);
px-wizard directive
You can use px-wizard 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 px-wizard element:
<px-wizard instance="ctrl.$wizard"></px-wizard>
function SomeController() {
// Pointer
this.$wizard = null;
// ...
// Then, after the initialization, you can call plugin methods:
this.$wizard('getActivePane');
this.$wizard('goTo', 2);
});
px-wizard's options can be specified as attributes. All options expect an angular expression instead of a literal string.
<px-wizard min-step-width="400"></px-wizard>
Event handlers can be bound using attributes:
<px-wizard on-finished="ctrl.finished"
on-stepchange="ctrl.stepChange"
on-stepchanged="ctrl.stepChanged"></px-wizard>
function SomeController() {
this.finished = function(e) { ... }
this.stepChange = function(e, data) { ... }
this.stepChanged = function(e, data) { ... }
});