zuix.js emoji_nature API

ZxQuery class

Constructor

new ZxQuery(element) → {ZxQuery}

The constructor takes one optional argument that can be a DOM element, a node list or a valid DOM query selector string expression. If no parameter is given, the resulting ZxQuery object will wrap the root document element.

Parameters
NameTypeArgumentDescription
elementObject | ZxQuery | Array.<Node> | Node | NodeList | string | undefinedoptionalElement or list of elements to include in the ZxQuery object or any valid DOM query selector string
Returns

ZxQuery ‐ The ZxQuery object containing the given element(s).

Methods

addClass(className) → {ZxQuery}

Adds the given CSS class to the class list of all elements in the ZxQuery object.

Parameters
NameTypeDescription
classNamestringThe CSS class name.
Returns

ZxQuery ‐ The ZxQuery object itself.

append(el) → {ZxQuery}

Appends the given element or HTML string to the first element in the ZxQuery object.

Parameters
NameTypeDescription
elObject | ZxQuery | Array.<Node> | Node | NodeList | stringElement or HTML to append.
Returns

ZxQuery ‐ The ZxQuery object itself.

attach() → {ZxQuery}

Re-attaches to its parent the first element in the ZxQuery object.

Returns

ZxQuery

attr(attr, val) → {string|ZxQuery}

Gets the value of an attribute for the first element in the ZxQuery object, or sets one or more attributes for all elements in the ZxQuery object.

Parameters
NameTypeArgumentDescription
attrstring | JSONThe attribute name.
valstring | undefinedoptionalThe attribute value.
Returns

string | ZxQuery ‐ The attr attribute value when no val specified, otherwise the ZxQuery object itself.

checked(check) → {ZxQuery|boolean}

Gets the checked attribute of the first element in the ZxQuery object, or sets the checked attribute value for all elements in the ZxQuery object.

Parameters
NameTypeArgumentDescription
checkboolean | undefinedoptionalValue to assign to the 'checked' attribute.
Returns

ZxQuery | boolean

children(filter) → {ZxQuery}

Gets the children matching the given selector filter. This only applies to the first element in the ZxQuery object.

Parameters
NameTypeArgumentDescription
filterstringoptionalA valid DOM query selector filter (default: all children).
Returns

ZxQuery ‐ A new ZxQuery object containing the selected children.

css(prop, val) → {string|ZxQuery}

Gets the value of a CSS property for the first element in the ZxQuery object, or sets one or more CSS property for all elements in the ZxQuery object.

Parameters
NameTypeArgumentDescription
propstring | JSONThe CSS property name or JSON list of property/value pairs.
valstring | undefinedoptionalThe CSS property value.
Returns

string | ZxQuery ‐ The CSS property value when no val specified, otherwise the ZxQuery object itself.

detach() → {ZxQuery}

Detaches from its parent the first element in the ZxQuery object.

Returns

ZxQuery

display(mode) → {string|ZxQuery}

Gets the CSS display property of the first element in the ZxQuery object, or sets the display property value for all elements in the ZxQuery object.

Parameters
NameTypeArgumentDescription
modestring | undefinedoptionalThe display value.
Returns

string | ZxQuery ‐ The display value when no mode specified, otherwise the ZxQuery object itself.

each(iterationCallback) → {ZxQuery}

Iterates through all DOM elements in the selection. The context object this, passed to the iterationCallback(index, item) function, will be the DOM element corresponding the current iteration. index will be the iteration count, and item the current Element. The function context this will be a {ZxQuery} instance containing the current item. To interrupt the iteration loop, return false in the callback function or return true to continue to the next iteration.

Parameters
NameTypeDescription
iterationCallbackElementsIterationCallbackThe callback function to call for each element in the ZxQuery object.
Returns

ZxQuery ‐ The ZxQuery object itself.

eq(i) → {ZxQuery}

Gets a new ZxQuery object containing the element located at the given position in the current ZxQuery object.

