github-forks
/
hotkeys
mirror of https://github.com/jaywcjlove/hotkeys.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

添加响应式展现此页面

Browse Source
2.x-doc
jaywcjlove 9 years ago
parent 0832d01205
commit 2959618615
6 changed files with 251 additions and 228 deletions
Show Stats Download Patch File Download Diff File

52
Gruntfile.js
Unescape Escape View File

@ -1,52 +0,0 @@
// 包装函数
module.exports = function(grunt) {
// 任务配置,所有插件的配置信息
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//删除文件
clean: {
dist:['src/style.css']
},
stylus:{
build: {
options: {
},
files: [{
'src/style.css': [
'src/style.styl'
]
}]
}
},
concat: {
options: {
banner: '/*!\n' +
'* home page (https://github.com/jaywcjlove/hotkeys)\n' +
'*/\n'
},
dist:{
src: [
'node_modules/jslite/build/JSLite.min.js',
'node_modules/highlight.js/lib/highlight.js',
'src/hotkeys_main.js'
],
dest: 'src/main.js'
}
},
// watch插件的配置信息
watch: {
js: {
files: ['src/*.styl','src/hotkeys_main.js'],
tasks: ['default']
}
}
});
// 任务加载
require('load-grunt-tasks')(grunt);
// 告诉grunt当我们在终端中输入grunt时需要做些什么
grunt.registerTask('default', ['clean','concat','stylus']);
};

25
gulpfile.js
Unescape Escape View File

@ -0,0 +1,25 @@
var gulp = require('gulp');
var watch = require('gulp-watch');
var stylus = require('gulp-stylus');
// var rename = require("gulp-rename");
var nib = require('nib');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
// 侦听文件改变执行任务
gulp.task('watch', function (cb) {
gulp.watch('./src/style.styl', ['stylus']);
});
// RUI CSS 生成
gulp.task('stylus', function () {
gulp.src('./src/style.styl')
.pipe(stylus({
compress:true,
use: nib()
}))
// .pipe(rename('RUI.min.css'))
.pipe(gulp.dest('./src/'));
});

208
index.html
Unescape Escape View File

