Просмотр исходного текста страницы JavaScript DHTML/Mootools/Action

==Add multiple Events to an Element, create custom Events and fire an Event==




   
  <!-- start source code -->
   
    <source lang="html4strict">
 
<!--
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>

   
     
  </source>
    
   


==With MooTools it is easy to define often used actions as custom events for elements==




   
  <!-- start source code -->
   
    <source lang="html4strict">
 
<!--
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">
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>
  <h1>Custom Events</h1>
  <h2>Introduction</h2>
  <p>
    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.
  </p>
  <input type="text" id="myElement" name="myElement" value="Press enter here" />
  <div class="help floated">
    <strong>Why?</strong> Custom events are really useful when the standard
    events are just not enough. See the Mouseenter-Demo for a more advanced
    example.
  </div>
  <div id="myDivElement"></div>
  <h2>Mousewheel-Event</h2>
  <p>
    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.
  </p>
  <div id="myScrollElement"><div></div></div>
  <div id="myOtherDivElement"></div>
</body>
</html>

   
     
  </source>