Fork me on GitHub

Node

Click the buttons below to see some node methods in action.

The quick brown fox jumps over the lazy dog.



<div id="demo">
  <div id="contentHolder">
    <div class="mini">
      <p>The quick brown fox jumps over the lazy dog.</p>
    </div>
  </div>
</div>
// Create an AUI instance and load the 'aui-node' module
YUI().use(
  'aui-node',
  function(Y) {
    var text = 'The quick brown fox jumps over the lazy dog.';
    var centered = false;
    var selectable = true;
    var demo = Y.one('#demo');
    var holder = Y.one('#contentHolder');

    // Create and Append button makes a new box
    Y.one('#populate').on(
      'click',
      function() {
        Y.Node.create('<div class="mini"><p>'+text+'</p></div>').appendTo(holder);
      }
    );

    // Empty button clears all boxes
    Y.one('#empty').on(
      'click',
      function() {
        holder.empty();
        holder.setStyle('position', 'static');
      }
    );

    // Toggle button hides and displays boxes
    Y.one('#toggle').on(
      'click',
      function() {
        var boxes = Y.all('.mini');
        boxes.toggle();
      }
    );

    // Selectable button turns selectability on and off
    Y.one('#select').on(
      'click',
      function() {
        if (!selectable) {
          holder.selectable();
          selectable = true;
        }
        else {
          holder.unselectable();
          selectable = false;
        }
      }
    );
  }
);