<!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>