steps

steps

by mirontoli

HTML

<div id="steps">
    <ul>
        <li data-step="person">p</li>
        <li data-step="dream">d</li>
        <li data-step="acc">a</li>
        <li data-step="econ">e</li>
    </ul>
    <div id="person">
        <p>person</p>
    </div>
    <div id="dream">
        <p>dream</p>
    </div>
    <div id="acc">
        <p>acc</p>
    </div>
    <div id="econ">
        <p>econ</p>
    </div>
</div>

CSS

.left {
    background:green;
}
.right {
    background:blue;
}

JavaScript

$.widget("ui.steps", {
        _create: function() {
            var $self = this.element;
            var $list = $self.children("ul");
            var $lis = $list.children("li");
            for (var i = 0; i < $lis.length; i++) {
                var $li = jQuery($lis.get(i));
                    
                $li.addClass("pointer not-processed");
                var $span = $li.children("span");
                $span.addClass("step-text");
                if (i != 0) {
                    jQuery("<span>&nbsp;</span>").addClass("left").prependTo($li);
                }
                if (i != ($lis.length-1)) {
                    jQuery("<span>&nbsp;</span>").addClass("right").appendTo($li);
                }
                var contentId = $li.data("step");
                var $content = jQuery("#" + contentId);
                $li.data("content", $content);
            }
            $self.on("click", "li", function() {
                var tabId = $(this).data("step");
                select(tabId);
                $self.trigger("meglerfrontStepsSelect", tabId);
            });
            $self.data("steps", $lis);
            //react on windows service
            jQuery(window).on({
                resize: function () {
                    var doit = $self.data("resize-timeout");
                    clearTimeout(doit);
                    doit = setTimeout(function() { $self.meglerfrontSteps("resize"); }, 100);
                    $self.data("resize-timeout", doit);
                }
            });
        },
        select: function(t) {
            var $steps = $self.data("steps");
            if ($steps) {
                $steps.removeClass("selected");
                $steps.each(function() {
                    $(this).data("content").removeClass("selected");
                });
                var $li;
                if (t) {
                    $li = $steps.filter("[data-step='" + t + "']");
                }
                else {
         ...