-
Notifications
You must be signed in to change notification settings - Fork 55
/
demo.html
107 lines (96 loc) · 2.85 KB
/
demo.html
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
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/seajs/dist/sea.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="hotbox.css" />
<style>
html, body {
margin: 0;
padding: 0;
}
.message {
text-align: center;
margin: 20px 0;
}
.editor {
width: 1200px;
height: 750px;
position: relative;
background: rgb(251, 251, 251);
border: 1px solid #ccc;
margin: 20px auto;
overflow: hidden;
}
</style>
</head>
<body>
<div class="message">编辑区域获得焦点时，按空格呼出热盒。主菜单的快捷键可以直接执行</div>
<div class="editor"></div>
</body>
<script>
/* global seajs */
seajs.config({
base: './src'
});
define('start', function(require) {
var HotBox = require('hotbox');
var hotbox = new HotBox('.editor');
hotbox.control();
hotbox.hintDeactiveMainState = true;
hotbox.openOnContextMenu = true;
var main = hotbox.state('main');
main.button({
position: 'center',
label: '编辑',
key: 'F2'
});
var ringButtons = '前移:Alt+Up|下级:Tab|同级:Enter|后移:Alt+Down|删除:Delete|归纳:Shift+Tab'.split('|');
ringButtons.forEach(function(button) {
main.button({
position: 'ring',
label: button.split(':')[0],
key: button.split(':')[1]
});
});
var topButtons = '超链接:H|图片:I|备注:N|优先级:P|进度:G|资源:R'.split('|');
topButtons.forEach(function(button) {
main.button({
position: 'top',
label: button.split(':')[0],
key: button.split(':')[1],
next: button.split(':')[1] == 'P' ? 'priority' : 'idle'
});
});
var bottomButtons = '模板:T|布局:L|样式:S|展开:/|选择:M'.split('|');
bottomButtons.forEach(function(button) {
main.button({
position: 'bottom',
label: button.split(':')[0],
key: button.split(':')[1]
});
});
var priority = hotbox.state('priority');
'123456789'.split('').forEach(function(p) {
priority.button({
position: 'ring',
label: 'P' + p,
key: p
});
});
priority.button({
position: 'center',
label: '移除',
key: 'Del',
next: 'idle'
});
priority.button({
position: 'top',
label: '返回',
key: 'Esc',
next: 'back'
});
});
seajs.use('start');
</script>
</html>