Parameters
NameTypeDescription
inumberPosition of element.
Returns

ZxQuery ‐ A new ZxQuery object containing the selected element.

find(selector) → {ZxQuery}

Selects all descendants matching the given DOM query selector filter. This only applies to the first element in the ZxQuery object.

Parameters
NameTypeDescription
selectorstringA valid DOM query selector.
Returns

ZxQuery ‐ A new ZxQuery object containing the selected elements.

get(i) → {Node|Element|HTMLElement}

Gets the DOM Element located at the given position in the ZxQuery object. If no index is provided, the default element will be returned.

Parameters
NameTypeArgumentDescription
inumberoptionalPosition of element (default: 0).
Returns

Node | Element | HTMLElement ‐ The DOM element.

hasClass(className) → {boolean}

Returns true if the first element in the ZxQuery object contains the given CSS class.

Parameters
NameTypeDescription
classNamestringThe CSS class name.
Returns

booleantrue if the element contains the given CSS class, false otherwise.

hide() → {ZxQuery}

Sets the CSS display property to 'none'.

Returns

ZxQuery ‐ The ZxQuery object itself.

html(htmlText) → {ZxQuery|string}

Gets the HTML string of the first element in the ZxQuery object, or sets the HTML string for all elements in the ZxQuery object.

Parameters
NameTypeArgumentDescription
htmlTextstring | undefinedoptionalHTML text.
Returns

ZxQuery | string

index(el) → {number}

If no el is given, returns the position of the first element in the ZxQuery object relative to its parent's children list, otherwise the position of the given el in the ZxQuery object selection.

Parameters
NameTypeArgumentDescription
elZxQueryoptional
Returns

number

insert(index, el) → {ZxQuery}

Inserts the given child element before the one located at the specified index to the first element in the ZxQuery object.

Parameters
NameTypeDescription
indexnumberPosition where to insert el Element.
elObject | ZxQuery | Array.<Node> | Node | NodeListElement to insert.
Returns

ZxQuery ‐ The ZxQuery object itself.

isEmpty() → {boolean}

Returns true if the first element markup code is empty.

Returns

booleantrue if the element is empty, false otherwise.

isPlaying() → {boolean|*}

Returns true if a transition or animation is running.

Returns

boolean | ***

length() → {Number}

Gets the number of elements in the ZxQuery object.

Returns

Number ‐ Number of DOM elements.

next() → {ZxQuery}

Moves to the next sibling in the DOM. This only applies to the first element in the ZxQuery object.

Returns

ZxQuery ‐ A new ZxQuery object containing the next sibling element.

off(eventPath, eventHandler) → {ZxQuery}

Stops listening for the given event.

Parameters
NameTypeArgumentDescription
eventPathstring | Array.<Object> | JSONEvent path or object with event/handler pairs.
eventHandlerfunctionoptionalEvent handler. Not used if eventPath is an object with event/handler pairs.
Returns

ZxQuery ‐ The ZxQuery object itself.

on(eventPath, eventHandler) → {ZxQuery}

Listens to the given event for all elements in the ZxQuery object.

Parameters
NameTypeArgumentDescription
eventPathstring | Array.<Object> | JSONEvent path or object with event/handler pairs.
eventHandlerfunctionoptionalEvent handler. Not used if eventPath is an object with event/handler pairs.
Returns

ZxQuery ‐ The ZxQuery object itself.

one(eventPath, eventHandler) → {ZxQuery}

Listens once to the given event for all elements in the ZxQuery object.

Parameters
NameTypeArgumentDescription
eventPathstring | Array.<Object> | JSONEvent path or object with event/handler pairs.
eventHandlerfunctionoptionalEvent handler. Not used if eventPath is an object with event/handler pairs.
Returns

ZxQuery ‐ The ZxQuery object itself.

parent(filter) → {ZxQuery}

Gets the closest parent matching the given selector filter. This only applies to the first element in the ZxQuery object.

Parameters
NameTypeArgumentDescription
filterstringoptionalA valid DOM query selector filter (default: first parent).
Returns