@ -3,115 +3,121 @@
<head>
<meta charset="UTF-8">
<title>hotkeys</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="src/style.css">
<script type="text/javascript" src="https://rawgit.com/jaywcjlove/hotkeys/master/src/hotkeys.js"></script>
</head>
<body>
<div class="title">HotKeys</div>
<div class="header">
<div class="title">HotKeys</div>
<div class="github_wrapper">
<a href="https://github.com/jaywcjlove/hotkeys/zipball/master">
<button class="github_style">Download as zip</button>
</a>
<a href="https://github.com/jaywcjlove/hotkeys/tarball/master">
<button class="github_style">Download as tar.gz</button>
</a>
<a href="https://github.com/jaywcjlove/hotkeys/">
<button class="github_style">Fork on Github</button>
</a>
<a href="https://github.com/jaywcjlove/hotkeys/">
<button class="github_style">Doc on Github</button>
</a>
</div>
<div class="info">A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.</div>
<div class="warpper">
</div>
<div class="github_wrapper">
<a href="https://github.com/jaywcjlove/hotkeys/zipball/master">
<button class="github_style">Download as zip</button>
</a>
<a href="https://github.com/jaywcjlove/hotkeys/tarball/master">
<button class="github_style">Download as tar.gz</button>
</a>
<a href="https://github.com/jaywcjlove/hotkeys/">
<button class="github_style">Fork on Github</button>
</a>
<a href="https://github.com/jaywcjlove/hotkeys/">
<button class="github_style">Doc on Github</button>
</a>
<div class="board">
<div class="keyboard" id="keyboard">
<ul>
<li data-keycode="27">esc</li>
<li data-keycode="112">F1</li>
<li data-keycode="113">F2</li>
<li data-keycode="114">F3</li>
<li data-keycode="115">F4</li>
<li data-keycode="116">F5</li>
<li data-keycode="117">F6</li>
<li data-keycode="118">F7</li>
<li data-keycode="119">F8</li>
<li data-keycode="120">F9</li>
<li data-keycode="121">F10</li>
<li data-keycode="122">F11</li>
<li data-keycode="123">F12</li>
<li data-keycode="-1">〇</li>
<li data-keycode="192"><span>~</span><span>`</span></li>
<li data-keycode="49"><span>!</span><span>1</span></li>
<li data-keycode="50"><span>@</span><span>2</span></li>
<li data-keycode="51"><span>#</span><span>3</span></li>
<li data-keycode="52"><span>$</span><span>4</span></li>
<li data-keycode="53"><span>%</span><span>5</span></li>
<li data-keycode="54"><span>^</span><span>6</span></li>
<li data-keycode="55"><span>&</span><span>7</span></li>
<li data-keycode="56"><span>*</span><span>8</span></li>
<li data-keycode="57"><span>(</span><span>9</span></li>
<li data-keycode="48"><span>)</span><span>0</span></li>
<li data-keycode="189"><span>＿</span><span>-</span></li>
<li data-keycode="187"><span>＋</span><span>=</span></li>
<li data-keycode="8"><span>delete</span></li>
<li data-keycode="9"><span>tab</span></li>
<li data-keycode="81">Q</li>
<li data-keycode="87">W</li>
<li data-keycode="69">E</li>
<li data-keycode="82">R</li>
<li data-keycode="84">T</li>
<li data-keycode="89">Y</li>
<li data-keycode="85">U</li>
<li data-keycode="73">I</li>
<li data-keycode="79">O</li>
<li data-keycode="80">P</li>
<li data-keycode="219"><span>{</span><span>[</span></li>
<li data-keycode="221"><span>}</span><span>]</span></li>
<li data-keycode="220"><span>|</span><span>\</span></li>
<li data-keycode="20"><i></i><span>CapsLock</span></li>
<li data-keycode="65">A</li>
<li data-keycode="83">S</li>
<li data-keycode="68">D</li>
<li data-keycode="70">F</li>
<li data-keycode="71">G</li>
<li data-keycode="72">H</li>
<li data-keycode="74">J</li>
<li data-keycode="75">K</li>
<li data-keycode="76">L</li>
<li data-keycode="186"><span>:</span><span>;</span></li>
<li data-keycode="222"><span>"</span><span>'</span></li>
<li data-keycode="13"><i>enter</i><span>return</span></li>
<li data-keycode="16"><span>shift</span></li>
<li data-keycode="90">Z</li>
<li data-keycode="88">X</li>
<li data-keycode="67">C</li>
<li data-keycode="86">V</li>
<li data-keycode="66">B</li>
<li data-keycode="78">N</li>
<li data-keycode="77">M</li>
<li data-keycode="188"><span>&lt;</span><span>,</span></li>
<li data-keycode="190"><span>&gt;</span><span>.</span></li>
<li data-keycode="191"><span>?</span><span>/</span></li>
<li data-keycode="16"><span>shift</span></li>
<li data-keycode="-1"><span>fn</span></li>
<li data-keycode="17"><span>control</span></li>
<li data-keycode="18"><i>alt</i><span>option</span></li>
<li data-keycode="91"><span>command</span></li>
<li data-keycode="32"></li>
<li data-keycode="93"><span>command</span></li>
<li data-keycode="18"><i>alt</i><span>option</span></li>
<li data-keycode="37">◀</li>
<li data-keycode="38">▲</li>
<li data-keycode="39">▶</li>
<li data-keycode="40">▼</li>
</ul>
</div>
<div class="info">A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.</div>
</div>
<div class="warpper">
<div class="key_info" id="key_info"></div>
<div class="board">
<div class="keyboard" id="keyboard">
<ul>
<li data-keycode="27">esc</li>
<li data-keycode="112">F1</li>
<li data-keycode="113">F2</li>
<li data-keycode="114">F3</li>
<li data-keycode="115">F4</li>
<li data-keycode="116">F5</li>
<li data-keycode="117">F6</li>
<li data-keycode="118">F7</li>
<li data-keycode="119">F8</li>
<li data-keycode="120">F9</li>
<li data-keycode="121">F10</li>
<li data-keycode="122">F11</li>
<li data-keycode="123">F12</li>
<li data-keycode="-1">〇</li>
<li data-keycode="192"><span>~</span><span>`</span></li>
<li data-keycode="49"><span>!</span><span>1</span></li>
<li data-keycode="50"><span>@</span><span>2</span></li>
<li data-keycode="51"><span>#</span><span>3</span></li>
<li data-keycode="52"><span>$</span><span>4</span></li>
<li data-keycode="53"><span>%</span><span>5</span></li>
<li data-keycode="54"><span>^</span><span>6</span></li>
<li data-keycode="55"><span>&</span><span>7</span></li>
<li data-keycode="56"><span>*</span><span>8</span></li>
<li data-keycode="57"><span>(</span><span>9</span></li>
<li data-keycode="48"><span>)</span><span>0</span></li>
<li data-keycode="189"><span>＿</span><span>-</span></li>
<li data-keycode="187"><span>＋</span><span>=</span></li>
<li data-keycode="8"><span>delete</span></li>
<li data-keycode="9"><span>tab</span></li>
<li data-keycode="81">Q</li>
<li data-keycode="87">W</li>
<li data-keycode="69">E</li>
<li data-keycode="82">R</li>
<li data-keycode="84">T</li>
<li data-keycode="89">Y</li>
<li data-keycode="85">U</li>
<li data-keycode="73">I</li>
<li data-keycode="79">O</li>
<li data-keycode="80">P</li>
<li data-keycode="219"><span>{</span><span>[</span></li>
<li data-keycode="221"><span>}</span><span>]</span></li>
<li data-keycode="220"><span>|</span><span>\</span></li>
<li data-keycode="20"><i></i><span>CapsLock</span></li>
<li data-keycode="65">A</li>
<li data-keycode="83">S</li>
<li data-keycode="68">D</li>
<li data-keycode="70">F</li>
<li data-keycode="71">G</li>
<li data-keycode="72">H</li>
<li data-keycode="74">J</li>
<li data-keycode="75">K</li>
<li data-keycode="76">L</li>
<li data-keycode="186"><span>:</span><span>;</span></li>
<li data-keycode="222"><span>"</span><span>'</span></li>
<li data-keycode="13"><i>enter</i><span>return</span></li>
<li data-keycode="16"><span>shift</span></li>
<li data-keycode="90">Z</li>
<li data-keycode="88">X</li>
<li data-keycode="67">C</li>
<li data-keycode="86">V</li>
<li data-keycode="66">B</li>
<li data-keycode="78">N</li>
<li data-keycode="77">M</li>
<li data-keycode="188"><span>&lt;</span><span>,</span></li>
<li data-keycode="190"><span>&gt;</span><span>.</span></li>
<li data-keycode="191"><span>?</span><span>/</span></li>
<li data-keycode="16"><span>shift</span></li>
<li data-keycode="-1"><span>fn</span></li>
<li data-keycode="17"><span>control</span></li>
<li data-keycode="18"><i>alt</i><span>option</span></li>
<li data-keycode="91"><span>command</span></li>
<li data-keycode="32"></li>
<li data-keycode="93"><span>command</span></li>
<li data-keycode="18"><i>alt</i><span>option</span></li>
<li data-keycode="37">◀</li>
<li data-keycode="38">▲</li>
<li data-keycode="39">▶</li>
<li data-keycode="40">▼</li>
</ul>
</div>
</div>
<br/>
<br/>
<p>HotKeys is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~3kb), and has no dependencies. It should not interfere with any JavaScript libraries or frameworks.</p>

