Skip to content

Commit d5110f9

Browse files
afshinmafshinm
committed
Add examples page
1 parent 5d05ca6 commit d5110f9

File tree

14 files changed

+688
-0
lines changed

14 files changed

+688
-0
lines changed

‎example/RTL/index.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>RTL</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
8+
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
9+
10+
<!-- styles -->
11+
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
12+
<link href="../assets/css/demo.css" rel="stylesheet">
13+
14+
<!-- Add IntroJs styles -->
15+
<link href="../../introjs.css" rel="stylesheet">
16+
<!-- Add IntroJs RTL styles -->
17+
<link href="../../introjs-rtl.css" rel="stylesheet">
18+
19+
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
20+
21+
<style type="text/css">
22+
a, .introjs-tooltiptext {
23+
font-family: 'tahoma' !important;
24+
}
25+
</style>
26+
27+
</head>
28+
29+
<body>
30+
31+
<div class="container-narrow">
32+
33+
<div class="masthead">
34+
<ul class="nav nav-pills pull-right" data-step="5" data-intro="دانلود کن">
35+
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
36+
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
37+
<li><a href="https://twitter.com/usablica">@usablica</a></li>
38+
</ul>
39+
<h3 class="muted">Intro.js</h3>
40+
</div>
41+
42+
<hr>
43+
44+
<div class="jumbotron">
45+
<h1 data-step="1" data-intro="متن توضیح">RTL Style</span></h1>
46+
<p class="lead" data-step="4" data-intro="یک مرحله دیگه">This is the RTL version of IntroJs which include an addition CSS file to perform the RTL style.</p>
47+
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOptions({ 'nextLabel': 'بعد', 'prevLabel': 'قبل', 'skipLabel': 'خروج', 'doneLabel': 'اتمام' }).start();">Show me how</a>
48+
</div>
49+
50+
<hr>
51+
52+
<div class="row-fluid marketing">
53+
<div class="span6" data-step="2" data-intro="باحال نیست؟" data-position='right'>
54+
<h4>Section One</h4>
55+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
56+
57+
<h4>Section Two</h4>
58+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
59+
60+
<h4>Section Three</h4>
61+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
62+
</div>
63+
64+
<div class="span6" data-step="3" data-intro="امکانات بیشتر" data-position='left'>
65+
<h4>Section Four</h4>
66+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
67+
68+
<h4>Section Five</h4>
69+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
70+
71+
<h4>Section Six</h4>
72+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
73+
74+
</div>
75+
</div>
76+
77+
<hr>
78+
</div>
79+
<script type="text/javascript" src="../../intro.js"></script>
80+
</body>
81+
</html>

‎example/assets/css/bootstrap-responsive.min.css

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/assets/css/bootstrap.min.css

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/assets/css/demo.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
body {
2+
padding-top: 20px;
3+
font-family: "Myriad Pro", Verdana, Arial, Tahoma;
4+
padding-bottom: 40px;
5+
}
6+
7+
/* Custom container */
8+
.container-narrow {
9+
margin: 0 auto;
10+
max-width: 700px;
11+
}
12+
.container-narrow > hr {
13+
margin: 30px 0;
14+
}
15+
16+
/* Main marketing message and sign up button */
17+
.jumbotron {
18+
margin: 60px 0;
19+
text-align: center;
20+
}
21+
.jumbotron h1 {
22+
font-size: 72px;
23+
line-height: 1;
24+
}
25+
.jumbotron .btn {
26+
font-size: 21px;
27+
padding: 14px 24px;
28+
}
29+
30+
/* Supporting marketing content */
31+
.marketing {
32+
margin: 60px 0;
33+
}
34+
.marketing p + h4 {
35+
margin-top: 28px;
36+
}

‎example/assets/img/glyphicons-halflings-white.png

8.57 KB
Loading

‎example/assets/img/glyphicons-halflings.png

12.5 KB
Loading

