JSFiddle - React, Tailwind, and code Playground

by akoptsov

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/smoothness/jquery-ui.css">

JavaScript

(function($) {
    var _meta = {
        name: 'wizard',
        event: function(eventname) {
            //widget-style event name
            return this.name + eventname;
        }
    };

    var delegate = function(context, caller, action) {
        if ($.isFunction(action)) {
            if ($.isFunction(caller)) {
                caller.call(context, action);
            } else {
                action();
            }
        }
    };

    $.widget('ui.' + _meta.name, {
        options: {
            dialog: { resizable: true, draggable: true, modal: true },
            strings: { back: 'Back', next: 'Next', finish: 'Finish' },
            back: function(action) { action(); },
            next: function(action) { action(); },
            finish: function(action) { action(); }
        },
        _init: function() {
            var self = this;
            var options = self.options;
            var form = self.element;

            options.dialog.buttons = options.dialog.buttons || [];

            var btn = {
                finish: {
                    text: options.strings.finish,
                    click: function(event) {
                        var $form = $(this);
                        self.disable();
                        delegate(this, options.finish, function() {
                            $form.wizard('destroy');
                            if (self) {
                                self.enable();
                            }
                        });
                    }
                },
                back: {
                    text: options.strings.back,
                    click: function(event) {
                        self.disable();
                        delegate(this, options.back, function() {
                            self._trigger('selectpage', event, options.pageIndex - 1);
                            self.enable();
                        });
                    }
                },
                next: {
     ...