SOURCE CODE: Edge Virtual DOM Events
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Edge Virtual DOM Events | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="Uize.Dom.VirtualEvent Uize.Dom.VirtualEvents.Edge"/>
  <meta name="description" content="Edge related virtual DOM events let you perform different actions based upon from which edge the mouse enters or exits a node. See how this works."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <style type="text/css">
    .testNode {
      width: 61px;
      height: 61px;
      border: 8px solid #000;
      margin: 10px;
      float: left;
    }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Edge Virtual DOM Events
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/edge-virtual-dom-events.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>This example demonstrates the edge related virtual DOM events - such as <code>mouseEnterLeft</code>, <code>mouseEnterBottom</code>, <code>mouseExitTop</code>, <code>mouseExitRight</code>, etc. - that are available in the <a href="../reference/Uize.Dom.VirtualEvents.Edge.html"><code>Uize.Dom.VirtualEvents.Edge</code></a> module.</p>

    <p>Each of the squares below is wired up with handlers for enter and exit events for all of their edges. The enter events are wired to fade the color of the border at which the mouse enters a square from orange to black. The exit events are wired to fade the color of the border at which the mouse exits a square from cyan to black. The animation of the border color is done using the <code>Uize.Fx.fadeStyle</code> method of the <a href="../reference/Uize.Fx.html"><code>Uize.Fx</code></a> module. Move your mouse around the squares and see how the various edges light up in response to executing the handlers for the edge virtual DOM events that are wired up. All of the enter and exit events for all edges are wired up for all the squares - in a single statement - by using the <code>Uize.Dom.Basics.find</code> method of the <a href="../reference/Uize.Dom.Basics.html"><code>Uize.Dom.Basics</code></a> module to obtain a list of the nodes with the value "testNode" for their <code>class</code> attribute.</p>
  </div>

  <!-- HTML with multiple nodes for wiring mouseEnter[Edge] virtual DOM events -->

  <!-- row 1 -->
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>

  <!-- row 2 -->
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>

  <!-- row 3 -->
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>
    <div class="testNode insetBackgroundColor"></div>

  <br style="clear:left;"/>
</div>

<!-- JavaScript code to make the HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Dom.Basics',
    'Uize.Dom.VirtualEvents.Edge',
    'Uize.Fx'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** wire up the page widget ***/
      page.wireUi ();

    /*** wire up virtual DOM events on test nodes ***/
      function fadeNodeBorderColorToBlack (node,edge,startColor) {
        var styleProperty = 'border' + edge + 'Color';
        Uize.Fx.fadeStyle (node,Uize.pairUp (styleProperty,startColor),Uize.pairUp (styleProperty,'0'),1000);
      }
      function fadeNodeBorderColorOnEnter (node,edge) {fadeNodeBorderColorToBlack (node,edge,'fa0')}
      function fadeNodeBorderColorOnExit (node,edge) {fadeNodeBorderColorToBlack (node,edge,'0c8')}

      page.wireNode (
        Uize.Dom.Basics.find ({className:/\btestNode\b/}),
        {
          'mouseEnterLeft()':function () {fadeNodeBorderColorOnEnter (this,'Left')},
          'mouseEnterRight()':function () {fadeNodeBorderColorOnEnter (this,'Right')},
          'mouseEnterTop()':function () {fadeNodeBorderColorOnEnter (this,'Top')},
          'mouseEnterBottom()':function () {fadeNodeBorderColorOnEnter (this,'Bottom')},

          'mouseExitLeft()':function () {fadeNodeBorderColorOnExit (this,'Left')},
          'mouseExitRight()':function () {fadeNodeBorderColorOnExit (this,'Right')},
          'mouseExitTop()':function () {fadeNodeBorderColorOnExit (this,'Top')},
          'mouseExitBottom()':function () {fadeNodeBorderColorOnExit (this,'Bottom')}
        }
      );
  }
);

</script>

</body>
</html>