You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
362 lines
7.2 KiB
362 lines
7.2 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
|
|
<html> |
|
|
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>Guidely - MadeByAmp</title> |
|
|
|
<style type="text/css" media="screen"> |
|
|
|
|
|
* { padding: 0; margin: 0; } |
|
|
|
body |
|
{ |
|
background: #DDD; |
|
font: 12px/1.7em arial, sans-serif; |
|
margin: 0 auto 75px; |
|
} |
|
|
|
button { padding: 4px 8px; } |
|
|
|
ul { margin-left: 24px; margin-bottom: 2em; } |
|
|
|
.demo { font-size: 16px; } |
|
</style> |
|
|
|
<link rel="stylesheet" href="./example_files/style.css" type="text/css" media="screen" title="no title" charset="utf-8" /> |
|
|
|
|
|
|
|
|
|
</head> |
|
|
|
<body id=""> |
|
|
|
<div id="wrapper"> |
|
|
|
<h1>Guidely - MadeByAmp</h1> |
|
|
|
<p>Guidely is a functional jQuery plugin that facilitates guided website tours for your new or returning website users.</p> |
|
|
|
<br /> |
|
|
|
<p>To get started with Guidely, add the guidely.css stylesheet to your document:</p> |
|
|
|
<pre> |
|
<link rel="stylesheet" href="guidely/guidely.css" type="text/css" charset="utf-8" /> |
|
</pre> |
|
|
|
<p>Also add the Guidely javascript file to your document:</p> |
|
|
|
<pre> |
|
<script src="guidely/guidely.js"></script> |
|
</pre> |
|
|
|
|
|
|
|
<p class="demo"><a href="./demos/website-1/">Demo #1</a></p> |
|
<p class="demo"><a href="./demos/website-2/">Demo #2</a></p> |
|
<p class="demo"><a href="./demos/website-3/">Demo #3</a></p> |
|
<p class="demo"><a href="./demos/positions/">Positions</a></p> |
|
|
|
|
|
<p style="background: #FFC;">For support email the author through his Code Canyon author page <a href="http://codecanyon.net/user/MadeByAmp">http://codecanyon.net/user/MadeByAmp</a></p> |
|
|
|
<br /> |
|
<hr /> |
|
|
|
<br /><br /> |
|
|
|
<h2>Adding Guides</h2> |
|
|
|
<ul> |
|
<li>All guides must be added before calling the init ()</li> |
|
<li>Required options are attachTo and text.</li> |
|
<li>Valid values for anchor are top-left, top-middle, |
|
top-right, middle-left, middle-middle, middle-right, bottom-left, bottom-middle, bottom-right</li> |
|
</ul> |
|
|
|
|
|
<pre><code>guidely.add ({ |
|
attachTo: '#header' |
|
, title: 'Guide Title' |
|
, text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit' |
|
, anchor: 'top-left' |
|
}); |
|
</code></pre> |
|
|
|
<br /> |
|
<hr /> |
|
|
|
<br /><br /> |
|
|
|
|
|
<h2>Starting Guidely</h2> |
|
|
|
<ul> |
|
<li>Before you initialize make sure all of the guides you need are set up.</li> |
|
<li>If welcome option is set to true, welcomeTitle and welcomeText default messages will show. You can customize |
|
this option by passing in a welcome and/or initial text for your guide.</li> |
|
<li>All other options are set to true as a default (please see table below).</li> |
|
</ul> |
|
|
|
|
|
<pre><code>guidely.init ({ |
|
welcome: true |
|
, welcomeTitle: 'Welcome to the guided tour!' |
|
, welcomeText: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit' |
|
}); |
|
</code></pre> |
|
|
|
<br /> |
|
<hr /> |
|
|
|
<br /><br /> |
|
|
|
|
|
<h2>Options</h2> |
|
|
|
|
|
|
|
|
|
<h3>guidely.init ()</h3> |
|
<table border="0"> |
|
<tbody> |
|
<tr> |
|
<th width="130">Option Name</th> |
|
|
|
<th width="130">Default Value</th> |
|
|
|
<th>Explanation</th> |
|
</tr> |
|
|
|
<tr> |
|
<td>welcome</td> |
|
|
|
<td><em>true</em></td> |
|
|
|
<td>Displays the welcome screen before initializing the guide numbers & content.</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>overlay</td> |
|
|
|
<td><em>true</em></td> |
|
|
|
<td>Adds an overlay on top of website content</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>startTrigger</td> |
|
|
|
<td><em>true</em></td> |
|
|
|
<td>Displays a start tour button so users can view the guide when necessary.</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>escClose</td> |
|
|
|
<td><em>true</em></td> |
|
|
|
<td>Enables the guide to be closed using the esc key</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>keyNav</td> |
|
|
|
<td><em>true</em></td> |
|
|
|
<td>Allows users to navigate the guides using the left & right arrow keys.</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>welcomeTitle</td> |
|
|
|
<td><em>Welcome to the guided tour!</em></td> |
|
|
|
<td>Replaces the default welcome title.</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>welcomeText</td> |
|
|
|
<td><em>Click start to view a brief walk through of our website.</em></td> |
|
|
|
<td>Replaces the default welcome text.</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
|
|
<br /> |
|
|
|
<h3>guidely.add ()</h3> |
|
<table border="0"> |
|
<tbody> |
|
<tr> |
|
<th width="130">Option Name</th> |
|
|
|
<th width="130">Default Value</th> |
|
|
|
<th>Explanation</th> |
|
</tr> |
|
|
|
<tr> |
|
<td>attachTo</td> |
|
|
|
<td><em>empty selector</em></td> |
|
|
|
<td>Accepts a jQuery selector to attach the number to.</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>anchor</td> |
|
|
|
<td><em>top-left</em></td> |
|
|
|
<td>Defines where on the selected object the guide number will be attached to. Valid options are <strong><em>top-left, top-middle, top-right, middle-left, middle-middle, middle-right, bottom-left, bottom-middle, bottom-right</em></strong></td> |
|
</tr> |
|
|
|
<tr> |
|
<td>title</td> |
|
|
|
<td><em>(optional string)</em></td> |
|
|
|
<td>Optional title to display in the guide.</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>text</td> |
|
|
|
<td><em>(required string)</em></td> |
|
|
|
<td>Required text to display in the guide.</td> |
|
</tr> |
|
|
|
|
|
</tbody> |
|
</table> |
|
|
|
<br /><br /> |
|
<hr /> |
|
<br /><br /> |
|
|
|
<h2>API</h2> |
|
|
|
<table border="0"> |
|
<tbody> |
|
<tr> |
|
<th width="130">Option Name</th> |
|
|
|
<th width="130">Parameters</th> |
|
|
|
<th>Explanation</th> |
|
</tr> |
|
|
|
<tr> |
|
<td>init</td> |
|
|
|
<td>config</td> |
|
|
|
<td>Accepts options config and prepares guidely</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>add</td> |
|
|
|
<td>config</td> |
|
|
|
<td>Accepts an options config and queues the guide for creation</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>start</td> |
|
|
|
<td></td> |
|
|
|
<td>Starts guidely. Shows the numbers and first guide</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>show</td> |
|
|
|
<td><em>guide number</em></td> |
|
|
|
<td>Accepts a guide number and displays the corresponding guide</em></td> |
|
</tr> |
|
|
|
<tr> |
|
<td>next</td> |
|
|
|
<td><em></em></td> |
|
|
|
<td>Cycles to the next guide if available.</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>prev</td> |
|
|
|
<td><em></em></td> |
|
|
|
<td>Cycles to the previous guide if available</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>close</td> |
|
|
|
<td></td> |
|
|
|
<td>Disables guidely; can be restarted using guidely.start ()</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>hideGuides</td> |
|
|
|
<td></td> |
|
|
|
<td>Hides all visible guides</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>showNumbers</td> |
|
|
|
<td></td> |
|
|
|
<td>Makes all guide numbers visible</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>hideNumbers</td> |
|
|
|
<td></td> |
|
|
|
<td>Hides all guide numbers</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>showOverlay</td> |
|
|
|
<td></td> |
|
|
|
<td>Makes the overlay visible</td> |
|
</tr> |
|
|
|
<tr> |
|
<td>hideOverlay</td> |
|
|
|
<td></td> |
|
|
|
<td>Hides the overlady</td> |
|
</tr> |
|
|
|
</tbody> |
|
</table> |
|
|
|
</div> <!-- #wrapper --> |
|
|
|
</body> |
|
|
|
</html> |