angular-intro.js
Version:
Angular directive to wrap intro.js
118 lines (96 loc) • 5.14 kB
HTML
<html lang="en" data-ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Angular Intro.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Angular Intro.js - Angular wrapper for intro.js">
<!-- styles -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/demo.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
<!-- Add IntroJs styles -->
<link href="../node_modules/intro.js/introjs.css" rel="stylesheet">
</head>
<body>
<div class="container-narrow" ng-controller="MyController">
<div ng-intro-options="IntroOptions" ng-intro-method="CallMe"
ng-intro-oncomplete="CompletedEvent" ng-intro-onexit="ExitEvent"
ng-intro-onchange="ChangeEvent" ng-intro-onbeforechange="BeforeChangeEvent"
ng-intro-onafterchange="AfterChangeEvent"
ng-intro-autostart="ShouldAutoStart">
<div class="masthead">
<ul id="step5" class="nav nav-pills pull-right">
<li><a href="https://github.com/mendhak/angular-intro.js/tree/master/build"><i class='icon-black icon-download-alt'></i> Download</a></li>
<li><a href="https://github.com/mendhak/angular-intro.js">Github</a></li>
</ul>
<h3 class="muted">ng-intro</h3>
</div>
<div class="jumbotron">
<h1 id="step1">Angular Intro.js</h1>
<p id="step4" class="lead">AngularJS service and directives for <a href="http://usablica.github.io/intro.js/" onclick="window.open(this.href);return false;">intro.js</a></p>
<a ng-intro-disable-button class="btn btn-large btn-success" ng-click="CallMe();">Demo</a>
<a ng-intro-disable-button class="btn btn-large btn-success" ng-click="CallMe(3);">Start at step 3</a>
<a style="position: relative;" class="btn btn-large btn-success" ng-click="clearAndStartNewIntro();">Replace current intro using the service</a>
</div>
<div class="row-fluid marketing">
<div id="step2" class="span6">
<h4>Setup</h4>
<p>Include the JS and CSS files for intro.js, and angular-intro.min.js. Add the module <code>angular-intro</code> to your app declaration.</p>
<p>Include in your controller: <code>ngIntroService</code>.</p>
<h4>Options</h4>
<p><b>Not required, but both works well together</b><br>Set the options like so: <code>ng-intro-options="IntroOptions"</code>. Define <code>$scope.IntroOptions</code> in your controller. The format is exactly the same as the <a href="https://github.com/usablica/intro.js#options">original</a>.</p>
<h4>Method name</h4>
<p>Pick a method name, <code>ng-intro-method="CallMe"</code>. You can invoke the intro from elsewhere by calling <code>CallMe();</code>. You can also specify a step number using <code>CallMe(3);</code>. To autostart, use <code>ng-intro-autostart="true"</code></p>
<h4>Callbacks</h4>
<p>You can get callbacks to your controller using the <code>ng-intro-oncomplete</code>, <code>ng-intro-onexit</code>, <code>ng-intro-onchange</code>, <code>ng-intro-onbeforechange</code> and <code>ng-intro-onafterchange</code> directives.</p>
<p>See <a href="https://github.com/mendhak/angular-intro.js/blob/master/example/index.html">index.html</a> and <a href="https://github.com/mendhak/angular-intro.js/blob/master/example/app.js">app.js</a> for usage code.</p>
</div>
<div id="step3" class="span6">
<h4><a href="https://github.com/mendhak/angular-intro.js/tree/master/example">Example</a></h4>
<p>[using Directives]Set the options and method name:
<pre>
<div ng-controller="MyController"
ng-intro-options="IntroOptions"
ng-intro-method="CallMe" ...
</pre>
</p>
<p>[using Controller] Set the options and start :
<pre>
var introOptions = {};
ngIntroService.clear();
ngIntroService.setOptions(introOptions);
</pre>
</p>
<p>Options in the controller
<pre>
$scope.IntroOptions = {
steps:[
{
element: '#step1',
intro: "First tooltip"
},
{
element: '#step4',
intro: "Second tooltip",
position: 'right'
},
...
</pre>
</p>
<p>Call it either way
<pre><button ng-click="CallMe();">Go</button></pre>
<pre>$scope.CallMe();</pre>
<pre>[service]ngIntroService.start();</pre>
</p>
</div>
</div>
<hr>
</div>
</div>
<script type="text/javascript" src="../node_modules/intro.js/minified/intro.min.js"></script>
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../src/ng-intro.component.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>