gbtour.js
4.96 KB
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
$(function(){
var gbtour = new Tour({
name: "gbtagstour",
steps: [
{
element: "#tutorialpanel",
title: "帮助",
content: "课程相关文字及其代码说明区域",
placement: "right"
},
{
element: "#tutoriallistbtn",
title: "帮助",
content: "这里选择或切换当前课程库中的课程",
placement: "bottom"
},
{
element: "#backtolib",
title: "帮助",
content: "返回当前课程所在的完整课程目录",
placement: "bottom"
},
{
element: "#tutorialstatus",
title: "帮助",
content: "标记当前课程是否已完成",
placement: "bottom"
},
{
element: "#resizetutorial",
title: "帮助",
content: "切换使用大屏幕来阅读教程相关文字和代码说明",
placement: "bottom"
},
/* 动态出现区域 */
{
element: "#replaydone",
title: "帮助",
content: "互动课程播放完毕后点击这里启动编辑器并且开始做代码练习",
placement: "bottom"
},
{
element: "#ineedhelp",
title: "帮助",
content: "点击此处可以查看练习相关答案",
placement: "bottom"
},
{
element: "#ineedautocodehelp",
title: "帮助",
content: "点击此处可以观看系统辅助完成练习的代码回放过程",
placement: "bottom"
},
/* End */
{
element: "#asklibquestion",
title: "帮助",
content: "立刻到社区里发布一个课程相关的提问，会有专人回答",
placement: "top"
},
{
element: "#tutor4tutorial",
title: "帮助",
content: "请求目前在线的老师实时讲解课程相关知识点",
placement: "top"
},
{
element: "#showtipsicon",
title: "帮助",
content: "GB课程库使用界面布局介绍，及其相关按钮功能说明",
placement: "top"
},
{
element: "#playrecord",
title: "帮助",
content: "立刻下载互动课程并且开始播放互动教程",
placement: "top"
},
{
element: "#playspeed",
title: "帮助",
content: "自定义互动课程当前的播放速度",
placement: "top"
},
{
element: "#recordpanel",
title: "帮助",
content: "这里是代码编辑器相关面板，使用者可以编辑，浏览或运行代码",
placement: "right"
},
{
element: "#editorwrapper",
title: "帮助",
content: "这里选择或者切换当前需要使用的代码编辑器，包括HTML,CSS,Javascript",
placement: "bottom"
},
{
element: "#codetips",
title: "帮助",
content: "查看互动课程播放过程中相关代码解释和操作说明",
placement: "bottom"
},
{
element: "#resizeeditors",
title: "帮助",
content: "切换大屏幕阅读或编辑当前课程的相关代码",
placement: "bottom"
},
{
element: "#resultpanel",
title: "帮助",
content: "这里可以查看当前代码运行结果预览",
placement: "left"
},
{
element: "#runnow",
title: "帮助",
content: "这里手动运行当前代码",
placement: "bottom"
},
{
element: "#autorun",
title: "帮助",
content: "切换手动或者自动方式运行代码",
placement: "bottom"
},
{
element: "#resizetutorialpreview",
title: "帮助",
content: "切换大屏幕来查看代码运行结果，如果你需要查看代码在不同的尺寸下的运行结果（例如，响应式UI）可以使用这个按钮",
placement: "left"
}],
backdrop: true,
duration: 3500,
animation: true,
//storage: false,
template: "<div class='popover tour'>"
+ "<div class='arrow'></div>"
+ "<h3 class='popover-title'></h3>"
+ "<div class='text-success popover-content' style='padding: 20px 15px;'></div>"
+ "<div class='popover-navigation'>"
+ "<div class='btn-group'>"
+ "<button class='btn btn-sm btn-default small' data-role='prev'><span class='glyphicon glyphicon-step-backward'></span></button>"
+ "<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='glyphicon-pause' data-resume-text='glyphicon-play'><span class='glyphicon glyphicon-pause'></span></button>"
+ "<button class='btn btn-sm btn-default small' data-role='next'><span class='glyphicon glyphicon-step-forward'></span></button>"
+ "</div>"
+ "<button class='btn btn-sm btn-primary small' data-role='end'><span class='glyphicon glyphicon-stop'></span></button>"
+ "</div>"
+ "</nav>"
+ "</div>",
onEnd: function(){
$('#restarttour').modal();
}
}).init();
$('#showtipsicon').click(function(){
gbtour.restart();
});
if(typeof global_trigger_gblib_tour !=='undefined' && global_trigger_gblib_tour){
gbtour.restart();
}
});