Sha256: d6488a1f86a27be0fbe62c902fed10a3b11cc10cf29ae6d8186007ede05f174e
Contents?: true
Size: 1.74 KB
Versions: 5
Compression:
Stored size: 1.74 KB
Contents
<style>
.content div {
border: 1px solid white;
color: #fff;
background: #000;
}
.group div {
padding: 4px;
}
.content .active {
border: 1px solid black;
color: #000;
background: #fff;
}
.content .group {
opacity: 0.5;
}
.content .activeGroup {
opacity: 1;
}
</style>
<div class="content">
<p>
Use the links to enable/disable the keyboards controlling the section below. Using the keys will toggle each example from black to white. Keyboard by default should be disabled.
</p>
<dl id="actions"></dl>
<div id="group" class="group">
<div id="sa">shift + a</div>
<div id="enter">enter</div>
<div id="up">up</div>
<div id="ctrld">ctrl+d</div>
<div id="space">space</div>
<div id="escape">escape</div>
<div id="colon">shift+;</div>
<div id="bracket">]</div>
</div>
</div>
<script src="/depender/build?require=More/Keyboard,Core/Element.Event"></script>
<script>
var kb = new Keyboard({
events: {
'shift+a': function(){
$('sa').toggleClass('active');
},
'enter': function(){
$('enter').toggleClass('active');
},
'up': function(){
$('up').toggleClass('active');
},
'control+d': function(){
$('ctrld').toggleClass('active');
},
'space': function(){
$('space').toggleClass('active');
},
'esc': function(){
$('escape').toggleClass('active');
},
'shift+;': function(){
$('colon').toggleClass('active');
},
']': function(){
$('bracket').toggleClass('active');
}
},
onActivate: function(){
$('group').addClass('activeGroup');
},
onDeactivate: function(){
$('group').removeClass('activeGroup');
}
});
makeActions([
{
title: 'Activate keyboard.',
fn: function(){
kb.activate();
}
},
{
title: 'Deactivate keyboard.',
fn: function(){
kb.deactivate();
}
}
]);
</script>
Version data entries
5 entries across 5 versions & 1 rubygems