ZxQuery ‐ A new ZxQuery object containing the matching parent element.

playAnimation(options) → {ZxQuery}

Plays the animation specified by the given animation class list. If no class list is provided, the callback function can be used to wait for the end of any currently running animation.

Parameters
NameTypeDescription
optionsArray.<string> | string | PlayFxConfigThis parameter can be either: a list of classes (Array), or a string with whitespace-separated class names, or a {PlayFxConfig} object.
Returns

ZxQuery

playTransition(options) → {ZxQuery}

Plays the transition effect specified by the given transition class list. If no class list is provided, the callback function can be used to wait for the end of any currently running animation.

Parameters
NameTypeDescription
optionsArray.<string> | string | PlayFxConfigThis parameter can be either: a list of classes (Array), or a string with whitespace-separated class names, or a {PlayFxConfig} object.
Returns

ZxQuery

position() → {ElementPosition}

Gets coordinates and visibility status of the first element.

Returns

ElementPosition

prepend(el) → {ZxQuery}

Prepends the given element or HTML string to the first element in the ZxQuery object.

Parameters
NameTypeDescription
elObject | ZxQuery | Array.<Node> | Node | NodeList | stringElement to append.
Returns

ZxQuery ‐ The ZxQuery object itself.

prev() → {ZxQuery}

Moves to the previous sibling in the DOM. This only applies to the first element in the ZxQuery object.

Returns

ZxQuery ‐ A new ZxQuery object containing the previous sibling element.

removeClass(className) → {ZxQuery}

Removes the given CSS class from all elements in the ZxQuery object.

Parameters
NameTypeDescription
classNamestringThe CSS class name.
Returns

ZxQuery ‐ The ZxQuery object itself.

reset() → {ZxQuery}

De-registers all event handlers of all elements in the ZxQuery object.

Returns

ZxQuery ‐ The ZxQuery object itself.

reverse() → {ZxQuery}

Reverses order of the elements in the current set.

Returns

ZxQuery ‐ The ZxQuery object itself.

show(mode) → {ZxQuery}

Sets the CSS display property to '' if no argument value is provided, otherwise set it to the given value.

Parameters
NameTypeArgumentDescription
modestringoptionalSet the display mode to be used to show element (eg. block, inline, etc..).
Returns

ZxQuery ‐ The ZxQuery object itself.

trigger(eventPath, eventData) → {ZxQuery}

Triggers the given event for all elements in the ZxQuery object.

Parameters
NameTypeDescription
eventPathstringPath of the event to trigger.
eventDataobjectValue of the event.
Returns

ZxQuery ‐ The ZxQuery object itself.

value(value) → {ZxQuery|string}

Gets the value attribute of the first element in the ZxQuery object, or sets the value attribute value for all elements in the ZxQuery object.

Parameters
NameTypeArgumentDescription
valuestring | undefinedoptionalValue to assign to the 'value' attribute.
Returns

ZxQuery | string

visibility(mode) → {string|ZxQuery}

Gets the CSS visibility property of the first element in the ZxQuery object, or sets the visibility property value for all elements in the ZxQuery object.

Parameters
NameTypeArgumentDescription
modestring | undefinedoptionalThe visibility value.
Returns

string | ZxQuery ‐ The visibility value when no mode specified, otherwise the ZxQuery object itself.

Type Definitions

ActiveRefreshCallback(data, refreshMs, forceActive)

The callback for setting data and delay of next refresh request.

Parameters
NameTypeArgumentDescription
dataobjectoptionalData to be passed to next refresh call
refreshMsnumberoptionalDelay in milliseconds before the next refresh call
forceActiveboolean | undefinedoptionalIgnore visibility, schedule anyway

ActiveRefreshHandler($view, $element, data, nextCallback, attributeName)

The Active-Refresh function that will be called for each refresh request.

