|
<!--
MooTools is released under the Open Source MIT license,
which gives you the possibility to use it and modify
it in every circumstance.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style rel="stylesheet" type="text/css">
textarea {
float: left;
background: #f8f8f8;
border: 1px solid #d6d6d6;
border-left-color: #e4e4e4;
border-top-color: #e4e4e4;
padding: 0.3em;
margin-top: 10px;
overflow: auto;
}
#log {
float: left;
padding: 0.5em 0em 0.2em;
margin-left: 10px;
width: 290px;
height: 50px;
border: 1px solid #d6d6d6;
border-left-color: #e4e4e4;
border-top-color: #e4e4e4;
margin-top: 10px;
visibility: hidden;
font-size: 25px;
font-weight: bold;
text-align: center;
}
</style>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var textarea = $('myTextarea'), log = $('log');
// We define the highlight morph we're going to
// use when firing an event
var highlight = new Fx.Morph(log, {
duration: 1500,
link: 'cancel',
transition: 'quad:out'
});
// Here we start adding events to textarea.
// Note that 'focus' and 'keyup' are native events, while 'burn'
// is a custom one we've made
textarea.addEvents({
focus: function() {
// When focusing, if the textarea contains value "Type here", we
// simply clear it.
if (textarea.value.contains('Type here')) textarea.value = '';
},
keyup: function() {
// When user keyups we check if there are any of the magic words.
// If yes, we fire our custom event burn with a different text for each one.
if (textarea.value.contains('hello')) textarea.fireEvent('burn', 'hello world!');
else if (textarea.value.contains('moo')) textarea.fireEvent('burn', 'mootools!');
else if (textarea.value.contains('pizza')) textarea.fireEvent('burn', 'Italy!');
else if (textarea.value.contains('burn')) textarea.fireEvent('burn', 'fireEvent');
// note that in case of 'delayed', we are firing the event 1 second late.
else if (textarea.value.contains('delayed')) textarea.fireEvent('burn', "I'm a bit late!", 1000);
},
burn: function(text) {
// When the textarea contains one of the magic words
// we reset textarea value and set the log with text
textarea.value = ''; log.set('html', text);
// then we start the highlight morphing
highlight.start({
backgroundColor: ['#fff36f', '#fff'],
opacity: [1, 0]
});
}
});
});
</script>
<title>Elements Event Demo</title>
</head>
<body>
<h1>Events</h1>
<h2>Introduction</h2>
<p>
This demo will show you how to: add multiple Events to an Element, create custom Events and fire an Event.
</p>
<p>
In below textarea you can type whatever. Typing one of listed "Magic Words" will cause Event "burn" to fire and starting an effect (see js code)
</p>
<p>
Magic Words to type: <strong>hello</strong>, <strong>moo</strong>, <strong>pizza</strong>, <strong>burn</strong>, <strong>delayed</strong> (this last one will fire after 1 second).
</p>
<div id="inner_demo">
<textarea id="myTextarea" name="textarea" cols="40" rows="6">Type here...</textarea>
</div>
<div id="log">
<!-- spacer -->
</div>
</body>
</html>
|