X-xui NPM | npm.io

x-xui

Build Status](https://travis-ci.org/x-component/x-xui)

./public/js/xui/base.js

removex()

Array Remove - By John Resig (MIT Licensed)

undefined.extend()

extend

Extends XUI's prototype with the members of another object.

syntax

xui.extend( object );

arguments

- object Object contains the members that will be added to XUI's prototype.

example

Given:

var sugar = { first: function() { return this0; }, last: function() { return thisthis.length - 1; } }

We can extend xui's prototype with members of sugar by using extend:

xui.extend(sugar);

Now we can use first and last in all instances of xui:

var f = x$('.button').first(); var l = x$('.notice').last();

undefined.find()

find

Find the elements that match a query string. x$ is an alias for find.

syntax

x$( window ).find( selector, context );

arguments

- selector String is a CSS selector that will query for elements. - context HTMLElement is the parent element to search from (optional).

example

Given the following markup:

undefined.set()

set

Sets the objects in the xui collection.

syntax

x$( window ).set( array );

undefined.reduce()

reduce

Reduces the set of elements in the xui object to a unique set.

syntax

x$( window ).reduce( elements, index );

arguments

- elements Array is an array of elements to reduce (optional). - index Number is the last array index to include in the reduction. If unspecified, it will reduce all elements (optional).

undefined.has()

has

Returns the elements that match a given CSS selector.

syntax

x$( window ).has( selector );

arguments

- selector String is a CSS selector that will match all children of the xui collection.

example

Given:

undefined.filter()

filter

Extend XUI with custom filters. This is an interal utility function, but is also useful to developers.

syntax

x$( window ).filter( fn );

arguments

- fn Function is called for each element in the XUI collection.

// index is the array index of the current element function( index ) { // this is the element iterated on // return true to add element to new XUI collection }

example

Filter all the <input /> elements that are disabled:

x$('input').filter(function(index) { return this.checked; });

undefined.not()

not

The opposite of has. It modifies the elements and returns all of the elements that do not match a CSS query.

syntax

x$( window ).not( selector );

arguments

- selector String a CSS selector for the elements that should not be matched.

example

Given:

undefined.each()

each

Element iterator for an XUI collection.

syntax

x$( window ).each( fn )

arguments

- fn Function callback that is called once for each element.

// element is the current element // index is the element index in the XUI collection // xui is the XUI collection. function( element, index, xui ) { // this is the current element }

example

x$('div').each(function(element, index, xui) { alert("Here's the " + index + " element: " + element); });

./public/js/xui/dom.js

undefined.html()

html

Manipulates HTML in the DOM. Also just returns the inner HTML of elements in the collection if called with no arguments.

syntax

x$( window ).html( location, html );

or this method will accept just a HTML fragment with a default behavior of inner:

x$( window ).html( html );

or you can use shorthand syntax by using the location name argument as the function name:

x$( window ).outer( html ); x$( window ).before( html );

or you can just retrieve the inner HTML of elements in the collection with:

x$( document.body ).html();

arguments

- location String can be one of: inner, outer, top, bottom, remove, before or after. - html String is a string of HTML markup or a HTMLElement.

example

x$('#foo').html('inner', 'rock and roll'); x$('#foo').html('outer', 'lock and load'); x$('#foo').html('top', 'bangers and mash'); x$('#foo').html('bottom','mean and clean'); x$('#foo').html('remove'); x$('#foo').html('before', 'some warmup html'); x$('#foo').html('after', 'more html!');

x$('#foo').html('sweet as honey'); x$('#foo').outer('free as a bird'); x$('#foo').top('top of the pops'); x$('#foo').bottom('bottom of the barrel'); x$('#foo').before('first in line'); x$('#foo').after('better late than never');

undefined.attr()

attr

Gets or sets attributes on elements. If getting, returns an array of attributes matching the xui element collection's indices.

syntax

x$( window ).attr( attribute, value );

arguments

- attribute String is the name of HTML attribute to get or set. - value Varies is the value to set the attribute to. Do not use to get the value of attribute (optional).

example

To get an attribute value, simply don't provide the optional second parameter:

x$('.someClass').attr('class');

To set an attribute, use both parameters:

x$('.someClass').attr('disabled', 'disabled');

clean()

Removes all erronious nodes from the DOM.

./public/js/xui/style.js

hasClass()

Style =====

Everything related to appearance. Usually, this is CSS.

undefined.setStyle()

setStyle

Sets the value of a single CSS property.

syntax

x$( selector ).setStyle( property, value );

arguments

- property String is the name of the property to modify. - value String is the new value of the property.

example

x$('.flash').setStyle('color', '#000'); x$('.button').setStyle('backgroundColor', '#EFEFEF');

undefined.getStyle()

getStyle

Returns the value of a single CSS property. Can also invoke a callback to perform more specific processing tasks related to the property value. Please note that the return type is always an Array of strings. Each string corresponds to the CSS property value for the element with the same index in the xui collection.

syntax

x$( selector ).getStyle( property, callback );

arguments

- property String is the name of the CSS property to get. - callback Function is called on each element in the collection and passed the property (optional).

example

      <ul id="nav">
          <li class="trunk" style="font-size:12px;background-color:blue;">hi</li>
          <li style="font-size:14px;">there</li>
      </ul>

x$('ul#nav li.trunk').getStyle('font-size'); // returns '12px' x$('ul#nav li.trunk').getStyle('fontSize'); // returns '12px' x$('ul#nav li').getStyle('font-size'); // returns '12px', '14px'

x$('ul#nav li.trunk').getStyle('backgroundColor', function(prop) { alert(prop); // alerts 'blue' });

undefined.addClass()

addClass

Adds a class to all of the elements in the collection.

syntax

x$( selector ).addClass( className );

arguments

- className String is the name of the CSS class to add.

example

x$('.foo').addClass('awesome');

undefined.hasClass()

hasClass

Checks if the class is on all elements in the xui collection.

syntax

x$( selector ).hasClass( className, fn );

arguments

- className String is the name of the CSS class to find. - fn Function is a called for each element found and passed the element (optional).

// element is the HTMLElement that has the class function(element) { console.log(element); }

example

      <div id="foo" class="foo awesome"></div>
      <div class="foo awesome"></div>
      <div class="foo"></div>

// returns true x$('#foo').hasClass('awesome');

// returns false (not all elements with class 'foo' have class 'awesome'), // but the callback gets invoked with the elements that did match the 'awesome' class x$('.foo').hasClass('awesome', function(element) { console.log('Hey, I found: ' + element + ' with class "awesome"'); });

// returns true (all DIV elements have the 'foo' class) x$('div').hasClass('foo');