如何使用intro.js
我创建了一个默认教程页面，用于intro.js。
如果用户完成或退出教程，我们如何将用户重定向到root_url？
的application.js
$(function () {
introJs().start();
})
tutorial.html
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicon-49aaa853c9980ecc21973fcd87163943.ico" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/theme-b6cd68b914614224dab98108d3b0aed8.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/core-f42670238e65935286fcb0975ad5e580.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/datepicker-61b210541a9fa28c212251f80470a8ed.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/application-45e2eecc01e065459eb96353c2796da7.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/bootstrap3-switch-ce6247c0775339390a4fd4a94b81f49d.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/masonry/transitions-94ec9f0193bb744a5487cfd76c8eb2e9.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/select2-95277e862ae2d9c538fa726a7d3ad206.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/select2-bootstrap-975dae2c02771473dfcc9317bb3f2418.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/introjs-ec17b037691cf9d8f5e2db05ebd82aef.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/both-5c55d25dca696fc3cb5b1ab47165d107.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/computer-24bcaae2f61670d4fd53d371b691b228.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/mobile-190057788bfd971bc8b47c5483aef792.css?body=1" />
<script src="/assets/jquery-ea2706bc2d0586731b7c00ec2cd0a414.js?body=1"></script>
<script src="/assets/jquery-ui/core-594540b84a96ee169e682149c16b54bb.js?body=1"></script>
<script src="/assets/jquery-ui/datepicker-2764d768f14afed059fca05889b35f0d.js?body=1"></script>
<script src="/assets/jquery-ui/widget-c84e5b74c33e640191f6d5c0f5c3a613.js?body=1"></script>
<script src="/assets/jquery-ui/accordion-857cf4574dd54f28784b6ff70bf47d53.js?body=1"></script>
<script src="/assets/jquery-ui/position-87adce78f4d39a5e5c488f0d3db6c899.js?body=1"></script>
<script src="/assets/jquery-ui/menu-3dd946bdd93c191994e05e952087323e.js?body=1"></script>
<script src="/assets/jquery-ui/autocomplete-d171b5fffdbf94269239638f7e1b447b.js?body=1"></script>
<script src="/assets/jquery-ui/button-6fa14b3fd71f56f7bcd6e27ca1162111.js?body=1"></script>
<script src="/assets/jquery-ui/mouse-d84eea60aa9ff30ce53c8d3bd0094226.js?body=1"></script>
<script src="/assets/jquery-ui/draggable-05b8389396925a0af6c01d77202518b1.js?body=1"></script>
<script src="/assets/jquery-ui/resizable-b300cc49ac0e291008a3ff7e431fef5f.js?body=1"></script>
<script src="/assets/jquery-ui/dialog-86be64797f7b918788de98a3eaae2f52.js?body=1"></script>
<script src="/assets/jquery-ui/droppable-10bcd580878eeabc6a235dced86c99a3.js?body=1"></script>
<script src="/assets/jquery-ui/effect-b75ae70581096ca245799e2a05d13ae1.js?body=1"></script>
<script src="/assets/jquery-ui/effect-blind-5467f456af329021d139c64bff4ca5ec.js?body=1"></script>
<script src="/assets/jquery-ui/effect-bounce-11ef19da8cb0a1e19399f0f84e6df8cb.js?body=1"></script>
<script src="/assets/jquery-ui/effect-clip-3adee88fe3cde6f029816189fd3cdf10.js?body=1"></script>
<script src="/assets/jquery-ui/effect-drop-fc850626b9ae206e2158264f43b9fdd5.js?body=1"></script>
<script src="/assets/jquery-ui/effect-explode-ed28a5b46268b63b5a60fe12f3dcc8f1.js?body=1"></script>
<script src="/assets/jquery-ui/effect-fade-2d34f3e0c608336e2634bc2054651fa0.js?body=1"></script>
<script src="/assets/jquery-ui/effect-fold-9b38c69c878b7d9b0085d6200079ce11.js?body=1"></script>
<script src="/assets/jquery-ui/effect-highlight-fc823281ade2c664242317f35bd36c1a.js?body=1"></script>
<script src="/assets/jquery-ui/effect-size-45148c050b431b86a5379a7ba1091acd.js?body=1"></script>
<script src="/assets/jquery-ui/effect-scale-58e77f383802570c2e5c6f0714ca4637.js?body=1"></script>
<script src="/assets/jquery-ui/effect-puff-c39d3efc0d48e7579bd2c70ff23b596c.js?body=1"></script>
<script src="/assets/jquery-ui/effect-pulsate-add4e56360067d5ec53b7faeebf31cb2.js?body=1"></script>
<script src="/assets/jquery-ui/effect-shake-79b277d5f03ea1456cb6196c5103529b.js?body=1"></script>
<script src="/assets/jquery-ui/effect-slide-896b50409235a056d7ea7588dfb3e4b6.js?body=1"></script>
<script src="/assets/jquery-ui/effect-transfer-af9814067d160633962a3138a3fdd8b7.js?body=1"></script>
<script src="/assets/jquery-ui/progressbar-1032e0f4894db649f622d03cebf9cae6.js?body=1"></script>
<script src="/assets/jquery-ui/selectable-96b5bab70da38340496527dd21ffcaaa.js?body=1"></script>
<script src="/assets/jquery-ui/selectmenu-93fa1325fb9716697ebcbbdd590b2034.js?body=1"></script>
<script src="/assets/jquery-ui/slider-d5f93d04eafd18e8ef01e67ec16e3058.js?body=1"></script>
<script src="/assets/jquery-ui/sortable-9a481efe6ca1db46964dc4a64376ab77.js?body=1"></script>
<script src="/assets/jquery-ui/spinner-eec71d110b6bbe195c22a2c3d957db86.js?body=1"></script>
<script src="/assets/jquery-ui/tabs-263ac768c8844d897aa4503b24bd2958.js?body=1"></script>
<script src="/assets/jquery-ui/tooltip-ea0e685b319234f12e3e8941c234768c.js?body=1"></script>
<script src="/assets/jquery-ui-0688a1b0997f4dff4bd1887d9db21b3a.js?body=1"></script>
<script src="/assets/jquery_ujs-29277b946c1d3754af13672bfec0c660.js?body=1"></script>
<script src="/assets/masonry/jquery.masonry-dfd8c85cc6a3065d8874fee2e70dc3bc.js?body=1"></script>
<script src="/assets/masonry/jquery.imagesloaded.min-d5f8d6489982d2c29b10830aa509299b.js?body=1"></script>
<script src="/assets/bootstrap-d16805677947f8c7ce91cea7ae7f82b0.js?body=1"></script>
<script src="/assets/bootstrap/modal-ffc18e5c0a8284f0716c048c18337bed.js?body=1"></script>
<script src="/assets/bootstrap-switch-46846a7b0e849753909847d35708fba3.js?body=1"></script>
<script src="/assets/cocoon-07a2b3765fb91baf2df1cea98d97eed0.js?body=1"></script>
<script src="/assets/select2-fd4f38bd0c1eb32f043e8947d79d26d4.js?body=1"></script>
<script src="/assets/introjs-55a09328213d895963cd63149802d1b1.js?body=1"></script>
<script src="/assets/account_activations-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/activities-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/comments-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/facebook-faaf7b74474e5a746a0c4a160e4705d2.js?body=1"></script>
<script src="/assets/inspirations-1c893815a88aa80fd7d8efd4385b2bbc.js?body=1"></script>
<script src="/assets/lifetimes-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/missed_dates-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/modals-bb3a9bed880b3b393ae3b501234408d9.js?body=1"></script>
<script src="/assets/notes-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/notifications-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/password_resets-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/posts-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/relationships-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/routine-sort-8bcd2bd2a9c28d08707eef8de872f71c.js?body=1"></script>
<script src="/assets/routine-c1b50f354da58aef3cef671270ccf478.js?body=1"></script>
<script src="/assets/sessions-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/stat-8e3dbf1428bb99cee79815f5999cbdc0.js?body=1"></script>
<script src="/assets/stats-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/subscribes-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/tags-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/users-8f6eecd1178ef85964369ec66d33c4f1.js?body=1"></script>
<script src="/assets/application-96631efb3dd38a6bc22b5ed2e214cea8.js?body=1"></script>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="an44vB66ntwPAEOqreiW8PcCWEVK0ngevqNfjGQNbWHdwXRtilEYgurCRrGkA7lnuXa05T24S+GyC5W2Ss0DDg==" />
<title>Live to Challenge</title>
<meta name="keywords" content="challenges, habits, goals, tracker, habit goal tracker, self tracking, quantified self, SMART goal setting, habit forming tool" />
<meta name="description" content="100 % Free | No Download Required | Habit Goal Tracker | Track, share, and achieve your goals by committing to challenges that inspire and empower you." />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Tells app to be mobile responsive -->
<meta name="google-site-verification" content="Cd6S_eRTPmKoMPGhVcYjfFTeYsptlUiSQvdDajy1vmI" />
</head>
<body>
<p id="modal"></p>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/">
<img class="navbar-brand" src="/assets/Title-220116d23dddef18a69d89f45e81e558.png" alt="Title" />
</a> <div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<div data-intro='<em>Live to Challenge</em> is about inspiration and challenges.'>
</div>
<li data-intro='You click here to add an inspiration, i.e. quotes, pictures, lessons, etc.'>
<a href="/">
<span class="glyphicon glyphicon-plus"></span><b>Inspiration</b>
</a> </li>
<li data-intro='You click here to add a challenge, i.e. run 5K, lose 10 pounds, juice faste, etc'>
<a href="/">
<span class="glyphicon glyphicon-plus"></span> <b>Challenge</b>
</a> </li>
<li data-intro='Your inspirations and challenges are shared with your followers here.'><a href="/">Feed</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/">Account <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li>
<a class="disabled"><a href="/">Users</a></a>
</li>
<li>
<a class="disabled"><a href="/">Stats</a></a>
</li>
<li>
<a class="disabled"><a href="/">Settings</a></a>
</li>
<li>
<a class="disabled"><a href="/about">About</a></a>
</li>
<li>
<a class="disabled"><a href="/blog">Blog</a></a>
</li>
<li>
<a class="disabled"><a href="/">Log out</a></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<p class="text-center">
<div class="jumbtron">
<div class="container">
<h1><b>Name</b></h1>
<p> Tag "mission" to make the inspiration appear here.<br><br></p>
</div>
</div>
<!-- this variable should be assigned in your controller action-->
</p>
</div>
<div class="container">
<div class="col-md-3">
<div data-intro='Your inspirations appear here.'>
<div class="challenges-header", id="inspirations-link"><a href="/">Inspiration</a></div>
<div class="add-padding">
<div id="inspirations-margin" class="transitions-enabled">
<br>
None saved. Click <div class="primary-color"><a href="/"><span class="glyphicon glyphicon-plus"></span> <b>Inspiration</b></a></div>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div class="col-md-6">
<div id="modal-holder"></div>
<div data-intro='Your challenges appear here.'>
<div class="challenges-header">Challenges</div>
<div data-intro='Your Routine Challenges appear here. These are challenges you do on a recurring habitual basis, like exercise, meditate, or read.'>
<div class="challenges-border">
<div class="tag-it">Routine</div>
<div class="add-padding">
<br>
<p>None saved for today.</p>
</div>
<br>
<br>
</div>
</div>
<div data-intro='Your Lifetime Challenges appear here. These are challenges you do on a one-time basis, like run a marathon, walk the Great Wall of China, or write a personal memoir.'>
<div class="challenges-border" style="margin-bottom: 5px;">
<div class="tag-it">Lifetime</div>
<div class="lifetime-margin-home">
<div class="add-padding">
None saved. Click <div class="primary-color"><a href="/"><span class="glyphicon glyphicon-plus"></span> <b>Challenge</b></a></div>
</div>
<br>
<br>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="challenges-header">Overview</div>
<div class="sidebar-daddy">
<div id="sidebarsectiontop" class="panel panel-default">
<div data-intro='The day will be red if you miss a routine challenge, the day will be blue if you dont, and the day will get a gold star if you accomplish a lifetime challenge.'>
<div id="sidebarheadingtop" class="panel-heading"><h5><b>
<a href="/">
<span class="glyphicon glyphicon-chevron-left"></span>
</a> <a data-toggle="tooltip" data-placement="top" title="BLUE DAY = No Missed Routine Challenges RED DAY = Missed a Routine Challenge GOLD STAR = Accomplished a Lifetime Challenge">
December
</a>
<a href="/">
<span class="glyphicon glyphicon-chevron-right"></span>
</a> </b></h5></div>
<div id="articles">
<table class="calendar"><tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr><tr><td class="lastmonth">
29
</td><td class="lastmonth">
30
</td><td>
1
</td><td>
2
</td><td>
3
</td><td>
4
</td><td>
5
</td></tr><tr><td>
6
</td><td>
7
</td><td>
8
</td><td>
9
</td><td>
10
</td><td>
11
</td><td>
12
</td></tr><tr><td>
13
</td><td>
14
</td><td>
15
</td><td>
16
</td><td>
17
</td><td>
18
</td><td>
19
</td></tr><tr><td>
20
</td><td>
21
</td><td>
22
</td><td>
23
</td><td>
24
</td><td>
25
</td><td class="future">
26
</td></tr><tr><td class="future">
27
</td><td class="future">
28
</td><td class="future">
29
</td><td class="future">
30
</td><td class="future">
31
</td><td class="future lastmonth">
1
</td><td class="future lastmonth">
2
</td></tr></table></div>
</div>
</div>
</body>
</html>
更新
@Dileep Nandanam在用户点击＆＃34;完成＆＃34;时将其收到redirect_to在教程结束时：
$(function () {
introJs().start().oncomplete(function() {
window.location.href = 'redirect url';
});;
})
但是，当用户点击＆＃34;跳过＆＃34;时，我们仍然需要一种方法来redirect_to根路线。或当用户通过在介绍文本外点击时跳过。
2 个答案:
答案 0 :(得分：4)
除了重定向intro.js的完整事件外，还应该在退出时重新路由。
$(function () {
introJs().start().oncomplete(function() {
window.location.href = 'redirect url';
}).onexit(function() {
window.location.href = 'redirect url';
});
})
答案 1 :(得分：1)
完成巡回回调。
$(function () {
introJs().start().oncomplete(function() {
window.location.href = 'redirect url';
});;
})
我认为您可以添加点击回调到.introjs-overlay，以便用户尝试通过点击介绍文字外部跳过来重定向。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？