Last active
August 29, 2015 13:56
-
-
Save paulkaplan/9081413 to your computer and use it in GitHub Desktop.
Tiny jQuery plugin to make walkthroughs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script src="walkthrough.js"></script> | |
| <link rel="stylesheet" href="walkthrough.css" /> | |
| <body> | |
| <div class='walkthrough-container'> | |
| <div class="walkthrough-steps"> | |
| <div | |
| class="walkthrough-step" | |
| data-title="Hello world!" | |
| > | |
| <p> hello world ,this is the first step!</p> | |
| </div> | |
| <div | |
| class="walkthrough-step" | |
| data-title="Next step" | |
| > | |
| <p> wowsa!</p> | |
| </div> | |
| <div | |
| class="walkthrough-step" | |
| data-title="the last step" | |
| > | |
| <p> oh no! this is my last step!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| $('.walkthrough-container').walkthrough({ | |
| width:600, | |
| height: 600, | |
| // showStepNumber : false, | |
| // showNextPrevButtons : false | |
| }); | |
| </script> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .walkthrough-container { | |
| position:relative; | |
| } | |
| .walkthrough-container.debug * { | |
| border:1px solid #faa; | |
| } | |
| .walkthrough-step { | |
| display:none; | |
| } | |
| .walkthrough-step.active { | |
| display:block; | |
| } | |
| .walkthrough-progress-step:hover { | |
| cursor:pointer; | |
| } | |
| .walkthrough-progress-step.active { | |
| background:#eee; | |
| } | |
| .walkthrough-progress-step { | |
| padding:1em; | |
| display:inline-block; | |
| width:120px; | |
| } | |
| span.step-number { | |
| display:inline-block; | |
| padding:5px; | |
| } | |
| span.step-title { | |
| display:inline-block; | |
| padding:5px; | |
| } | |
| .step-nav-button { | |
| display:block; | |
| width:100px; | |
| position:absolute; | |
| bottom:0; | |
| text-align:center; | |
| } | |
| .step-nav-button#prev-step { | |
| left:0; | |
| } | |
| .step-nav-button#next-step { | |
| right:0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function ($) { | |
| var defaults = { | |
| showStepNumber : true, | |
| showNextPrevButtons : true, | |
| debug : false | |
| } | |
| var GLOBALS = {}; | |
| GLOBALS.step_number = 1; | |
| GLOBALS.n_steps = 0; | |
| GLOBALS.container = null; | |
| function initWalkthrough(el) { | |
| // apply a container class for css reasons | |
| el.addClass('walkthrough-container'); | |
| if(GLOBALS.opts.debug) { | |
| el.addClass('debug'); | |
| } | |
| GLOBALS.container = el; | |
| GLOBALS.n_steps = el.find('.walkthrough-step').length; | |
| // create the walkthrough navigation | |
| createStepNavigation(el); | |
| // set the first step as active | |
| setActiveStep(); | |
| } | |
| function createProgressBar(el) { | |
| el.prepend( $("<div id='walkthrough-progress'></div>") ); | |
| // add the steps to the progress bar | |
| var progressBar = $("#walkthrough-progress"); | |
| var number = 1; | |
| el.find('.walkthrough-step').each(function () { | |
| // put data-step-number attribute to make it easier to keep track | |
| $(this).attr('data-step-number', number); | |
| // Create the progress step | |
| var title = $(this).attr('data-title'); | |
| var progressStep = $("<div class='walkthrough-progress-step'></div>"); | |
| progressStep.attr('data-step-number', number); | |
| if (GLOBALS.opts.showStepNumber) { | |
| progressStep.append($('<span class="step-number">'+number+'</span>')); | |
| } | |
| progressStep.append($('<span class="step-title">'+title+'</span>')); | |
| progressBar.append(progressStep); | |
| // bind clicking progress bar to change steps | |
| progressStep.click(function () { | |
| GLOBALS.step_number = parseInt($(this).attr('data-step-number')); | |
| setActiveStep(); | |
| }) | |
| number += 1; | |
| }) | |
| } | |
| function setActiveStep() { | |
| // remove active from all steps | |
| $(".walkthrough-step, .walkthrough-progress-step").removeClass('active'); | |
| // find the new active step and add active class | |
| var step_el = GLOBALS.container.find('[data-step-number='+GLOBALS.step_number+']'); | |
| step_el.addClass('active'); | |
| // disable or enable prev/next buttons based on number | |
| } | |
| function createStepNavigation(el) { | |
| createProgressBar(el); | |
| createNextPrevButtons(el); | |
| } | |
| function createNextPrevButtons(el) { | |
| if (GLOBALS.opts.showNextPrevButtons) { | |
| // create the next/prev buttons | |
| el.append($("<a class='step-nav-button' id='prev-step' href='#'>Previous</a>")) | |
| el.append($("<a class='step-nav-button' id='next-step' href='#'>Next</a>")) | |
| // bind next/prev actions | |
| $("#next-step").click(nextStep); | |
| $("#prev-step").click(prevStep); | |
| } | |
| } | |
| function nextStep() { | |
| GLOBALS.step_number = Math.min(GLOBALS.n_steps, GLOBALS.step_number+1); | |
| setActiveStep(); | |
| return false; // because it is bound to a click action | |
| } | |
| function prevStep() { | |
| GLOBALS.step_number = Math.max(1, GLOBALS.step_number-1); | |
| setActiveStep(); | |
| return false; // because it is bound to a click action | |
| } | |
| function setOptions() { | |
| // css options | |
| if (GLOBALS.opts.width) { | |
| GLOBALS.container.width(GLOBALS.opts.width); | |
| } | |
| if (GLOBALS.opts.height) { | |
| GLOBALS.container.height(GLOBALS.opts.height) | |
| } | |
| } | |
| $.fn.walkthrough = function (opts) { | |
| opts = opts || {}; | |
| GLOBALS.opts = $.extend({}, defaults, opts); | |
| // initiate the plugin on the element | |
| initWalkthrough( $(this) ); | |
| setOptions( $(this) ); | |
| return self; | |
| } | |
| }( jQuery )); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment