使用 Intro.js 向 JavaScript 应用程序添加交互式文档（2）
|
- UID
- 1066743
|
使用 Intro.js 向 JavaScript 应用程序添加交互式文档（2）
创建 Manage Travellers 导览创建导览
现在我们将引导您使用 Intro.js 库在 My Travel App 中创建 Manage Travellers 导览。您还可以按照我们的 视频演示进行操作。
将 Intro.js 库添加到您的项目中因为示例应用程序使用了 Node.js 和 bower 组件，所以您可以通过 bower 安装程序来安装 Intro.js 库，在本地获得它：
bower install intro.js
您还可以通过在 dependencies 部分包含 Intro.js 库，将该库添加到 bower.json 包中：
1
2
3
4
5
| "dependencies":{
...
"angular-intro.js":"~1.1.3",
...
}
|
请参阅 ，了解关于如何下载和安装 Intro.js 的更多信息。
更新您的 HTML，以便将 Intro.js 库添加到您的网站中以下是在一个 HTML 页面中包含 Intro.js 代码的方法：
1
2
3
4
5
6
7
| <li>
<a role="menuitem" tabindex="-1" id="travellersTourController"
ng-controller="TravellersTourController"
ng-click="startTravellersTour()">
<i class="header-nav-icon" ng-include="'/static/icon/travel_icon.svg'"></i>
<span translate="NAV_TOUR_MANAGE_TRAVELLERS"></span>
</a>
|
前面代码中的 id、 ng-controller 和 ng-click 的值特定于我们的实现。我们将在下文中解释它们。
创建控制器文件示例应用程序使用了 AngularJS 和一个新控制器 —TravellersTourController— 我们创建该控制器来存储所有与 Intro.js 库相关的代码。控制器代码：
- 声明使用 Intro.js 库
- 启动 Intro.js
- 定义导览上显示的步骤
- 结束导览
参见 部分，获取 TravellersTourController 的代码。
定义 Intro.js 变量在定义导览步骤之前，控制器代码定义了一个新变量 intro:
1
| var intro = Intro.js();
|
现在，控制器中的函数和事件可以使用 intro 变量来引用 Intro.js 库。
定义导览步骤要指定导览步骤，可以创建一个新的 Intro.js 对象。在这个对象中，您定义了一个对象数组，该数组依次包含导览中的每个步骤：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
| $scope.IntroOptions = {
steps:[
{
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'
},
{
element:'#travellersmenu',
intro:"<div class='tour-header'>Travellers list</div>" +
"<div class='tour-step'>Click <b>Travellers</b>
to view a list of travellers that belong to " +
"the configured trips.</div>",
position:'left'
},
{
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'
},
{
element:'#groupsmenu',
intro:"<div class='tour-header'>Groups</div>" +
"<div class='tour-step'>This tab allows travellers to create groups and
subgroups of travellers." +
"Any traveller that is already part of a group can add new travellers and subgroups.</div>",
position:'left'
},
{
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'
},
{
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'
},
{
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'
}
],
showStepNumbers: false,
exitOnEsc:true,
showBullets: false,
scrollToElement:true,
nextLabel:'Next',
prevLabel:'Prev',
skipLabel:'End tour',
doneLabel:'Done'
};
|
|
|
|
|
|
|
