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