JavaScript DHTML/Mootools/Action
Содержание
Add multiple Events to an Element, create custom Events and fire an Event
<source lang="html4strict">
<!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>
Events
Introduction
This demo will show you how to: add multiple Events to an Element, create custom Events and fire an Event.
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)
Magic Words to type: hello, moo, pizza, burn, delayed (this last one will fire after 1 second).
<textarea id="myTextarea" name="textarea" cols="40" rows="6">Type here...</textarea>
</body> </html>
</source>
With MooTools it is easy to define often used actions as custom events for elements
<source lang="html4strict">
<!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">
div.floated {
width: 400px; float: left; margin-left: 1em;
} input#myElement, div#myScrollElement {
border: 1px solid black; background-color: #f9f9f9; float: left; margin: 5px; padding: 3px; width: 134px;
} div#myDivElement {
clear: left; width: 150px;
} div#myScrollElement {
width: 200px; height: 200px; overflow: auto; float: left; background-color: #e8a3a3;
} div#myScrollElement div {
height: 500px;
} div#myOtherDivElement {
margin-top: 10px; font-weight: bold; float: left;
}
</style> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript">
// We define a custom event called "keyenter" which is based on the keyup event Element.Events.keyenter = {
base: "keyup",
condition: function(e){
// We can basically put any logic here.
// In this example we return true, when the pressed key is the
// Enter-Button so the keyenter event gets fired.
return e.key=="enter";
}
}; window.addEvent("domready", function(){
// First Example
// Here we add the custom event to the input-element
$("myElement").addEvent("keyenter", function(e){
// We can do everything here: submitting a form, sending an AJAX-Request and so on
// because it only fires when the user presses the Enter-Button
e.stop();
// But instead we only change the text of an element.
$("myDivElement").set("text", "You pressed enter").highlight();
});
// Second Example
var el = $("myScrollElement"),
color = new Color(el.getStyle("background-color")).hsb;
el.addEvent("mousewheel", function(e){
e.stop(); // prevent the mousewheel from scrolling the page.
// Again we just set the text of an element and highlight it
$("myOtherDivElement").set("text", "Wheel " + (e.wheel < 0 ? "down" : "up")).highlight();
// But we add some nice logic to it to change the background-color
var hue = color[0];
if (e.wheel < 0){
hue -= 5;
if(hue < 0) hue = 360;
} else {
hue += 5;
if (hue > 360) hue = 0;
}
color[0] = hue;
this.setStyle("background-color", color.hsbToRgb());
});
});
</script> <title>Slider Demo</title>
</head> <body>
Custom Events
Introduction
With MooTools it is easy to define often used actions as custom events for elements. This is especially useful for input-elements. This demo shows you how to define a custom event, that only fires when you press the Enter-Button inside the given element.
<input type="text" id="myElement" name="myElement" value="Press enter here" />
Why? Custom events are really useful when the standard events are just not enough. See the Mouseenter-Demo for a more advanced example.
Mousewheel-Event
The mousewheel event is a custom MooTools-Event, which allows you to use the scrollwheel as an event, because every browser handles it differently. Try to use your mousewheel over the element below.
</body> </html>
</source>
