Skip to content

Instantly share code, notes, and snippets.

@DylanFM

DylanFM/stepper.html

Forked from chrislloyd/stepper.html
Created January 13, 2010 01:53
Download ZIP

Revisions

  1. @chrislloyd chrislloyd revised this gist Jan 13, 2010. 1 changed file with 26 additions and 126 deletions.
    152 changes: 26 additions & 126 deletions stepper.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,148 +8,48 @@
    <title>sketch</title>
    <style type="text/css" media="screen">

    .active {color:#ff0000}
    .inactive {color:#ddd}
    a {font-size:.6em;color:#ccc;margin-left:5px}
    .inactive a {display:none}
    li {color:#ddd;}
    .active a {color:#ff0000}
    a {text-decoration:none;}
    li a {color:#ccc;margin-left:5px}

    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
    google.load("jquery", "1.3.2");
    </script>
    <script type="text/javascript" charset="utf-8">

    // Define jQuery plugin
    (function($) {

    var opts, el;

    $.fn.extend({
    stepper: function(options) {
    opts = $.extend({}, $.fn.stepper.defaults, options);
    // This will be called on an element or collection of elements
    return this.each(initialise);
    }
    });

    $.fn.stepper.defaults = {
    step_el: "li",
    event_names: {
    goForward: "goForward",
    goBackward: "goBackward",
    nudgeForward: "nudgeForward",
    nudgeBackward: "nudgeBackward",
    activate: "activate",
    deactivate: "deactivate"
    },
    class_names: {
    active: "active",
    inactive: "inactive"
    }
    };

    // Private functions
    function initialise () {
    // This is an instance of stepper. Set it up.
    el = this;
    // Setup step progression
    setupStepProgression();
    // Deactivate all
    $(el)
    .children(opts.step_el)
    .trigger(opts.event_names.deactivate);
    // Activate first one
    $(el)
    .children(opts.step_el + ":first-child")
    .trigger(opts.event_names.activate);
    }

    function setupStepProgression () {
    // Child handled progression
    $(el)
    .children(opts.step_el)
    .bind(opts.event_names.goBackward, function() {
    if ($(this).prev().get(0)) {
    $(this)
    .prev()
    .trigger(opts.event_names.activate);
    }
    })
    .bind(opts.event_names.goForward, function() {
    if ($(this).next().get(0)) {
    $(this)
    .next()
    .trigger(opts.event_names.activate);
    }
    })
    .bind(opts.event_names.activate, function() {
    // Deactivate active step
    $(getActiveStep()).trigger(opts.event_names.deactivate);
    // Activate this one
    $(this)
    .addClass(opts.class_names.active)
    .removeClass(opts.class_names.inactive);
    })
    .bind(opts.event_names.deactivate, function() {
    $(this)
    .addClass(opts.class_names.inactive)
    .removeClass(opts.class_names.active);
    });;
    // Parent handled progression
    $(el)
    .bind(opts.event_names.nudgeForward, function() {
    $(getActiveStep()).trigger(opts.event_names.goForward);
    })
    .bind(opts.event_names.nudgeBackward, function() {
    $(getActiveStep()).trigger(opts.event_names.goBackward);
    });
    }

    function getActiveStep () {
    return $(el).children(opts.step_el + "." + opts.class_names.active);
    }

    })(jQuery);


    $(function() {
    // Initialise stepper
    // Setup events for moving about
    $("#steps")
    .stepper()
    .children("li")
    .bind("dblclick", function() {
    $(this).trigger("activate");
    })
    .append('<a href="#" class="previous">Previous</a><a href="#" class="next">Next</a>');

    $("a.next").bind("click", function() {
    $("#steps").trigger("nudgeForward");
    });
    $("a.previous").bind("click", function() {
    $("#steps").trigger("nudgeBackward");
    });

    });
    function changeStep(step) {
    var stepNo = parseInt(step.match(/^step(\d+)$/)[1],10);
    $('#steps li.active').removeClass('active');
    $('#steps li:eq('+(stepNo-1)+')').addClass('active');
    }

    var router = (function(oldHash){
    return setInterval(function() {
    if(window.location.hash !== oldHash) {
    changeStep(window.location.hash.substring(1));
    }
    oldHash = window.location.hash;
    }, 50);
    })();

    </script>

    </head>

    <body>

    <a href="#" class="previous">Previous</a>
    <a href="#" class="next">Next</a>
    <ol id="steps">
    <li>First step</li>
    <li>Second step</li>
    <li>Third one</li>
    <li>Fourth</li>
    <li>Fifth step</li>
    <li>Sixth</li>
    <li>Last step</li>
    <li><a href="#step1">First step</a></li>
    <li><a href="#step2">Second step</a></li>
    <li><a href="#step3">Third one</a></li>
    <li><a href="#step4">Fourth</a></li>
    <li><a href="#step5">Fifth step</a></li>
    <li><a href="#step6">Sixth</a></li>
    <li><a href="#step7">Last step</a></li>
    </ol>

    </body>
    </html>
    </html>
  2. DylanFM created this gist Jan 13, 2010.
    155 changes: 155 additions & 0 deletions stepper.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,155 @@
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>sketch</title>
    <style type="text/css" media="screen">

    .active {color:#ff0000}
    .inactive {color:#ddd}
    a {font-size:.6em;color:#ccc;margin-left:5px}
    .inactive a {display:none}

    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
    google.load("jquery", "1.3.2");
    </script>
    <script type="text/javascript" charset="utf-8">

    // Define jQuery plugin
    (function($) {

    var opts, el;

    $.fn.extend({
    stepper: function(options) {
    opts = $.extend({}, $.fn.stepper.defaults, options);
    // This will be called on an element or collection of elements
    return this.each(initialise);
    }
    });

    $.fn.stepper.defaults = {
    step_el: "li",
    event_names: {
    goForward: "goForward",
    goBackward: "goBackward",
    nudgeForward: "nudgeForward",
    nudgeBackward: "nudgeBackward",
    activate: "activate",
    deactivate: "deactivate"
    },
    class_names: {
    active: "active",
    inactive: "inactive"
    }
    };

    // Private functions
    function initialise () {
    // This is an instance of stepper. Set it up.
    el = this;
    // Setup step progression
    setupStepProgression();
    // Deactivate all
    $(el)
    .children(opts.step_el)
    .trigger(opts.event_names.deactivate);
    // Activate first one
    $(el)
    .children(opts.step_el + ":first-child")
    .trigger(opts.event_names.activate);
    }

    function setupStepProgression () {
    // Child handled progression
    $(el)
    .children(opts.step_el)
    .bind(opts.event_names.goBackward, function() {
    if ($(this).prev().get(0)) {
    $(this)
    .prev()
    .trigger(opts.event_names.activate);
    }
    })
    .bind(opts.event_names.goForward, function() {
    if ($(this).next().get(0)) {
    $(this)
    .next()
    .trigger(opts.event_names.activate);
    }
    })
    .bind(opts.event_names.activate, function() {
    // Deactivate active step
    $(getActiveStep()).trigger(opts.event_names.deactivate);
    // Activate this one
    $(this)
    .addClass(opts.class_names.active)
    .removeClass(opts.class_names.inactive);
    })
    .bind(opts.event_names.deactivate, function() {
    $(this)
    .addClass(opts.class_names.inactive)
    .removeClass(opts.class_names.active);
    });;
    // Parent handled progression
    $(el)
    .bind(opts.event_names.nudgeForward, function() {
    $(getActiveStep()).trigger(opts.event_names.goForward);
    })
    .bind(opts.event_names.nudgeBackward, function() {
    $(getActiveStep()).trigger(opts.event_names.goBackward);
    });
    }

    function getActiveStep () {
    return $(el).children(opts.step_el + "." + opts.class_names.active);
    }

    })(jQuery);


    $(function() {
    // Initialise stepper
    // Setup events for moving about
    $("#steps")
    .stepper()
    .children("li")
    .bind("dblclick", function() {
    $(this).trigger("activate");
    })
    .append('<a href="#" class="previous">Previous</a><a href="#" class="next">Next</a>');

    $("a.next").bind("click", function() {
    $("#steps").trigger("nudgeForward");
    });
    $("a.previous").bind("click", function() {
    $("#steps").trigger("nudgeBackward");
    });

    });

    </script>

    </head>

    <body>

    <a href="#" class="previous">Previous</a>
    <a href="#" class="next">Next</a>
    <ol id="steps">
    <li>First step</li>
    <li>Second step</li>
    <li>Third one</li>
    <li>Fourth</li>
    <li>Fifth step</li>
    <li>Sixth</li>
    <li>Last step</li>
    </ol>

    </body>
    </html>