This
Parameters
NameTypeArgumentDescription
$viewZxQueryThe component's view
$elementZxQueryThe target element as ZxQuery object
dataobjectCustom data that ca be passed from call to call
nextCallbackActiveRefreshCallbackCallback for scheduling the next refresh call
attributeNamestringoptionalSource attribute name if it's a '@' handler

BindingAdapterCallback($element, fieldName, $view, refreshCallback)

Binding adapter callback.

Parameters
NameTypeArgumentDescription
$elementZxQueryThe view's element bound to the data model's fieldName
fieldNamestringThe element's bound field name
$viewZxQueryThe view
refreshCallbackBindingAdapterRefreshCallbackoptionalRefresh loop callback

BindingAdapterRefreshCallback(refreshMs)

Binding adapter refresh callback

Parameters
NameTypeArgumentDescription
refreshMsnumberoptionalMilliseconds to wait before refresh (default: 500ms)

BundleItem

Bundle item object.

Properties
NameTypeDescription
viewElement
cssstring
controllerContextControllerHandler

ComponentCache

Component cache object.

Properties
NameTypeDescription
componentIdstringThe id of the cached component.
viewElementThe view element.
cssstringThe CSS style text.
css_appliedbooleanWhether the CSS style has been applied to the view or not.
controllerContextControllerHandlerThe controller handler function.
usingstringThe url/path if this is a resource loaded with zuix.using(..) method.

ContextControllerCreateCallback()

Function that gets called after loading, when the component is actually created and ready.

ContextControllerDisposeCallback()

Function called when the component is about to be disposed.

ContextControllerHandler(cp)

This function is called after the component is loaded and it is used to initialize its controller.

This
Parameters
NameTypeDescription
cpContextControllerThe component controller object

ContextControllerInitCallback()

Function that gets called after loading and before the component is created.

ContextControllerUpdateCallback(target, key, value, path, old)

Function called when the data model of the component is updated

Parameters
NameTypeDescription
targetObjectThe target object.
keystringThe name of the property.
valueObjectThe value of the property.
pathstringThe full property path (dotted notation).
oldObjectThe target object before the update.
Returns

‐ undefined

ContextErrorCallback(error, ctx)

Callback function triggered if an error occurs when loading a component.

This
Parameters
NameTypeDescription
errorObject
ctxComponentContextThe component context object (same as this).

ContextLoadedCallback(ctx)

Callback function triggered when a component is created, after all of its dependencies have been loaded.

This
Parameters
NameTypeDescription
ctxComponentContextThe component context (same as this).

ContextOptions

This object can be supplied when loading a component. It can be either passed as argument for the zuix.load(...) / zuix.loadComponent(...) methods, in the javascript code, or with the z-options attribute in the HTML code of the component's host element.

Properties
NameTypeDescription
contextIdObject | undefinedThe context id. HTML attribute equivalent: z-context. If not specified it will be randomly generated.
containerElement | undefinedThe container element.
modelJSON | undefinedThe data model. HTML attribute equivalent: z-model.
viewElement | undefinedThe view element. HTML attribute equivalent: z-view.
controllerContextControllerHandler | undefinedThe controller handler.
onObject.<string, EventCallback> | Object.<string, string> | undefinedThe map of event handlers for standard and component's events. An event can also be simply routed to another component's event by specifying the mapped event name string.
behaviorObject.<string, EventCallback> | Object.<string, string> | undefinedThe map of event handlers for behaviors. An event can also be simply routed to another component's event by specifying the mapped event name string.
cssHTMLStyleElement | string | boolean | undefinedCustom stylesheet to apply to the component's view.
encapsulationboolean | undefinedWhether to use style encapsulation or not (default: false).
resetCssboolean | undefinedWhether to reset view style to prevent inheriting from parent containers (default: false).
cextstring | undefinedWhen loading content of the view, appends the specified extension instead of .html.
htmlboolean | undefinedEnables or disables HTML template loading (default: true).
lazyLoadboolean | undefinedEnables or disables lazy-loading (default: false).
prioritynumber | undefinedLoading priority (default: 0).
readyContextLoadedCallback | undefinedThe loaded callback, triggered once the component is successfully loaded.
readyContextReadyCallback | undefinedThe ready callback, triggered once all component's dependencies have been loaded.
errorContextErrorCallback | undefinedThe error callback, triggered when an error occurs.

