首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

使用 Intro.js 向 JavaScript 应用程序添加交互式文档(3)

使用 Intro.js 向 JavaScript 应用程序添加交互式文档(3)

对于每一步,您必须定义:
  • 目标 element,它是该步骤引用的 HTML 元素的 ID
  • 一个名为 intro 的元素,其中包含该导览步骤的 HTML 内容
  • 一个 position 元素,指定了该步骤在页面中的位置
接下来的 7 个屏幕截图和配套代码段展示了在 Intro.js 对象中为 Manager Travellers 导览定义的每一步是如何按照                element、 intro 和 position                的顺序在导览中显示的。
导览的初始步骤使用了 Intro.js 对象代码的以下部分:
1
2
3
4
5
6
7
8
9
{element:'#toolbar-travellers-info-icon',
      intro:"<div class='tour-header'>Open Travellers Information Menu</div>" +
      "<div class='tour-step'>Click <b>" + TOUR.iconUsers + " Travellers Information</b>
          icon to open the " +
      "travellers information menu.<br><br>" +
      "Use this menu to manage travellers, travellers groups " +
      "and also the language for each traveller.</div>",
      position:'left'
}




列出游客的导览步骤使用了 Intro.js 对象代码的这一部分:
1
2
3
4
5
6
7
8
9
{
      element:'#travellersmenu',
      intro:"<div class='tour-header'>Add new travellers</div>" +
      "<div class='tour-step'>You can also add a new traveller to the trips you have.Use the " +
      "<b>Filter by search</b> field to look for existing travellers."+
      "Add them by clicking " + TOUR.iconAdd + " <b>Add travellers</b> at the " +
      "right corner of the menu.</div>",
      position:'left'
}




添加新游客的导览步骤使用了 Intro.js 对象代码的这一部分:
1
2
3
4
5
6
7
8
9
{
      element:'#travellersmenu',
      intro:"<div class='tour-header'>Add new travellers</div>" +
      "<div class='tour-step'>You can also add a new traveller to the trips you have.Use the " +
      "<b>Filter by search</b> field to look for existing travellers."+
      "Add them by clicking " + TOUR.iconAdd + " <b>Add travellers</b> at the " +
      "right corner of the menu.</div>",
      position:'left'
}




解释 Groups 选项卡的导览步骤使用了 Intro.js 对象代码的这一部分:
1
2
3
4
5
6
7
8
9
10
{
      element:'#groupsmenu',
      intro:"<div class='tour-header'>Add new groups</div>" +
      "<div class='tour-step'>You can also add a new group of travellers to the
          trips you have.Use the " +
      "<b>Filter by search</b> field to look for existing groups."+
      "Add them by clicking " + TOUR.iconAdd + " <b>Add groups</b>
          at the right corner of the menu.</div>",
      position:'left'
}




添加新组的导览步骤使用了 Intro.js 对象代码的这一部分:
1
2
3
4
5
6
7
8
9
10
{
      element:'#groupsmenu',
      intro:"<div class='tour-header'>Add new groups</div>" +
      "<div class='tour-step'>You can also add a new group of travellers to the
          trips you have.Use the " +
      "<b>Filter by search</b> field to look for existing groups."+
      "Add them by clicking " + TOUR.iconAdd + " <b>Add groups</b>
          at the right corner of the menu.</div>",
      position:'left'
}




解释 Languages 选项卡的导览步骤使用了 Intro.js 对象代码的这一部分:
1
2
3
4
5
6
7
8
{
      element:'#languagesmenu',
      intro:"<div class='tour-header'>Languages</div>" +
      "<div class='tour-step'>By default, users have <b>English</b>
          language configured as the preferred language."+
      "Travellers can add new languages to My Travel App at any time.</div>",
      position:'left'
}




导览的最后一步使用了 Intro.js 对象代码的这一部分:
1
2
3
4
5
6
7
{
      element:'#tour-icon-dropdown',
      intro:"<div class='tour-header'>End of Travellers Info Tour</div>" +
      "<div class='tour-step'>See this tour any time by clicking " +
          TOUR.iconTour + " in the upper right toolbar </div>",
      position:'left'
}




定义其他导览元素除了步骤数组,您还可以定义其他元素 — 比如显示在导览上的按钮标签,以及使用一个 escape 按钮来结束导览。请参阅 Intro.js                    库的文档,了解有关的更多信息。
将步骤对象设置为 Intro.js 变量定义 Manage Travellers 导览的所有步骤和其他导览元素后,我们将 Intro.js 对象设置为之前创建的                intro 变量,使用 setOptions() 方法实现此目的:
1
intro.setOptions($scope.IntroOptions);




启动 Intro.js在 HTML 菜单中,指定控制器和一个要执行的函数作为导览的起点。对于示例应用程序,我们指定了                startTravellersTour() 函数:
1
2
3
4
$scope.startTravellersTour = function() {
     startTravellersPath();
     intro.start();
};




startTravellersTour() 函数包含的调用可启动                Intro.js,这是您启动导览所需的全部操作。请注意,本教程在启动 Intro.js 之前还执行了另一个函数。                startTravellersPath() 函数(它使用了                JQuery)确保在导览启动时打开了应用程序的正确菜单:
1
2
3
4
5
6
7
8
9
var startTravellersPath = function() {
$timeout(function(){
    $("#toolbar-travellers-info-button").click();
    $timeout(function(){
        $("#loadTravellersMenu").click();
    },500);
    $('.dropdown').removeClass('open');
},500);
};




确保正确的步骤过渡在进行导览时,用户必须能够导航 Travellers Information 菜单的选项卡,所以我们还定义了一个                onchange 事件,确保在运行导览时为每个步骤显示了正确的选项卡:
1
2
3
4
5
6
7
8
9
10
11
intro.onchange (function(targetElement) {
    if (targetElement.id === 'travellersmenu') {
        $("#loadTravellersMenu").click();
    }
    if (targetElement.id === 'groupsmenu') {
        $("#loadGroupsMenu").click();
    }
    if (targetElement.id === 'languagesmenu') {
       $("#loadLanguagesMenu").click();
    }
});




结束 Intro.js为了结束导览的执行,我们定义了 onexit 和 oncomplete                事件来确保能正确结束导览:
1
2
3
4
5
6
intro.onexit (function(targetElement) {
    $("#toolbar-travellers-info-button").click();
});
intro.oncomplete (function(targetElement) {
    $("#toolbar-travellers-info-button").click();
});




在模板中声明控制器文件最后,在使用新的控制器之前,必须在 EJS 模板文件中将它声明为一个自定义文件:
1
<script src="/static/js/guided_tour/travellersTourController.js"></script>

返回列表