в 10:00, 26 мая 2010

2010-05-26T10:00:07Z

Admin: 1 версия

2010-05-26T07:25:18Z

1 версия

Новая страница

==Key Events with MochiKit==



<source lang="html4strict">



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Signal Example</title>
<style type="text/css">
h1 {
font-size: 2em;
color: #4B4545;
text-align: center;
}
</style>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/MochiKit.js"></script>
<script type="text/javascript">
/*
Key Events: A Really Simple Key Handler

*/
KeyEvents = {
handled: false,
handleF1: function() {
replaceChildNodes("specialMessage", "You invoked the special F1 handler!");
},
handleEscape: function() {
replaceChildNodes("specialMessage", "You invoked the special Escape handler!");
},
updateModifiers: function(e) {
var modifiers = e.modifier();
replaceChildNodes("shift", modifiers.shift);
replaceChildNodes("ctrl", modifiers.ctrl);
replaceChildNodes("alt", modifiers.alt);
replaceChildNodes("meta", modifiers.meta);
}
};
KeyEvents.specialKeyMap = {
"KEY_F1": KeyEvents.handleF1,
"KEY_ESCAPE": KeyEvents.handleEscape
};
connect(document, "onkeydown",
function(e) {
if (getElement("stopBox").checked == true) {
e.preventDefault();
}

// We"re storing a handled flag to work around a Safari bug:
// http://bugs.webkit.org/show_bug.cgi?id=3387
if (!KeyEvents.handled) {
var key = e.key();
var fn = KeyEvents.specialKeyMap[key.string];
if (fn) {
fn();
}
replaceChildNodes("onkeydown_code", key.code);
replaceChildNodes("onkeydown_string", key.string);
KeyEvents.updateModifiers(e);
}
KeyEvents.handled = true;
});

connect(document, "onkeyup",
function(e) {
if (getElement("stopBox").checked == true) {
e.preventDefault();
}

KeyEvents.handled = false;
var key = e.key();
replaceChildNodes("onkeyup_code", key.code);
replaceChildNodes("onkeyup_string", key.string);
KeyEvents.updateModifiers(e);
});
connect(document, "onkeypress",
function(e) {
if (getElement("stopBox").checked == true) {
e.preventDefault();
}

var key = e.key();
replaceChildNodes("onkeypress_code", key.code);
replaceChildNodes("onkeypress_string", key.string);
KeyEvents.updateModifiers(e);
});
connect(window, "onload",
function() {
var elems = getElementsByTagAndClassName("A", "view-source");
var page = "key_events/";
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
var href = elem.href.split(/\//).pop();
elem.target = "_blank";
elem.href = "../view-source/view-source.html#" + page + href;
}
});
</script>
</head>
<body>
<h1>
Key Events with MochiKit
</h1>
<p>
This is an example of one might implement a key listener with
MochiKit’s Signal.
</p>
<p>
For a detailed description of what happens under the hood, check out
<a href="key_events.js" class="view-source">key_events.js</a>.
</p>
<p>
View Source: [
<a href="index.html" class="view-source">index.html</a> |
<a href="key_events.js" class="view-source">key_events.js</a> |
<a href="key_events.css" class="view-source">key_events.css</a>
]
</p>
<p>Check this box to test <a href="http://mochikit.ru/doc/html/lib/MochiKit/Signal.html#fn-preventdefault">
preventDefault()</a> in your browser:
<input type="checkbox" id="stopBox" /></p>

<p id="specialMessage">This text is replaced with a message when you press Escape or F1.</p>

<table>
<tr>
<th>Event</th>
<th>Key Code</th>
<th>Key String</th>
</tr>
<tr>
<td>onkeydown</td>
<td id="onkeydown_code">-</td>
<td id="onkeydown_string">-</td>
</tr>
<tr>
<td>onkeyup</td>
<td id="onkeyup_code">-</td>
<td id="onkeyup_string">-</td>
</tr>
<tr>
<td>onkeypress</td>
<td id="onkeypress_code">-</td>
<td id="onkeypress_string">-</td>
</tr>
</table>

<h3>Modifiers</h3>
<table>
<tr>
<th>Shift</th>
<th>Ctrl</th>
<th>Alt (Option)</th>
<th>Meta (Command)</th>
</tr>
<tr>
<td id="shift">-</td>
<td id="ctrl">-</td>
<td id="alt">-</td>
<td id="meta">-</td>
</tr>
</table>
</body>
</html>

</source>

← Предыдущая	Версия 10:00, 26 мая 2010
(нет различий)

JavaScript DHTML/Mochkit/KeyEvents - История изменений

в 10:00, 26 мая 2010

Admin: 1 версия