Alloy UI

aui-node  1.0.1

 
Filters

Class A.Node - uses Node

Augment the YUI3 Node with more util methods. Check the list of Methods available for AUI Node.

Constructor

A.Node ( )

Properties inherited from Node:

Configuration attributes inherited from Node:

Methods

ancestors

NodeList ancestors ( selector )

Returns the current ancestors of the node element. If a selector is specified, the ancestors are filtered to match the selector.

Example:

A.one('#nodeId').ancestors('div');
Parameters:
selector <String> A selector to filter the ancestor elements against.

appendTo

String appendTo ( selector )

Insert the node instance to the end of the selector element.

Example:
var node = A.one('#nodeId');
// using another Node instance
var body = A.one('body');
node.appendTo(body);
// using a CSS selector
node.appendTo('#container');
Parameters:
selector <Node | String> A selector, element, HTML string, Node
Chainable: This method is chainable.

attr

String attr ( name , value )

Get or Set the value of an attribute for the first element in the set of matched elements. If only the name is passed it works as a getter.

Example:
var node = A.one('#nodeId');
node.attr('title', 'Setting a new title attribute');
// Alert the value of the title attribute: 'Setting a new title attribute'
alert( node.attr('title') );
Parameters:
name <String> The name of the attribute
value <String> The value of the attribute to be set. Optional.

center

void center ( centerWith )

Centralize the current Node instance with the passed centerWith Node, if not specified, the body will be used.

Example:
var node = A.one('#nodeId');
// Center the node with the #container.
node.center('#container');
Parameters:
centerWith <Node | String> Node to center with
Chainable: This method is chainable.

clone

Node clone ( )
Normalizes the behavior of cloning a node, which by default should not clone the events that are attached to it. Example:
var node = A.one('#nodeId');
node.clone().appendTo('body');

empty

void empty ( )

This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element.

Example:
var node = A.one('#nodeId');
node.empty();
Chainable: This method is chainable.

getDOM

HTMLNode getDOM ( )
Retrieves the DOM node bound to a Node instance. See getDOMNode.
Returns: HTMLNode
The DOM node bound to the Node instance.

guid

String guid ( prefix )
Set the id of the Node instance if the object does not have one. The generated id is based on a guid created by the stamp method.
Parameters:
prefix <string> optional guid prefix
Returns: String
The current id of the node

hide

void hide ( cssClass )

Hide the node adding a css class on it. If cssClass is not passed as argument, the className 'aui-helper-hidden' will be used by default.

NOTE: This method assume that your node were visible because the absence of 'aui-helper-hidden' css class. This won't manipulate the inline style.display property.

Parameters:
cssClass <string> Class name to hide the element. Optional.
Chainable: This method is chainable.

hover

Node hover ( overFn , outFn )
Create a hover interaction.
Parameters:
overFn <string>
outFn <string>
Returns: Node
The current Node instance

html

void html ( value )

Get or Set the HTML contents of the node. If the value is passed it's set the content of the element, otherwise it works as a getter for the current content.

Example:
var node = A.one('#nodeId');
node.html('Setting new HTML');
// Alert the value of the current content
alert( node.html() );
Parameters:
value <string> A string of html to set as the content of the node instance.

outerHTML

string outerHTML ( )
Gets the outerHTML of a node, which islike innerHTML, except that it actually contains the HTML of the node itself.
Returns: string
The outerHTML of the given element.

placeAfter

void placeAfter ( newNode )

Inserts a newNode after the node instance (i.e., as the next sibling). If the reference node has no parent, then does nothing.

Example:
var titleNode = A.one('#titleNode');
var descriptionNode = A.one('#descriptionNode');
// the description is usually shown after the title
titleNode.placeAfter(descriptionNode);
Parameters:
newNode <Node> Node to insert.
Chainable: This method is chainable.

placeBefore

void placeBefore ( newNode )

Inserts a newNode before the node instance (i.e., as the previous sibling). If the reference node has no parent, then does nothing.

Example:
var descriptionNode = A.one('#descriptionNode');
var titleNode = A.one('#titleNode');
// the title is usually shown before the description
descriptionNode.placeBefore(titleNode);
Parameters:
newNode <Node> Node to insert.
Chainable: This method is chainable.

prependTo

void prependTo ( selector )

Inserts the node instance to the begining of the selector node (i.e., insert before the firstChild of the selector).

Example:
var node = A.one('#nodeId');
node.prependTo('body');
Parameters:
selector <Node | String> A selector, element, HTML string, Node
Chainable: This method is chainable.

radioClass

void radioClass ( cssClass )
Add one or more CSS classes to an element and remove the class(es) from the siblings of the element.
Parameters:
cssClass <String>
Chainable: This method is chainable.

resetId

void resetId ( prefix )
Generate an unique identifier and reset the id attribute of the node instance using the new value. Invokes the guid.
Parameters:
prefix <String> Optional prefix for the guid.
Chainable: This method is chainable.

selectable

void selectable ( )
Enables text selection for this element (normalized across browsers).
Chainable: This method is chainable.

selectText

void selectText ( start , end )
Selects a substring of text inside of the input element.
Parameters:
start <Number> The index to start the selection range from
end <Number> The index to end the selection range at

show

void show ( cssClass )

Show the node removing a css class used to hide it. Use the same className added using the hide method. If cssClass is not passed as argument, the className 'aui-helper-hidden' will be used by default.

NOTE: This method assume that your node were hidden because of the 'aui-helper-hidden' css class were being used. This won't manipulate the inline style.display property.

Parameters:
cssClass <string> Class name to hide the element. Optional.
Chainable: This method is chainable.

swallowEvent

void swallowEvent ( eventName , preventDefault )

Stops the specified event(s) from bubbling and optionally prevents the default action.

Example:
var anchor = A.one('a#anchorId');
anchor.swallowEvent('click');
Parameters:
eventName <String/Array> an event or array of events to stop from bubbling
preventDefault <Boolean> (optional) true to prevent the default action too
Chainable: This method is chainable.

text

void text ( text )

Get or Set the combined text contents of the node instance, including it's descendants. If the text is passed it's set the content of the element, otherwise it works as a getter for the current content.

Example:
var node = A.one('#nodeId');
node.text('Setting new text content');
// Alert the value of the current content
alert( node.text() );
Parameters:
text <String> A string of text to set as the content of the node instance.

toggle

void toggle ( cssClass )

Displays or hide the node instance.

NOTE: This method assume that your node were hidden because of the 'aui-helper-hidden' css class were being used. This won't manipulate the inline style.display property.

Parameters:
cssClass <String> Class name to hide or show the element. Optional.
Chainable: This method is chainable.

unselectable

void unselectable ( )
Disables text selection for this element (normalized across browsers).
Chainable: This method is chainable.

val

void val ( value )

Get or Set the value attribute of the node instance. If the value is passed it's set the value of the element, otherwise it works as a getter for the current value.

Example:
var input = A.one('#inputId');
input.val('Setting new input value');
// Alert the value of the input
alert( input.val() );
Parameters:
value <string> Value to be set. Optional.