x-xui
Build Status](https://travis-ci.org/x-component/x-xui)
./public/js/xui/base.js
- removex()
- undefined.extend()
- undefined.find()
- undefined.set()
- undefined.reduce()
- undefined.has()
- undefined.filter()
- undefined.not()
- undefined.each()
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 this[0]; },
last: function() { return this[this.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:
<ul id="first">
<li id="one">1</li>
<li id="two">2</li>
</ul>
<ul id="second">
<li id="three">3</li>
<li id="four">4</li>
</ul>
We can select list items using `find`:
x$('li'); // returns all four list item elements.
x$('#second').find('li'); // returns list items "three" and "four"
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:
<div>
<div class="round">Item one</div>
<div class="round">Item two</div>
</div>
We can use `has` to select specific objects:
var divs = x$('div'); // got all three divs.
var rounded = divs.has('.round'); // got two divs with the class .round
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:
<div>
<div class="round">Item one</div>
<div class="round">Item two</div>
<div class="square">Item three</div>
<div class="shadow">Item four</div>
</div>
We can use `not` to select objects:
var divs = x$('div'); // got all four divs.
var notRound = divs.not('.round'); // got two divs with classes .square and .shadow
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', '<strong>rock and roll</strong>');
x$('#foo').html('outer', '<p>lock and load</p>');
x$('#foo').html('top', '<div>bangers and mash</div>');
x$('#foo').html('bottom','<em>mean and clean</em>');
x$('#foo').html('remove');
x$('#foo').html('before', '<p>some warmup html</p>');
x$('#foo').html('after', '<p>more html!</p>');
or
x$('#foo').html('<p>sweet as honey</p>');
x$('#foo').outer('<p>free as a bird</p>');
x$('#foo').top('<b>top of the pops</b>');
x$('#foo').bottom('<span>bottom of the barrel</span>');
x$('#foo').before('<pre>first in line</pre>');
x$('#foo').after('<marquee>better late than never</marquee>');
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()
- undefined.setStyle()
- undefined.getStyle()
- undefined.addClass()
- undefined.hasClass()
- undefined.removeClass()
- undefined.toggleClass()
- undefined.css()
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');
undefined.removeClass()
removeClass -----------
Removes the specified class from all elements in the collection. If no class is specified, removes all classes from the collection.
### syntax ###
x$( selector ).removeClass( className );
### arguments ###
- className `String` is the name of the CSS class to remove. If not specified, then removes all classes from the matched elements. _(optional)_
### example ###
x$('.foo').removeClass('awesome');
undefined.toggleClass()
toggleClass -----------
Removes the specified class if it exists on the elements in the xui collection, otherwise adds it.
### syntax ###
x$( selector ).toggleClass( className );
### arguments ###
- className `String` is the name of the CSS class to toggle.
### example ###
<div class="foo awesome"></div> x$('.foo').toggleClass('awesome'); // div above loses its awesome class.
undefined.css()
css ---
Set multiple CSS properties at once.
### syntax ###
x$( selector ).css( properties );
### arguments ###
- properties `Object` is a JSON object that defines the property name/value pairs to set.
### example ###
x$('.foo').css({ backgroundColor:'blue', color:'white', border:'2px solid red' });