jquery-hemi-intro
jQuery introduction (intro) plugin step by step.
Demo:
http://heminei.github.io/jquery-hemi-intro/demo/
Required:
Bootstrap (http://getbootstrap.com/)!
Installation:
npm install jquery-hemi-introHow to use:
<link href="/src/jquery.hemiIntro.css" rel="stylesheet" type="text/css"/> <script src="/src/jquery.hemiIntro.js" type="text/javascript"></script>$(function () { var intro = $.hemiIntro({ steps: [ { selector: ".nav-justified", placement: "bottom", content: "Text text text text text text text text text text", }, { selector: ".jumbotron", placement: "bottom", content: "Text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2" }, ] }); intro.start(); });Default options:
$(function () { $.hemiIntro({ debug: false, steps: [ { selector: ".step-1", placement: "bottom", content: "Text text text", showButtons: true, scrollToElement: true, offsetTop: 20 } ], startFromStep: 0, backdrop: { element: $("<div>"), class: "hemi-intro-backdrop" }, popover: { template: '<div class="popover hemi-intro-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' }, buttons: { holder: { element: $("<div>"), class: "hemi-intro-buttons-holder" }, next: { element: $("<button>Next</button>"), class: "btn btn-primary" }, finish: { element: $("<button>Finish</button>"), class: "btn btn-primary" } }, welcomeDialog: { show: false, selector: null }, scroll: { animationSpeed: 500 }, currentStep: { selectedClass: "hemi-intro-selected" }, init: function (plugin) { }, onLoad: function (plugin) { }, onStart: function (plugin) { }, onBeforeChangeStep: function (plugin) { }, onAfterChangeStep: function (plugin) { }, onShowModalDialog: function (plugin, modal) { }, onHideModalDialog: function (plugin, modal) { }, onComplete: function (plugin) { } }); });Methods:
$(function () { var intro = $.hemiIntro(); intro.start(); intro.next(); intro.prev(); intro.finish(); intro.goToStep(1); intro.getCurrentStep(); });