‎example/custom-class/index.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Custom CSS Class</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
8+
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
9+
10+
<!-- styles -->
11+
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
12+
<link href="../assets/css/demo.css" rel="stylesheet">
13+
14+
<!-- Add IntroJs styles -->
15+
<link href="../../introjs.css" rel="stylesheet">
16+
17+
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
18+
<style>
19+
.forLastStep {
20+
font-weight: bold;
21+
}
22+
.customDefault {
23+
color: gray;
24+
}
25+
.customDefault .introjs-skipbutton {
26+
border-radius: 0;
27+
color: red;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
34+
<div class="container-narrow">
35+
36+
<div class="masthead">
37+
<ul class="nav nav-pills pull-right" data-step="5" data-tooltipClass='forLastStep' data-intro="Get it, use it.">
38+
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
39+
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
40+
<li><a href="https://twitter.com/usablica">@usablica</a></li>
41+
</ul>
42+
<h3 class="muted">Intro.js</h3>
43+
</div>
44+
45+
<hr>
46+
47+
<div class="jumbotron">
48+
<h1 data-step="1" data-intro="This is a tooltip!">Custom Class</h1>
49+
<p class="lead" data-step="4" data-intro="Another step.">Add custom CSS class to tooltip boxes using <code>data-tooltipClass</code> attribute and <code>tooltipClass</code> option.</p>
50+
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('tooltipClass', 'customDefault').start();">Show me how</a>
51+
</div>
52+
53+
<hr>
54+
55+
<div class="row-fluid marketing">
56+
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
57+
<h4>Section One</h4>
58+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
59+
60+
<h4>Section Two</h4>
61+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
62+
63+
<h4>Section Three</h4>
64+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
65+
</div>
66+
67+
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
68+
<h4>Section Four</h4>
69+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
70+
71+
<h4>Section Five</h4>
72+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
73+
74+
<h4>Section Six</h4>
75+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
76+
77+
</div>
78+
</div>
79+
80+
<hr>
81+
</div>
82+
<script type="text/javascript" src="../../intro.js"></script>
83+
</body>
84+
</html>

‎example/hello-world/index.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Basic usage</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
8+
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
9+
10+
<!-- styles -->
11+
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
12+
<link href="../assets/css/demo.css" rel="stylesheet">
13+
14+
<!-- Add IntroJs styles -->
15+
<link href="../../introjs.css" rel="stylesheet">
16+
17+
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
18+
</head>
19+
20+
<body>
21+
22+
<div class="container-narrow">
23+
24+
<div class="masthead">
25+
<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
26+
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
27+
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
28+
<li><a href="https://twitter.com/usablica">@usablica</a></li>
29+
</ul>
30+
<h3 class="muted">Intro.js</h3>
31+
</div>
32+
33+
<hr>
34+
35+
<div class="jumbotron">
36+
<h1 data-step="1" data-intro="This is a tooltip!">Basic Usage</h1>
37+
<p class="lead" data-step="4" data-intro="Another step.">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
38+
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
39+
</div>
40+
41+
<hr>
42+
43+
<div class="row-fluid marketing">
44+
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
45+
<h4>Section One</h4>
46+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
47+
48+
<h4>Section Two</h4>
49+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
50+
51+
<h4>Section Three</h4>
52+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
53+
</div>
54+
55+
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
56+
<h4>Section Four</h4>
57+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
58+
59+
<h4>Section Five</h4>
60+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
61+
62+
<h4>Section Six</h4>
63+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
64+
65+
</div>
66+
</div>
67+
68+
<hr>
69+
</div>
70+
<script type="text/javascript" src="../../intro.js"></script>
71+
</body>
72+
</html>

‎example/html-tooltip/index.html

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>HTML in tooltip</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
8+
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
9+
10+
<!-- styles -->
11+
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
12+
<link href="../assets/css/demo.css" rel="stylesheet">
13+
14+
<!-- Add IntroJs styles -->
15+
<link href="../../introjs.css" rel="stylesheet">
16+
17+
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
18+
</head>
19+
20+
<body>
21+
22+
<div class="container-narrow">
23+
24+
<div class="masthead">
25+
<ul id="step5" class="nav nav-pills pull-right">
26+
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
27+
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
28+
<li><a href="https://twitter.com/usablica">@usablica</a></li>
29+
</ul>
30+
<h3 class="muted">Intro.js</h3>
31+
</div>
32+
33+
<hr>
34+
35+
<div class="jumbotron">
36+
<h1 id="step1">HTML in tooltip</h1>
37+
<p id="step4" class="lead">We're going to use HTML codes in tooltips via Programmatic API</p>
38+
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
39+
</div>
40+
41+
<hr>
42+
43+
<div class="row-fluid marketing">
44+
<div id="step2" class="span6">
45+
<h4>Section One</h4>
46+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
47+
48+
<h4>Section Two</h4>
49+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
50+
51+
<h4>Section Three</h4>
52+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
53+
</div>
54+
55+
<div id="step3" class="span6">
56+
<h4>Section Four</h4>
57+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
58+
59+
60+
<h4>Section Five</h4>
61+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
62+
63+
<h4>Section Six</h4>
64+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
65+
</div>
66+
</div>
67+
68+
<hr>
69+
70+
</div>
71+
<script type="text/javascript" src="../../intro.js"></script>
72+
<script type="text/javascript">
73+
function startIntro(){
74+
var intro = introJs();
75+
intro.setOptions({
76+
steps: [
77+
{
78+
element: '#step1',
79+
intro: "This is a <b>bold</b> tooltip."
80+
},
81+
{
82+
element: '#step2',
83+
intro: "Ok, <i>wasn't</i> that fun?",
84+
position: 'right'
85+
},
86+
{
87+
element: '#step3',
88+
intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
89+
position: 'left'
90+
},
91+
{
92+
element: '#step4',
93+
intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
94+
position: 'bottom'
95+
},
96+
{
97+
element: '#step5',
98+
intro: '<strong>Get</strong> it, <strong>use</strong> it.'
99+
}
100+
]
101+
});
102+
103+
intro.start();
104+
}
105+
</script>
106+
</body>
107+
</html>
108+

0 commit comments

Comments
 (0)