yashilanka/jquery-guide

A jQuery plugin that new layout or new features using guide

jQuery Guide

A jQuery plugin that new layout or new features using guide

View the demo

http://panlatent.github.io/jquery-guide/

How to using

• Download this library:

<script src="jquery.guide.js"></script>

• Bower: bower.json:

  {
    "dependencies": {
      "jquery-guide": ">=1.0.0"
    }
  }

Example

var guide = $.guide({
	actions: [
		{
			element: $('#domeStartGuideBtn'),
			content: '<p>Welcome, click on the screen at any position to enter the next step</p>',
			offsetX: -140,
			offsetY: 60
		},
		{
			element: $('#domeUsingPanel'),
			content: '<p>How to using...</p>',
			offsetX: -140,
			offsetY: 0,
			beforeFunc: function(g) {
				$('#domeUsingPanel').fadeIn();
			}
		},
		{
			element: $('#domeGithubBtn'),
			content: '<p>Click here to access the project for Github</p>',
			offsetX: 0,
			offsetY: 50,
			isBeforeFuncExec: true,
			beforeFunc: function(g) {
				$('#domeGithubBtn').slideDown(function() {
					g.execAction();
				});
			}
		}
	]
});