Current state
This commit is contained in:
81
public/legacy/assets/plugins/intro/example/RTL/index.html
Normal file
81
public/legacy/assets/plugins/intro/example/RTL/index.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Handling "Right To Left" languages</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
<!-- Add IntroJs RTL styles -->
|
||||
<link href="../../introjs-rtl.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
|
||||
<style type="text/css">
|
||||
a, .introjs-tooltiptext {
|
||||
font-family: 'tahoma' !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul class="nav nav-pills pull-right" data-step="5" data-intro="دانلود کن">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 data-step="1" data-intro="متن توضیح">RTL Style</span></h1>
|
||||
<p class="lead" data-step="4" data-intro="یک مرحله دیگه">This is the <abbr lang="en" title="Right To Left">RTL</abbr> version of IntroJs which includes an addition CSS file to perform the RTL style.</p>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOptions({ 'nextLabel': 'بعد', 'prevLabel': 'قبل', 'skipLabel': 'خروج', 'doneLabel': 'اتمام' }).start();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div class="span6" data-step="2" data-intro="باحال نیست؟" data-position='right'>
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div class="span6" data-step="3" data-intro="امکانات بیشتر" data-position='left'>
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
9
public/legacy/assets/plugins/intro/example/assets/css/bootstrap-responsive.min.css
vendored
Normal file
9
public/legacy/assets/plugins/intro/example/assets/css/bootstrap-responsive.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
9
public/legacy/assets/plugins/intro/example/assets/css/bootstrap.min.css
vendored
Normal file
9
public/legacy/assets/plugins/intro/example/assets/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,36 @@
|
||||
body {
|
||||
padding-top: 20px;
|
||||
font-family: "Myriad Pro", Verdana, Arial, Tahoma;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
/* Custom container */
|
||||
.container-narrow {
|
||||
margin: 0 auto;
|
||||
max-width: 700px;
|
||||
}
|
||||
.container-narrow > hr {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
/* Main marketing message and sign up button */
|
||||
.jumbotron {
|
||||
margin: 60px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
font-size: 72px;
|
||||
line-height: 1;
|
||||
}
|
||||
.jumbotron .btn {
|
||||
font-size: 21px;
|
||||
padding: 14px 24px;
|
||||
}
|
||||
|
||||
/* Supporting marketing content */
|
||||
.marketing {
|
||||
margin: 60px 0;
|
||||
}
|
||||
.marketing p + h4 {
|
||||
margin-top: 28px;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Custom CSS Class</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
<style>
|
||||
.forLastStep {
|
||||
font-weight: bold;
|
||||
}
|
||||
.customDefault {
|
||||
color: gray;
|
||||
}
|
||||
.customDefault .introjs-skipbutton {
|
||||
border-radius: 0;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul class="nav nav-pills pull-right" data-step="5" data-tooltipClass='forLastStep' data-intro="Get it, use it.">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 data-step="1" data-intro="This is a tooltip!">Custom Class</h1>
|
||||
<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>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('tooltipClass', 'customDefault').start();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Basic usage</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 data-step="1" data-intro="This is a tooltip!">Basic Usage</h1>
|
||||
<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>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Without Bullets</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 data-step="1" data-intro="This is a tooltip!">Without Bullets</h1>
|
||||
<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>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('showBullets', false).start();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Without Buttons</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 data-step="1" data-intro="This is a tooltip!">Without Buttons</h1>
|
||||
<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>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('showButtons', false).start();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>HTML in tooltip</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul id="step5" class="nav nav-pills pull-right">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 id="step1">HTML in tooltip</h1>
|
||||
<p id="step4" class="lead">We're going to use HTML codes in tooltips via Programmatic API</p>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div id="step2" class="span6">
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div id="step3" class="span6">
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
<script type="text/javascript">
|
||||
function startIntro(){
|
||||
var intro = introJs();
|
||||
intro.setOptions({
|
||||
steps: [
|
||||
{
|
||||
element: '#step1',
|
||||
intro: "This is a <b>bold</b> tooltip."
|
||||
},
|
||||
{
|
||||
element: '#step2',
|
||||
intro: "Ok, <i>wasn't</i> that fun?",
|
||||
position: 'right'
|
||||
},
|
||||
{
|
||||
element: '#step3',
|
||||
intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
|
||||
position: 'left'
|
||||
},
|
||||
{
|
||||
element: '#step4',
|
||||
intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
|
||||
position: 'bottom'
|
||||
},
|
||||
{
|
||||
element: '#step5',
|
||||
intro: '<strong>Get</strong> it, <strong>use</strong> it.'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
intro.start();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
36
public/legacy/assets/plugins/intro/example/index.html
Normal file
36
public/legacy/assets/plugins/intro/example/index.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Examples, Table of Contents</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- 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">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-narrow">
|
||||
<div class="masthead">
|
||||
<h3 class="muted">Examples</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<ul>
|
||||
<li><a href="hello-world/index.html" title='Basic usage'>Basic usage</a></li>
|
||||
<li><a href="hello-world/withoutBullets.html" title='Basic usage with buttons'>Basic usage with buttons</a></li>
|
||||
<li><a href="hello-world/withoutButtons.html" title='Basic usage with bullets'>Basic usage with bullets</a></li>
|
||||
<li><a href="programmatic/index.html" title='Programmatic defining using JSON'>Programmatic defining using JSON</a></li>
|
||||
<li><a href="multi-page/index.html" title='Multi-Page introduction'>Multi-Page introduction</a></li>
|
||||
<li><a href="RTL/index.html" title='RTL version'>RTL version</a></li>
|
||||
<li><a href="html-tooltip/index.html" title='HTML in tooltip'>HTML in tooltip</a></li>
|
||||
<li><a href="custom-class/index.html" title='Custom CSS Class'>Custom CSS Class</a></li>
|
||||
<li><a href="withoutElement/index.html" title='Introduction without focusing on elements'>Introduction without focusing on elements</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Multi-page introduction, Page 1</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-narrow">
|
||||
<div class="masthead">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 data-step="1" data-intro="This is a tooltip!">Multi-Page</span></h1>
|
||||
<p class="lead">Multi-page introduction, you will see three steps of introduction in this page.</p>
|
||||
<a id="startButton" class="btn btn-large btn-success" href="javascript:void(0);">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
<script type="text/javascript">
|
||||
document.getElementById('startButton').onclick = function() {
|
||||
introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
|
||||
window.location.href = 'second.html?multipage=true';
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Multi-page introduction, Page 2</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>Second Page</span></h1>
|
||||
<p class="lead" data-step="4" data-intro="Another step.">Next page of introduction!</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div class="span6">
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div class="span6">
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
<script type="text/javascript">
|
||||
if (RegExp('multipage', 'gi').test(window.location.search)) {
|
||||
introJs().start();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Defining with JSON configuration</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul id="step5" class="nav nav-pills pull-right">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 id="step1">Programmatic</h1>
|
||||
<p id="step4" class="lead">In this example we are going to define steps with JSON configuration.</p>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div id="step2" class="span6">
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div id="step3" class="span6">
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
<script type="text/javascript">
|
||||
function startIntro(){
|
||||
var intro = introJs();
|
||||
intro.setOptions({
|
||||
steps: [
|
||||
{
|
||||
intro: "Hello world!"
|
||||
},
|
||||
{
|
||||
element: document.querySelector('#step1'),
|
||||
intro: "This is a tooltip."
|
||||
},
|
||||
{
|
||||
element: document.querySelectorAll('#step2')[0],
|
||||
intro: "Ok, wasn't that fun?",
|
||||
position: 'right'
|
||||
},
|
||||
{
|
||||
element: '#step3',
|
||||
intro: 'More features, more fun.',
|
||||
position: 'left'
|
||||
},
|
||||
{
|
||||
element: '#step4',
|
||||
intro: "Another step.",
|
||||
position: 'bottom'
|
||||
},
|
||||
{
|
||||
element: '#step5',
|
||||
intro: 'Get it, use it.'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
intro.start();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Intro without focusing on elements</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul id="step5" class="nav nav-pills pull-right">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 id="step1">Without Element</h1>
|
||||
<p id="step4" class="lead">This example shows the introductions without focusing on elements.</p>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div id="step2" class="span6">
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div id="step3" class="span6">
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
<script type="text/javascript">
|
||||
function startIntro(){
|
||||
var intro = introJs();
|
||||
intro.setOptions({
|
||||
steps: [
|
||||
{
|
||||
intro: "Hello world!"
|
||||
},
|
||||
{
|
||||
intro: "You <b>don't need</b> to define element to focus, this is a floating tooltip."
|
||||
},
|
||||
{
|
||||
element: document.querySelector('#step1'),
|
||||
intro: "This is a tooltip."
|
||||
},
|
||||
{
|
||||
element: document.querySelectorAll('#step2')[0],
|
||||
intro: "Ok, wasn't that fun?",
|
||||
position: 'right'
|
||||
},
|
||||
{
|
||||
element: '#step3',
|
||||
intro: 'More features, more fun.',
|
||||
position: 'left'
|
||||
},
|
||||
{
|
||||
element: '#step4',
|
||||
intro: "Another step.",
|
||||
position: 'bottom'
|
||||
},
|
||||
{
|
||||
element: '#step5',
|
||||
intro: 'Get it, use it.'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
intro.start();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user