Stepper

@@adsense
default
diamond
cycle
Declarative style wit attribute data-role

                <div class="stepper" data-role="stepper"></div>
JavaScript style

                <div class="stepper" id="stepper"></div>

                <script>
                    $(function(){
                        $("#stepper").stepper();
                    });
                </script>

Options

Parameter Data-* Type Default value Description
steps data-steps int 3 Steps count
start data-start int 1 what will be the start (init) step
type data-type string default default(square), diamond, cycle
clickable data-clickable boolean true change step by stepper item click

Events

Event Data-* Params Description
onStep data-on-step (index, itemHTML) The event fired when the step changed
onStepClick data-on-step-click (index, itemHTML) The event fired when the stepper item is pressed

Methods

Method Description Method call
first Go to first step $("#itemid").stepper('first') or $("#itemid").data('metro.stepper').first()
prior Go to prior step $("#itemid").stepper('prior') or $("#itemid").data('metro.stepper').prior()
next Go to next step $("#itemid").stepper('next') or $("#itemid").data('metro.stepper').next()
last Go to last step $("#itemid").stepper('last') or $("#itemid").data('metro.stepper').last()

onStep event out (stepNumber, stepHTMLItem), click on Step to fire onStepClick event