如何使用intro.js

时间:2015-12-26 22:55:41

标签: javascript jquery ruby-on-rails ruby 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.&nbsp; Click &nbsp;<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 &nbsp;<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根路线。或当用户通过在介绍文本外点击时跳过。

enter image description here

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,以便用户尝试通过点击介绍文字外部跳过来重定向。