14
package.json
Unescape Escape View File

@ -17,13 +17,13 @@
},
"homepage": "https://github.com/jaywcjlove/hotkeys",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-stylus": "^0.22.0",
"grunt-contrib-watch": "^0.6.1",
"highlight.js": "^8.8.0",
"jslite": "^1.1.6",
"load-grunt-tasks": "^3.2.0"
"jslite": "^1.1.6"
},
"dependencies": {
"gulp": "^3.9.0",
"gulp-stylus": "^2.1.0",
"gulp-watch": "^4.3.5",
"nib": "^1.1.0"
}
}

2
src/style.css
View File

File diff suppressed because one or more lines are too long

178
src/style.styl
Unescape Escape View File

@ -1,5 +1,17 @@
@charset "utf-8"
/* http://images.apple.com/v/macbook/c/design/images/keyboard_backlight_off_large_2x.jpg */
// 使用nib模块 和 CSS reset
// ==================================
@import 'nib'
// CSS reset
global-reset()
reset-html5()
mq_tablet = "screen and (min-width: 480px) and (max-width: 1004px)"
mq_mobile = "screen and (max-width: 479px)"
/* margin */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, img, form, applet, fieldset, legend, button, input, textarea, th, table, tr, td
margin: 0
@ -55,29 +67,110 @@ a:hover, a:active, a:focus
i
font-style: normal
auto-width()
width: 995px
margin: 0 auto 0 auto
@media mq_tablet
width: auto
padding 20px
@media mq_mobile
width auto
padding 20px
.title
text-align: center
font-size: 53px
padding: 74px 0 80px 0
font-weight: bold
.header
background-color: #292929
height: 300px
color: #fff;
padding: 74px 0 80px 0
@media mq_tablet
padding: 64px 0 25px 0
@media mq_mobile
padding: 54px 0 15px 0
.info
padding: 25px 0 8px 0
text-align: center
font-size: 27px
line-height: 34px
color:#878787
auto-width()
@media mq_tablet
font-size 21px
line-height 24px
@media mq_mobile
font-size 14px
line-height 18px
.title
text-align: center
font-size: 53px
font-weight: bold
color: #fff;
.github_wrapper
text-align: center
padding: 80px 0 22px 0
@media mq_tablet
padding: 64px 0 15px 0
@media mq_mobile
padding: 29px 0 0 0
margin 10px 30px 0 30px
.github_style
position: relative
display: inline-block
border: 1px solid #ddd
border-bottom-color: #bbb
padding: 9px 15px
font-family: Helvetica, arial, freesans, clean, sans-serif
font-size: 12px
font-weight: bold
color: #666
text-shadow: 0 1px rgba(255, 255, 255, 0.9)
cursor: pointer
border-radius: 3px
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
background: whitesmoke
background-image: linear-gradient(-90deg, whitesmoke 0%, #e5e5e5 100%)
@media mq_mobile
padding: 3px 10px
margin-top 5px
&:hover
color: #337797;
border: 1px solid #CBE3EE
border-bottom-color: #97C7DD
background: #f0f7fa
background-image: -moz-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
background-image: -webkit-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
background-image: -o-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
background-image: -ms-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
&:active
border: 1px solid #2A65A0
border-bottom-color: #0770A0
color: #fff
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3)
background: #0770a0
background-image: -moz-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
background-image: -webkit-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
background-image: -o-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
background-image: -ms-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
.warpper
width: 995px
margin: -240px auto 0 auto
padding: 0 0 100px 0
font-size: 16px
auto-width()
code
border-radius: 4px
background-color:#ECECEC
padding:1px 5px
color:#9F0101
pre
word-wrap:break-word;
word-break:normal;
code
word-wrap:break-word;
word-break:normal;
color:#000
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace
font-size: 14px
@ -89,60 +182,7 @@ i
padding:15px 0 5px 15px
h2
padding: 15px 0 5px 15px
.info
padding: 0 35px 36px 45px
text-align: center
font-size: 27px
line-height: 34px
color:#878787
.github_wrapper
text-align: center
margin: 0 0 22px 0
.github_style
position: relative
display: inline-block
border: 1px solid #ddd
border-bottom-color: #bbb
padding: 9px 15px
font-family: Helvetica, arial, freesans, clean, sans-serif
font-size: 12px
font-weight: bold
color: #666
text-shadow: 0 1px rgba(255, 255, 255, 0.9)
cursor: pointer
-webkit-border-radius: 3px
-moz-border-radius: 3px
border-radius: 3px
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
background: whitesmoke
background-image: -moz-linear-gradient(-90deg, whitesmoke 0%, #e5e5e5 100%)
background-image: -webkit-linear-gradient(-90deg, whitesmoke 0%, #e5e5e5 100%)
background-image: -o-linear-gradient(-90deg, whitesmoke 0%, #e5e5e5 100%)
background-image: -ms-linear-gradient(-90deg, whitesmoke 0%, #e5e5e5 100%)
&:hover
color: #337797;
border: 1px solid #CBE3EE
border-bottom-color: #97C7DD
background: #f0f7fa
background-image: -moz-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
background-image: -webkit-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
background-image: -o-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
background-image: -ms-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
&:active
border: 1px solid #2A65A0
border-bottom-color: #0770A0
color: #fff
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3)
background: #0770a0
background-image: -moz-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
background-image: -webkit-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
background-image: -o-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
background-image: -ms-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
.key_info
position:fixed
top:10px
@ -161,10 +201,14 @@ i
border: 1px solid #C9C9C9
background: #F2F2F2
box-shadow: 2px 0px 2px #E2E2E2 inset,-2px 2px 3px #E2E2E2 inset,1px -0px 0px #C1C1C1 inset,0px -2px 3px #C1C1C1 inset
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
auto-width()
margin-top -66px
@media mq_mobile
display none
height: auto
@media mq_tablet
display none
ul
width: 992px
margin-top: 9px

Write Preview
Loading…
Cancel
Save