ContextReadyCallback(ctx)

Callback function triggered when a component has been successfully loaded.

This
Parameters
NameTypeDescription
ctxComponentContextThe component context (same as this).

ElementPosition

The ElementPosition object returned by the position() method.

Properties
NameTypeDescription
xnumberX coordinate of the element in the viewport
ynumberY coordinate of the element in the viewport
framePositionPosition of the element relative to the viewport
eventstringCurrent state change event description (enter, exit, scroll, off-scroll)
visiblebooleanBoolean value indicating whether the element is visible in the viewport

ElementsIterationCallback(count, item, $item)

Callback function used with the each(..) method.

This
Parameters
NameTypeDescription
countnumberIteration count.
itemElementCurrent element.
$itemZxQueryZxQuery wrapped element (same as 'this').

EventCallback(event, data, $el)

Callback function triggered when an event registered with the on method occurs.

This
Parameters
NameTypeDescription
eventstringEvent name
dataObjectEvent data
$elZxQueryZxQuery wrapped element that sourced the event (same as this)

IterationCallback(k, item)

The IterationCallback function.

This
Parameters
NameTypeDescription
knumber | objectIteration count / item key.
itemobjectCurrent element (same as this).

LoggerMonitorCallback(ctx, level)

Callback function for monitoring all log messages.

This
Parameters
NameTypeDescription
ctxObject
levelstring
...argsArray.<Object>

PlayFxCallback($element, classQueue)

Callback function used with the each(..) method.

This
Parameters
NameTypeDescription
$elementZxQueryTarget element (same as 'this').
classQueueArray.<string>Transition/animation class queue left to play, null if the animation ended.

PlayFxConfig

Configuration object for playFx, playTransition, playAnimation utility methods.

Properties
NameTypeDescription
type'transition' | 'animation'The type of effect to play.
targetElement | ZxQueryTarget element.
classesArray.<string> | stringList of transition or animation classes to play.
optionsobjectTransition/animation options ('delay', 'duration', etc..).
holdStatebooleanHold last transition/animation class.
onStepPlayFxCallbackSince class list can contain more than just two classes, this callback will be called after each pair of transition/animation ended.
onEndPlayFxCallbackCalled when all transitions/animations ended.

Position

Relative position.

Properties
NameTypeDescription
dxnumber
dynumber

ResourceUsingCallback(resourcePath, hashIdOrContext)

Callback in response to a zuix.using request.

Parameters
NameTypeDescription
resourcePathstring
hashIdOrContextstring | object

ZxQueryHttpBeforeSendCallback(xhr)

The ZxQueryHttpBeforeSendCallback function.

This
Parameters
NameTypeDescription
xhrXMLHttpRequest

ZxQueryHttpErrorCallback(xhr, statusText, statusCode)

The ZxQueryHttpErrorCallback function.

This
Parameters
NameTypeDescription
xhrXMLHttpRequest
statusTextstring
statusCodenumber

ZxQueryHttpOptions

zuix.$.http options object.

Properties
NameTypeDescription
urlstring
beforeSendZxQueryHttpBeforeSendCallback | undefined
successZxQueryHttpSuccessCallback | undefined
errorZxQueryHttpErrorCallback | undefined
thenZxQueryHttpThenCallback | undefined

ZxQueryHttpSuccessCallback(responseText)

The ZxQueryHttpSuccessCallback function.

This
Parameters
NameTypeDescription
responseTextstring

ZxQueryHttpThenCallback(xhr)

The ZxQueryHttpThenCallback function.

This
Parameters
NameTypeDescription
xhrXMLHttpRequest
GitHub logo
JavaScript library for component-based websites and applications.