A.Node Class
alloy-ui/src/aui-node/js/aui-node-base.js:106
Parent Module: aui-node
Constructor
A.Node
()
Example:
<div id="toggleColor">Click me!</div>
// Create an AUI instance and load the 'aui-node' module
YUI().use(
'aui-node',
function(Y) {
// Select the node(s) using a css selector string
var node = Y.one('#toggleColor');
// Change the background color on a click
event
node.on(
'click',
function() {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
node.setStyle('background', '#' + randomColor);
}
);
}
);
Index
Methods
- _get
- _getBoxStyleAsNumber
- _getText
- _hide
- _hoverOutHandler
- _hoverOverHandler
- _ioComplete
- _isHidden
- _place
- _show
- addClass
- all
- ancestor
- ancestors
- ancestorsByClassName
- append
- appendChild
- appendTo
- attr
- blur
- center
- clearData
- clone
- cloneNode
- compareTo
- contains
- create
- createCaption
- delegate
- destroy
- empty
- focus
- generateID
- get
- getAttribute
- getAttrs
- getBorderWidth
- getCenterXY
- getComputedStyle
- getData
- getDOM
- getDOMNode
- getElementsByTagName
- getHTML
- getMargin
- getPadding
- getStyle
- getX
- getXY
- getY
- guid
- hasAttribute
- hasChildNodes
- hasClass
- height
- hide
- hideAccessible
- hover
- html
- inDoc
- innerHeight
- innerWidth
- inRegion
- insert
- insertBefore
- intersect
- invoke
- load
- next
- on
- one
- outerHeight
- outerHTML
- outerWidth
- placeAfter
- placeBefore
- prepend
- prependTo
- previous
- purge
- radioClass
- remove
- removeAttribute
- removeChild
- removeClass
- replace
- replaceChild
- replaceClass
- reset
- resetId
- scrollIntoView
- select
- selectable
- selectText
- set
- setAttribute
- setAttrs
- setData
- setHTML
- setStyle
- setStyles
- setX
- setXY
- setY
- show
- showAccessible
- siblings
- simulate
- simulateGesture
- submit
- swallowEvent
- swap
- swapXY
- test
- text
- toggle
- toggleAccessible
- toggleClass
- toggleView
- toString
- transition
- unselectable
- unwrap
- val
- width
- wrap
Properties
Methods
_get
-
attr
Helper method for get.
Parameters:
-
attr
StringThe attribute
Returns:
The current value of the attribute
_getBoxStyleAsNumber
-
sides
-
map
Returns the combined size of the box style for the specified sides.
Parameters:
-
sides
StringCan be t, r, b, l or any combination of those to represent the top, right, bottom, or left sides.
-
map
StringAn object mapping mapping the "sides" param to the a CSS value to retrieve
Returns:
_getText
-
childNodes
Extracts text content from the passed nodes.
Parameters:
-
childNodes
Native NodeList
_hide
()
private
Overrides Y.Node._hide. Adds aui-hide to the node's cssClass
_hoverOutHandler
-
event
The event handler for the "out" function that is fired for events attached via the hover method.
Parameters:
-
event
EventFacade
_hoverOverHandler
-
event
The event handler for the "over" function that is fired for events attached via the hover method.
Parameters:
-
event
EventFacade
_ioComplete
-
code
-
response
-
args
The default IO complete handler.
Parameters:
-
code
StringThe response code.
-
response
ObjectThe response object.
-
args
ArrayAn array containing the callback and selector
_isHidden
()
Boolean
private
Returns whether the node is hidden by YUI or not. The hidden status is determined by the 'hidden' attribute and the value of the 'display' CSS property.
Returns:
true
if the node is hidden.
_place
-
newNode
-
refNode
Places a node or html string at a specific location
_show
()
private
Overrides Y.Node._show. Removes aui-hide from the node's cssClass
addClass
-
className
Adds a class name to the node.
Parameters:
-
className
Stringthe class name to add to the node's class attribute
all
-
selector
Retrieves a NodeList based on the given CSS selector.
Parameters:
-
selector
StringThe CSS selector to test against.
Returns:
A NodeList instance for the matching HTMLCollection/Array.
ancestor
-
fn
-
testSelf
-
stopFn
Returns the nearest ancestor that passes the test applied by supplied boolean method.
Parameters:
-
fn
String | FunctionA selector string or boolean method for testing elements. If a function is used, it receives the current node being tested as the only argument. If fn is not passed as an argument, the parent node will be returned.
-
testSelf
Booleanoptional Whether or not to include the element in the scan
-
stopFn
String | Functionoptional A selector string or boolean method to indicate when the search should stop. The search bails when the function returns true or the selector matches. If a function is used, it receives the current node being tested as the only argument.
Returns:
The matching Node instance or null if not found
ancestors
-
fn
-
testSelf
Returns the ancestors that pass the test applied by supplied boolean method.
Parameters:
-
fn
String | FunctionA selector string or boolean method for testing elements.
-
testSelf
Booleanoptional Whether or not to include the element in the scan If a function is used, it receives the current node being tested as the only argument.
Returns:
A NodeList instance containing the matching elements
ancestorsByClassName
-
className
-
testSelf
Returns the current ancestors of the node element filtered by a className. This is an optimized method for finding ancestors by a specific CSS class name.
Example:
A.one('#nodeId').ancestorsByClassName('aui-hide');
Parameters:
-
className
StringA selector to filter the ancestor elements against.
-
testSelf
Booleanoptional Whether or not to include the element in the scan
Returns:
append
-
content
Inserts the content as the lastChild of the node.
Parameters:
-
content
String | Node | HTMLElementThe content to insert. Use <a href="../classes/Escape.html#method_html">
Y.Escape.html()
</a> to escape html content.
appendChild
-
node
Parameters:
-
node
String | HTMLElement | NodeNode to be appended. Use <a href="../classes/Escape.html#method_html">
Y.Escape.html()
</a> to escape html content.
Returns:
The appended node
appendTo
-
node
Appends the node to the given node.
Parameters:
-
node
Node | HTMLElement | StringThe node to append to. If
node
is a string it will be considered as a css selector and only the first matching node will be used.
Example:
// appendTo returns the node that has been created beforehand
Y.Node.create('<p></p>').appendTo('body').set('text', 'hello world!');
attr
-
name
-
value
Gets or sets 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
StringThe name of the attribute
-
value
StringThe value of the attribute to be set. Optional.
Returns:
blur
()
chainable
Passes through to DOM method.
center
-
val
Centralizes the current Node instance with the passed val
Array, Node,
String, or Region, if not specified, the body will be used.
Example:
var node = A.one('#nodeId');
// Center the node
with the #container
.
node.center('#container');
Parameters:
-
val
Array | Node | Region | StringArray, Node, String, or Region to center with.
clearData
-
name
Clears internally stored data.
Parameters:
-
name
StringThe name of the field to clear. If no name is given, all data is cleared.
clone
()
Node
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');
Returns:
cloneNode
-
deep
Passes through to DOM method.
Parameters:
-
deep
BooleanWhether or not to perform a deep clone, which includes subtree and attributes
Returns:
The clone
compareTo
-
refNode
Compares nodes to determine if they match. Node instances can be compared to each other and/or HTMLElements.
Parameters:
-
refNode
HTMLElement | NodeThe reference node to compare to the node.
Returns:
True if the nodes match, false if they do not.
contains
-
needle
Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.
Parameters:
-
needle
Node | HTMLElementThe possible node or descendent
Returns:
Whether or not this node is the needle its ancestor
create
-
html
-
doc
Creates a new Node using the provided markup string.
Parameters:
-
html
StringThe markup used to create the element. Use <a href="../classes/Escape.html#method_html">
Y.Escape.html()
</a> to escape html content. -
doc
HTMLDocumentAn optional document context
Returns:
A Node instance bound to a DOM node or fragment
createCaption
()
chainable
Passes through to DOM method. Only valid on TABLE elements
delegate
-
type
-
fn
-
spec
-
context
-
args
<p>Sets up a delegation listener for an event occurring inside the Node. The delegated event will be verified against a supplied selector or filtering function to test if the event references at least one node that should trigger the subscription callback.</p>
<p>Selector string filters will trigger the callback if the event originated from a node that matches it or is contained in a node that matches it. Function filters are called for each Node up the parent axis to the subscribing container node, and receive at each level the Node and the event object. The function should return true (or a truthy value) if that Node should trigger the subscription callback. Note, it is possible for filters to match multiple Nodes for a single event. In this case, the delegate callback will be executed for each matching Node.</p>
<p>For each matching Node, the callback will be executed with its 'this' object set to the Node matched by the filter (unless a specific context was provided during subscription), and the provided event's <code>currentTarget</code> will also be set to the matching Node. The containing Node from which the subscription was originally made can be referenced as <code>e.container</code>.
Parameters:
-
type
Stringthe event type to delegate
-
fn
Functionthe callback function to execute. This function will be provided the event object for the delegated event.
-
spec
String | Functiona selector that must match the target of the event or a function to test target and its parents for a match
-
context
Objectoptional argument that specifies what 'this' refers to.
-
args
Any multiple0..n additional arguments to pass on to the callback function. These arguments will be added after the event object.
Returns:
the detach handle
destroy
-
recursivePurge
Nulls internal node references, removes any plugins and event listeners. Note that destroy() will not remove the node from its parent or from the DOM. For that functionality, call remove(true).
Parameters:
-
recursivePurge
Boolean(optional) Whether or not to remove listeners from the node's subtree (default is false)
empty
()
chainable
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();
focus
()
chainable
Passes through to DOM method.
generateID
()
String
Applies a unique ID to the node if none exists
Returns:
The existing or generated ID
get
-
attr
Returns an attribute value on the Node instance.
Unless pre-configured (via Node.ATTRS
), get hands
off to the underlying DOM node. Only valid
attributes/properties for the node will be queried.
Parameters:
-
attr
StringThe attribute
Returns:
The current value of the attribute
getAttribute
-
name
Allows getting attributes on DOM nodes, normalizing in some cases. This passes through to the DOM node, allowing for custom attributes.
Parameters:
-
name
StringThe attribute name
Returns:
The attribute value
getAttrs
-
attrs
Returns an object containing the values for the requested attributes.
Parameters:
-
attrs
Arrayan array of attributes to get values
Returns:
An object with attribute name/value pairs.
getBorderWidth
-
sides
Returns the combined width of the border for the specified sides.
Parameters:
-
sides
StringCan be t, r, b, l or any combination of those to represent the top, right, bottom, or left sides.
Returns:
getCenterXY
()
Array
Gets the current center position of the node in page coordinates.
Returns:
The XY position of the node
getComputedStyle
-
attr
Returns the computed value for the given style property. Use camelCase (e.g. 'backgroundColor') for multi-word properties.
Parameters:
-
attr
StringThe style attribute to retrieve.
Returns:
The computed value of the style property for the element.
getData
-
name
Retrieves arbitrary data stored on a Node instance. If no data is associated with the Node, it will attempt to retrieve a value from the corresponding HTML data attribute. (e.g. node.getData('foo') will check node.getAttribute('data-foo')).
Parameters:
-
name
StringOptional name of the data field to retrieve. If no name is given, all data is returned.
Returns:
Whatever is stored at the given field, or an object hash of all fields.
getDOM
()
HTMLNode
Retrieves the DOM node bound to a Node instance. See getDOMNode.
Returns:
The DOM node bound to the Node instance.
getDOMNode
()
HTMLElement
Returns the DOM node bound to the Node instance
Returns:
getElementsByTagName
-
tagName
Passes through to DOM method.
Parameters:
-
tagName
StringThe tagName to collect
Returns:
A NodeList representing the HTMLCollection
getHTML
()
String
Returns the node's current html content (e.g. innerHTML)
Returns:
The html content
getMargin
-
sides
Returns the combined size of the margin for the specified sides.
Parameters:
-
sides
StringCan be t, r, b, l or any combination of those to represent the top, right, bottom, or left sides.
Returns:
getPadding
-
sides
Returns the combined width of the border for the specified sides.
Parameters:
-
sides
StringCan be t, r, b, l or any combination of those to represent the top, right, bottom, or left sides.
Returns:
getStyle
-
attr
Returns the style's current value. Use camelCase (e.g. 'backgroundColor') for multi-word properties.
Parameters:
-
attr
StringThe style attribute to retrieve.
Returns:
The current value of the style property for the element.
getX
()
Number
Gets the current position of the node in page coordinates.
Returns:
The X position of the node
getXY
()
Array
Gets the current position of the node in page coordinates.
Returns:
The XY position of the node
getY
()
Number
Gets the current position of the node in page coordinates.
Returns:
The Y position of the node
guid
()
String
Sets 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.
Returns:
The current id of the node
hasAttribute
-
attribute
Passes through to DOM method.
Parameters:
-
attribute
StringThe attribute to test for
Returns:
Whether or not the attribute is present
hasChildNodes
()
Boolean
Passes through to DOM method.
Returns:
Whether or not the node has any childNodes
hasClass
-
className
Determines whether the node has the given className.
Parameters:
-
className
Stringthe class name to search for
Returns:
Whether or not the node has the specified class
height
()
Number
Returns the height of the content, not including the padding, border or margin. If a height is passed, the node's overall height is set to that size.
Example:
var node = A.one('#nodeId');
node.height(); //return content height
node.height(100); // sets box height
Returns:
hide
-
name
-
config
-
callback
Hides the node. If the "transition" module is loaded, hide optionally animates the hiding of the node using either the default transition effect ('fadeOut'), or the given named effect.
Parameters:
-
name
StringA named Transition effect to use as the show effect.
-
config
ObjectOptions to use with the transition.
-
callback
FunctionAn optional function to run after the transition completes.
hideAccessible
()
Hides the node, while still keeping it accessible by screen readers.
hover
-
overFn
-
outFn
Creates a hover interaction.
Parameters:
-
overFn
String -
outFn
String
Returns:
The current Node instance
html
-
value
Gets or sets 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
StringA string of html to set as the content of the node instance.
inDoc
-
doc
Determines whether the node is appended to the document.
Parameters:
-
doc
Node | HTMLElementoptional An optional document to check against. Defaults to current document.
Returns:
Whether or not this node is appended to the document.
innerHeight
()
Number
Returns the size of the box from inside of the border, which is offsetHeight plus the padding on the top and bottom.
Example:
var node = A.one('#nodeId');
node.innerHeight();
Returns:
innerWidth
()
Number
Returns the size of the box from inside of the border, which is the
offsetWidth
plus the padding on the left and right.
Example:
var node = A.one('#nodeId');
node.innerWidth();
Returns:
inRegion
-
node2
-
all
-
altRegion
Determines whether or not the node is within the given region.
Parameters:
-
node2
Node | ObjectThe node or region to compare with.
-
all
BooleanWhether or not all of the node must be in the region.
-
altRegion
ObjectAn alternate region to use (rather than this node's).
Returns:
True if in region, false if not.
insert
-
content
-
where
Inserts the content before the reference node.
Parameters:
-
content
String | Node | HTMLElement | NodeList | HTMLCollectionThe content to insert. Use <a href="../classes/Escape.html#method_html">
Y.Escape.html()
</a> to escape html content. -
where
Int | Node | HTMLElement | StringThe position to insert at. Possible "where" arguments <dl> <dt>Y.Node</dt> <dd>The Node to insert before</dd> <dt>HTMLElement</dt> <dd>The element to insert before</dd> <dt>Int</dt> <dd>The index of the child element to insert before</dd> <dt>"replace"</dt> <dd>Replaces the existing HTML</dd> <dt>"before"</dt> <dd>Inserts before the existing HTML</dd> <dt>"before"</dt> <dd>Inserts content before the node</dd> <dt>"after"</dt> <dd>Inserts content after the node</dd> </dl>
intersect
-
node2
-
altRegion
Compares the intersection of the node with another node or region
Parameters:
-
node2
Node | ObjectThe node or region to compare with.
-
altRegion
ObjectAn alternate region to use (rather than this node's).
Returns:
An object representing the intersection of the regions.
invoke
-
method
-
[args*]
Invokes a method on the Node instance
Parameters:
-
method
StringThe name of the method to invoke
-
[args*]
Any optionalArguments to invoke the method with.
Returns:
Whatever the underly method returns. DOM Nodes and Collections return values are converted to Node/NodeList instances.
load
-
url
-
selector
-
callback
Loads content from the given url and replaces the Node's existing content with the remote content.
Parameters:
-
url
StringThe URL to load via XMLHttpRequest.
-
selector
StringAn optional selector representing a subset of an HTML document to load.
-
callback
FunctionAn optional function to run after the content has been loaded.
next
-
fn
-
[all]
Returns the next matching sibling. Returns the nearest element node sibling if no method provided.
Parameters:
-
fn
String | FunctionA selector or boolean method for testing elements. If a function is used, it receives the current node being tested as the only argument.
-
[all]
Boolean optionalWhether text nodes as well as element nodes should be returned, or just element nodes will be returned(default)
Returns:
Node instance or null if not found
on
-
type
-
fn
-
[context]
-
[arg*]
Subscribe a callback function to execute in response to a DOM event or custom event.
Most DOM events are associated with a preventable default behavior such as
link clicks navigating to a new page. Callbacks are passed a DOMEventFacade
object as their first argument (usually called e
) that can be used to
prevent this default behavior with e.preventDefault()
. See the
DOMEventFacade
API for all available properties and methods on the object.
If the event name passed as the first parameter is not a whitelisted DOM event,
it will be treated as a custom event subscriptions, allowing
node.fire('customEventName')
later in the code. Refer to the Event user guide
for the full DOM event whitelist.
By default, the this
object in the callback will refer to the subscribed
Node
.
Returning false
from a callback is supported as an alternative to calling
e.preventDefault(); e.stopPropagation();
. However, it is recommended to use
the event methods.
Parameters:
-
type
StringThe name of the event
-
fn
FunctionThe callback to execute in response to the event
-
[context]
Object optionalOverride
this
object in callback -
[arg*]
Any optional0..n additional arguments to supply to the subscriber
Returns:
A subscription handle capable of detaching that subscription
Example:
Y.one("#my-form").on("submit", function (e) {
e.preventDefault();
// proceed with ajax form submission instead...
});
one
-
selector
Retrieves a single Node instance, the first element matching the given CSS selector. Returns null if no match found.
Parameters:
-
selector
StringThe CSS selector to test against.
Returns:
A Node instance for the matching HTMLElement or null if no match found.
outerHeight
()
Number
Returns the outer height of the box including the border, if true is passed as the first argument, the margin is included.
Example:
var node = A.one('#nodeId');
node.outerHeight();
node.outerHeight(true); // includes margin
Returns:
outerHTML
()
String
Gets the outerHTML of a node, which islike innerHTML, except that it actually contains the HTML of the node itself.
Returns:
The outerHTML of the given element.
outerWidth
()
Number
Returns the outer width of the box including the border, if true is passed as the first argument, the margin is included.
Example:
var node = A.one('#nodeId');
node.outerWidth();
node.outerWidth(true); // includes margin
Returns:
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
NodeNode to insert.
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
NodeNode to insert.
prepend
-
content
Inserts the content as the firstChild of the node.
Parameters:
-
content
String | Node | HTMLElementThe content to insert. Use <a href="../classes/Escape.html#method_html">
Y.Escape.html()
</a> to escape html content.
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 | StringA selector, element, HTML string, Node
previous
-
fn
-
[all]
Returns the previous matching sibling. Returns the nearest element node sibling if no method provided.
Parameters:
-
fn
String | FunctionA selector or boolean method for testing elements. If a function is used, it receives the current node being tested as the only argument.
-
[all]
Boolean optionalWhether text nodes as well as element nodes should be returned, or just element nodes will be returned(default)
Returns:
Node instance or null if not found
purge
-
recurse
-
type
Removes event listeners from the node and (optionally) its subtree
Parameters:
-
recurse
Boolean(optional) Whether or not to remove listeners from the node's subtree
-
type
String(optional) Only remove listeners of the specified type
radioClass
-
cssClass
Adds one or more CSS classes to an element and remove the class(es) from the siblings of the element.
Parameters:
-
cssClass
String
remove
-
destroy
Removes the node from its parent. Shortcut for myNode.get('parentNode').removeChild(myNode);
Parameters:
-
destroy
Booleanwhether or not to call destroy() on the node after removal.
removeAttribute
-
attribute
Passes through to DOM method.
Parameters:
-
attribute
StringThe attribute to be removed
removeChild
-
node
Passes through to DOM method.
Parameters:
-
node
HTMLElement | NodeNode to be removed
Returns:
The removed node
removeClass
-
className
Removes a class name from the node.
Parameters:
-
className
Stringthe class name to remove from the node's class attribute
replace
-
newNode
Replace the node with the other node. This is a DOM update only and does not change the node bound to the Node instance. Shortcut for myNode.get('parentNode').replaceChild(newNode, myNode);
Parameters:
-
newNode
Node | HTMLElementNode to be inserted
replaceClass
-
oldClassName
-
newClassName
Replace a class with another class on the node. If no oldClassName is present, the newClassName is simply added.
Parameters:
-
oldClassName
Stringthe class name to be replaced
-
newClassName
Stringthe class name that will be replacing the old class name
reset
()
chainable
Passes through to DOM method. Only valid on FORM elements
resetId
-
prefix
Generates an unique identifier and reset the id attribute of the node instance using the new value. Invokes the guid.
Parameters:
-
prefix
StringOptional prefix for the guid.
scrollIntoView
()
chainable
Passes through to DOM method.
select
()
chainable
Passes through to DOM method.
selectable
-
noRecurse
Enables text selection for this element (normalized across browsers).
Parameters:
-
noRecurse
Object
selectText
-
start
-
end
Selects a substring of text inside of the input element.
set
-
attr
-
val
Sets an attribute on the Node instance. Unless pre-configured (via Node.ATTRS), set hands off to the underlying DOM node. Only valid attributes/properties for the node will be set. To set custom attributes use setAttribute.
Parameters:
-
attr
StringThe attribute to be set.
-
val
AnyThe value to set the attribute to.
setAttribute
-
name
-
value
Allows setting attributes on DOM nodes, normalizing in some cases. This passes through to the DOM node, allowing for custom attributes.
Parameters:
-
name
StringThe attribute name
-
value
StringThe value to set
setAttrs
-
attrMap
Sets multiple attributes.
Parameters:
-
attrMap
Objectan object of name/value pairs to set
setData
-
name
-
val
Stores arbitrary data on a Node instance. This is not stored with the DOM node.
Parameters:
-
name
StringThe name of the field to set. If no val is given, name is treated as the data and overrides any existing data.
-
val
AnyThe value to be assigned to the field.
setHTML
-
content
Replaces the node's current html content with the content provided.
Note that this passes to innerHTML and is not escaped.
Use <a href="../classes/Escape.html#method_html">Y.Escape.html()
</a>
to escape html content or set('text')
to add as text.
setStyle
-
attr
-
val
Sets a style property of the node. Use camelCase (e.g. 'backgroundColor') for multi-word properties.
Parameters:
-
attr
StringThe style attribute to set.
-
val
String | NumberThe value.
setStyles
-
hash
Sets multiple style properties on the node. Use camelCase (e.g. 'backgroundColor') for multi-word properties.
Parameters:
-
hash
ObjectAn object literal of property:value pairs.
setX
-
x
Set the position of the node in page coordinates, regardless of how the node is positioned.
Parameters:
-
x
NumberX value for new position (coordinates are page-based)
setXY
-
xy
Set the position of the node in page coordinates, regardless of how the node is positioned.
Parameters:
-
xy
ArrayContains X & Y values for new position (coordinates are page-based)
setY
-
y
Set the position of the node in page coordinates, regardless of how the node is positioned.
Parameters:
-
y
NumberY value for new position (coordinates are page-based)
show
-
name
-
config
-
callback
Makes the node visible. If the "transition" module is loaded, show optionally animates the showing of the node using either the default transition effect ('fadeIn'), or the given named effect.
Parameters:
-
name
StringA named Transition effect to use as the show effect.
-
config
ObjectOptions to use with the transition.
-
callback
FunctionAn optional function to run after the transition completes.
showAccessible
()
Shows the node. Fires after the node-base show
method to clean up nodes
which were hidden through the hideAccessible
method.
siblings
-
fn
Returns all matching siblings. Returns all siblings if no method provided.
Parameters:
-
fn
String | FunctionA selector or boolean method for testing elements. If a function is used, it receives the current node being tested as the only argument.
Returns:
NodeList instance bound to found siblings
simulate
-
type
-
options
Simulates an event on the node.
Parameters:
-
type
StringThe type of event (i.e., "click").
-
options
Object(Optional) Extra options to copy onto the event object.
simulateGesture
-
name
-
[options]
-
[cb]
Simulates the higher user level gesture of the given name on this node.
This method generates a set of low level touch events(Apple specific gesture
events as well for the iOS platforms) asynchronously. Note that gesture
simulation is relying on Y.Event.simulate()
method to generate
the touch events under the hood. The Y.Event.simulate()
method
itself is a synchronous method.
Supported gestures are tap
, doubletap
, press
, move
, flick
, pinch
and rotate
.
The pinch
gesture is used to simulate the pinching and spreading of two
fingers. During a pinch simulation, rotation is also possible. Essentially
pinch
and rotate
simulations share the same base implementation to allow
both pinching and rotation at the same time. The only difference is pinch
requires start
and end
option properties while rotate
requires rotation
option property.
The pinch
and rotate
gestures can be described as placing 2 fingers along a
circle. Pinching and spreading can be described by start and end circles while
rotation occurs on a single circle. If the radius of the start circle is greater
than the end circle, the gesture becomes a pinch, otherwise it is a spread spread.
Parameters:
-
name
StringThe name of the supported gesture to simulate. The supported gesture name is one of "tap", "doubletap", "press", "move", "flick", "pinch" and "rotate".
-
[options]
Object optionalExtra options used to define the gesture behavior:
Valid options properties for the
tap
gesture:-
[point] (Optional) Indicates the [x,y]
Array optionalcoordinates where the tap should be simulated. Default is the center of the node element.
-
[hold=10]
Number optional(Optional) The hold time in milliseconds. This is the time between
touchstart
andtouchend
event generation. -
[times=1]
Number optional(Optional) Indicates the number of taps.
-
[delay=10]
Number optional(Optional) The number of milliseconds before the next tap simulation happens. This is valid only when
times
is more than 1.Valid options properties for the
doubletap
gesture: -
[point] (Optional) Indicates the [x,y]
Array optionalcoordinates where the doubletap should be simulated. Default is the center of the node element.
Valid options properties for the
press
gesture: -
[point] (Optional) Indicates the [x,y]
Array optionalcoordinates where the press should be simulated. Default is the center of the node element.
-
[hold=3000]
Number optional(Optional) The hold time in milliseconds. This is the time between
touchstart
andtouchend
event generation. Default is 3000ms (3 seconds).Valid options properties for the
move
gesture: -
[path]
Object optional(Optional) Indicates the path of the finger movement. It's an object with three optional properties:
point
,xdist
andydist
.-
[point]
Array optionalA starting point of the gesture. Default is the center of the node element. -
[xdist=200]
Number optionalA distance to move in pixels along the X axis. A negative distance value indicates moving left. -
[ydist=0]
Number optionalA distance to move in pixels along the Y axis. A negative distance value indicates moving up.
-
-
[duration=1000]
Number optional(Optional) The duration of the gesture in milliseconds.
Valid options properties for the
flick
gesture: -
[point] (Optional) Indicates the [x, y]
Array optionalcoordinates where the flick should be simulated. Default is the center of the node element.
-
[axis='x']
String optional(Optional) Valid values are either "x" or "y". Indicates axis to move along. The flick can move to one of 4 directions(left, right, up and down).
-
[distance=200]
Number optional(Optional) Distance to move in pixels
-
[duration=1000]
Number optional(Optional) The duration of the gesture in milliseconds. User given value could be automatically adjusted by the framework if it is below the minimum velocity to be a flick gesture.
Valid options properties for the
pinch
gesture: -
[center]
Array optional(Optional) The center of the circle where two fingers are placed. Default is the center of the node element.
-
[r1]
Number optional(Required) Pixel radius of the start circle where 2 fingers will be on when the gesture starts. The circles are centered at the center of the element.
-
[r2]
Number optional(Required) Pixel radius of the end circle when this gesture ends.
-
[duration=1000]
Number optional(Optional) The duration of the gesture in milliseconds.
-
[start=0]
Number optional(Optional) Starting degree of the first finger. The value is relative to the path of the north. Default is 0 (i.e., 12:00 on a clock).
-
[rotation=0]
Number optional(Optional) Degrees to rotate from the starting degree. A negative value means rotation to the counter-clockwise direction.
Valid options properties for the
rotate
gesture: -
[center]
Array optional(Optional) The center of the circle where two fingers are placed. Default is the center of the node element.
-
[r1]
Number optional(Optional) Pixel radius of the start circle where 2 fingers will be on when the gesture starts. The circles are centered at the center of the element. Default is a fourth of the node element width or height, whichever is smaller.
-
[r2]
Number optional(Optional) Pixel radius of the end circle when this gesture ends. Default is a fourth of the node element width or height, whichever is smaller.
-
[duration=1000]
Number optional(Optional) The duration of the gesture in milliseconds.
-
[start=0]
Number optional(Optional) Starting degree of the first finger. The value is relative to the path of the north. Default is 0 (i.e., 12:00 on a clock).
-
[rotation]
Number optional(Required) Degrees to rotate from the starting degree. A negative value means rotation to the counter-clockwise direction.
-
-
[cb]
Function optionalThe callback to execute when the asynchronouse gesture simulation is completed.
-
err
ErrorAn error object if the simulation is failed.
-
Example:
var node = Y.one("#target");
// double tap example
node.simulateGesture("doubletap", function() {
// my callback function
});
// flick example from the center of the node, move 50 pixels down for 50ms)
node.simulateGesture("flick", {
axis: y,
distance: -100
duration: 50
}, function() {
// my callback function
});
// simulate rotating a node 75 degrees counter-clockwise
node.simulateGesture("rotate", {
rotation: -75
});
// simulate a pinch and a rotation at the same time.
// fingers start on a circle of radius 100 px, placed at top/bottom
// fingers end on a circle of radius 50px, placed at right/left
node.simulateGesture("pinch", {
r1: 100,
r2: 50,
start: 0
rotation: 90
});
submit
()
chainable
Passes through to DOM method. Only valid on FORM elements
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 | ArrayAn event or array of events to stop from bubbling
-
preventDefault
Boolean(optional) true to prevent the default action too
swap
-
otherNode
Swap DOM locations with the given node. This does not change which DOM node each Node instance refers to.
Parameters:
-
otherNode
NodeThe node to swap with
swapXY
-
otherNode
Swaps the XY position of this node with another node.
Parameters:
-
otherNode
Node | HTMLElementThe node to swap with.
test
-
selector
Test if the supplied node matches the supplied selector.
Parameters:
-
selector
StringThe CSS selector to test against.
Returns:
Whether or not the node matches the selector.
text
-
text
Gets or sets 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
StringA string of text to set as the content of the node instance.
toggle
-
on
-
callback
Displays or hide the node instance.
NOTE: This method assume that your node were hidden because of the
'aui-hide' css class were being used. This won't manipulate the inline
style.display
property.
Parameters:
-
on
BooleanWhether to force the toggle. Optional.
-
callback
FunctionA function to run after the visibility change. Optional.
toggleAccessible
-
force
Toggles the node visibility, while still keeping it accessible by screen
readers.
Parameters:
-
force
BooleanIf true the node will be shown, otherwise it will be hidden.
toggleClass
-
className
-
force
If the className exists on the node it is removed, if it doesn't exist it is added.
Parameters:
-
className
Stringthe class name to be toggled
-
force
BooleanOption to force adding or removing the class.
toggleView
-
[on]
-
[callback]
Displays or hides the node. If the "transition" module is loaded, toggleView optionally animates the toggling of the node using given named effect.
Parameters:
-
[on]
Boolean optionalAn optional boolean value to force the node to be shown or hidden
-
[callback]
Function optionalAn optional function to run after the transition completes.
toString
()
String
The method called when outputting Node instances as strings
Returns:
A string representation of the Node instance
transition
-
config
-
callback
Animate one or more css properties to a given value. Requires the "transition" module. <pre>example usage: Y.one('#demo').transition({ duration: 1, // in seconds, default is 0.5 easing: 'ease-out', // default is 'ease' delay: '1', // delay start for 1 second, default is 0
height: '10px',
width: '10px',
opacity: { // per property
value: 0,
duration: 2,
delay: 2,
easing: 'ease-in'
}
});
</pre>
Parameters:
-
config
ObjectAn object containing one or more style properties, a duration and an easing.
-
callback
FunctionA function to run after the transition has completed.
unselectable
-
noRecurse
Disables text selection for this element (normalized across browsers).
Parameters:
-
noRecurse
Object
unwrap
()
chainable
Removes the node's parent node.
val
-
value
Gets or sets 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
StringValue to be set. Optional.
width
()
Number
Returns the width of the content, not including the padding, border or margin. If a width is passed, the node's overall width is set to that size.
Example:
var node = A.one('#nodeId');
node.width(); //return content width
node.width(100); // sets box width
Returns:
wrap
-
html
Wraps the given HTML around the node.
Parameters:
-
html
StringThe markup to wrap around the node.
Properties
_node
HTMLElement
private
The underlying DOM node bound to the Y.Node instance