Wizardcomponent

Html definition

<div class="wizard" id="wizard">
    <div class="steps">
        <div class="step">Page 1</div>
        <div class="step">Page 2</div>
        <div class="step">Page 3</div>
    </div>
</div>

JavaScript

$(function(){
    $('#wizard').wizard({
            stepper: true, // show stepper, see http://metroui.org.ua/stepper.html
            stepperType: 'default', // stepper type, see http://metroui.org.ua/stepper.html
            stepperClickable: false, // set to true if you can switch page over click on stepper
            startPage: 'default', // if this value ne 'default' wizard started from this page
            locale: $.Metro.currentLocale, //'en', 'ua', 'ru', ... more languages defined in metro-locale.js
            finishStep: 'default', // 'default' - last page or int - number of page
            buttons: { //show or hide buttons
                cancel: true,
                help: true,
                prior: true,
                next: true,
                finish: true
            },

            // Buttons click methods, page change events
            onCancel: function(page, wiz){...},
            onHelp: function(page, wiz){...},
            onPrior: function(page, wiz){...},
            onNext: function(page, wiz){...},
            onFinish: function(page, wiz){...},
            onPage: function(page, wiz){...},
            onStepClick: function(step){...}
    });
});

Customize buttons

$(function(){
    $('#wizard').wizard({
        buttons: {
            cancel: {
                show: true,
                title: "Cancel wizard",
                cls: "warning",
                group: "right"
            },
            help: {
                show: true,
                title: "Help Me!",
                cls: "button primary",
                group: "right"
            },
            prior: {
                show: true,
                title: "Previous page",
                group: "left",
                cls: "info"
            },
            next: {
                show: true,
                title: "Next page",
                group: "left",
                cls: "info"
            },
            finish: {
                show: true,
                title: "Finish step and Go!",
                group: "left",
                cls: "danger"
            }
        }
    });
});