Permalink
Fetching contributors…
Cannot retrieve contributors at this time
188 lines (149 sloc) 7.23 KB
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Angular Intro Plus.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 rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="assets/css/demo.css" rel="stylesheet">
<!-- Add IntroJs styles -->
<link href="../bower_components/intro.js/introjs.css" rel="stylesheet">
<link href="../src/angular-intro-plus.css" rel="stylesheet">
</head>
<body>
<div class="container-narrow" ng-controller="MyController"
ng-intro-plus-options="IntroPlusOptions" ng-intro-plus-show="CallMe"
ng-intro-plus-on-complete="CompletedEvent" ng-intro-plus-on-exit="ExitEvent"
ng-intro-plus-on-change="ChangeEvent" ng-intro-plus-on-before-change="BeforeChangeEvent"
ng-intro-plus-on-after-change="AfterChangeEvent"
ng-intro-plus-autostart="false"
ng-intro-plus-on-before-overlay-creation="BeforeOverlayCreation"
ng-intro-plus-on-before-overlay-removal="BeforeOverlayRemoval"
ng-intro-plus-on-after-overlay-creation="AfterOverlayCreation"
ng-intro-plus-on-after-overlay-removal="AfterOverlayRemoval"
ng-intro-plus-hide="hideMe"
ng-intro-plus-hide-help-box="hideHelpBox"
ng-intro-plus-refresh-help-icons="refreshHelpIcons">
<div class="masthead">
<ul id="step5" class="nav nav-pills pull-right">
<li><a href="https://github.com/iamdenny/angular-intro-plus.js/tags"><i
class='icon-black icon-download-alt'></i> Download</a></li>
<li><a href="https://github.com/iamdenny/angular-intro-plus.js">Github</a></li>
</ul>
<h3 class="muted">ng-intro-plus</h3>
</div>
<div class="jumbotron">
<h1 id="step1">Angular Intro Plus.js</h1>
<p id="step4" class="lead">AngularJS directives for <a href="http://usablica.github.io/intro.js/"
onclick="window.open(this.href);return false;">intro.js</a>
</p>
<a class="btn btn-large btn-success" ng-click="CallMe();">Demo</a>
</div>
<div class="row marketing">
<div class="col-md-6">
<div id="step2">
<h4>Setup</h4>
<p>Include the JS and CSS files for intro.js, and angular-intro-plus.min.js. Add the module <code>angular-intro-plus</code>
to your app declaration.</p>
<h4>Options</h4>
<p>Set the options like so: <code>ng-intro-plus-options="IntroPlusOptions"</code>. Define <code>$scope.IntroPlusOptions</code>
in your controller. The format is only same the steps of <a
href="https://github.com/usablica/intro.js#options">original</a>.</p>
<h4>Method name</h4>
<p>Pick a method name,
<code>ng-intro-plus-show="CallMe"</code>.
You can invoke the intro from elsewhere by
calling <code>CallMe();</code>.<br>
To autostart, use <code>ng-intro-plus-autostart="true"</code>.<br>
To hide all of them or just help icons, use
<code>ng-intro-plus-hide="hideMe"</code>,
<code>ng-intro-plus-hide-help-box="hideHelpBox"</code>.
</p>
<h4>Callbacks</h4>
<p>You can get callbacks to your controller using the <code>ng-intro-plus-on-complete</code>,
<code>ng-intro-plus-on-exit</code>, <code>ng-intro-plus-on-change</code>,
<code>ng-intro-plus-on-before-change</code>, <code>ng-intro-plus-on-after-change</code>
<code>ng-intro-plus-on-before-overlay-creation</code>,
<code>ng-intro-plus-on-after-overlay-creation</code>, and
<code>ng-intro-plus-on-before-overlay-removal</code>,
<code>ng-intro-plus-on-after-overlay-removal</code> directives.</p>
<p>See <a
href="https://github.com/iamdenny/angular-intro-plus.js/blob/master/example/index.html">index.html</a>
and <a href="https://github.com/iamdenny/angular-intro-plus.js/blob/master/example/app.js">app.js</a>
for usage code.</p>
<hr>
<h4>Demo about repositioning help icons</h4>
<p>
Try to click below button after clicking 'Demo' button above.<br>
<button class="btn btn-small btn-info" ng-click="bShowHiddenText=!bShowHiddenText">Toggle Hidden Text Area</button>
</p>
</div>
<div id="hiddenText" ng-show="bShowHiddenText">
Here is hidden text.<br>
Here is hidden text.<br>
Here is hidden text.<br>
Here is hidden text.<br>
Here is hidden text.<br>
Here is hidden text.<br>
</div>
</div>
<div id="step3" class="col-md-6">
<h4><a href="https://github.com/iamdenny/angular-intro-plus.js/tree/master/example">Example</a></h4>
<p>Set the options and method name:
<pre>
&lt;div ng-controller="MyController"
ng-intro-plus-options="IntroPlusOptions"
ng-intro-plus-show="CallMe" ...
</pre>
</p>
<p>Options in the controller
<pre>
$scope.IntroPlusOptions = {
steps:[
{
element: '#step1',
intro: "First tooltip"
},
{
element: '#step4',
intro: "Second tooltip",
position: 'right'
},
...
</pre>
</p>
<p>Call it either way
<pre>&lt;button ng-click="CallMe();"&gt;Go&lt;/button&gt;</pre>
<pre>$scope.CallMe();</pre>
</p>
<p>Hide intro
<pre>&lt;button ng-click="hideMe();"&gt;Go&lt;/button&gt;</pre>
<pre>$scope.hideMe();</pre>
<a class="btn btn-small btn-info" ng-click="hideMe();">hide intro</a>
</p>
<p>Hide help box
<pre>&lt;button ng-click="hideHelpBox();"&gt;Go&lt;/button&gt;</pre>
<pre>$scope.hideHelpBox();</pre>
<a class="btn btn-small btn-info" ng-click="hideHelpBox();">hide help box only</a>
</p>
</div>
</div>
<hr>
</div>
<script type="text/javascript" src="../bower_components/intro.js/minified/intro.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../src/angular-intro-plus.js"></script>
<script src="app.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-23174901-4', 'iamdenny.com');
ga('send', 'pageview');
</script>
</body>
</html>