Core Docs | Additional Modules Docs
@Description: Appends another DOM element to the element as a child
@File: sb.js
@Type: function
@Param: Element, String el Another DOM element reference or a string that can be passed through sb.$ to return a DOM node.
@Example:myElement.append(myOtherElement);
@Description: Appends the element after another DOM element as a sibling
@File: sb.js
@Type: function
@Param: Element, String el Another DOM element reference or a string that can be passed through sb.$ to return a DOM node.
@Example://appends myElement to the parent of "#myDiv" as a sibling of "#myDiv" directly after "#myDiv"
myElement.appendAfter('#myDiv');
@Description: Appends the element before another DOM element as a sibling
@File: sb.js
@Type: function
@Param: Element, String el Another DOM element reference or a string that can be passed through sb.$ to return a DOM node.
@Example://appends myElement to the parent of "#myDiv" as a sibling of "#myDiv" directly before "#myDiv"
myElement.appendBefore('#myDiv');
@Description: Removes an event created with Element.prototype.event
@File: sb.js
@Type: function
@Param: String evt An event reference returned from the sb.element instances event method above.
@Example://sets the backgroundColor property to red
var myEvt = myElement.evt('click', function(e){
alert(this.innerHTML);
});
myElement.eventRemove(myEvt);
@Description: Used to assign multiple events at once
@File: sb.js
@Type: function
@Param: object events
@Example:var myDiv = $('#myDiv');
myDiv.events({
click : function(){
do something
},
mouseover : function(){
//do somthing
}
});
@Description: Used keep track of events added to a sb.element. All events added with this.event are pushed into this array where they are stored for removal
@File: sb.js
@Type: array
@Description: Removes all event observers for the sb.element that were added using this.evt() or this.events()
@File: sb.js
@Type: function
@Example:myElement.eventsRemoveAll();
@Description: Adds a className to the sb.element, using this methods sb.element instances can have multiple classNames
@File: sb.js
@Type: function
@Param: String c The classname to add
@Return: returns itself
@Example:myElement.addClassName('redStripe');
@Description: Appends the element to another DOM element as a child
@File: sb.js
@Type: function
@Param: Element, String el Another DOM element reference or a string that can be passed through sb.$ to return a DOM node.
@Return: Element A refernce to the appended node
@Example://appends myElement to the page body
myElement.appendTo('body');
//appends myElement to a div with the ID "myDiv"
myElement.appendTo('#myDiv');
@Description: Appends the element to the top DOM element as a child
@File: sb.js
@Type: function
@Param: Element, String el Another DOM element reference or a string that can be passed through sb.$ to return a DOM node.
@Return: Element A refernce to the appended node
@Example://appends myElement to the page body
myElement.appendToTop('body');
//appends myElement to a div with the ID "myDiv"
myElement.appendToTop('#myDiv');
@Description: Used to set event cross-browser event handlers. For more information see sb.events.
@File: sb.js
@Type: function
@Param: String evt The event to handle e.g. mouseover, mouseout, mousedown, mouseup, click, dblclick, focus, blurr, scroll, contextmenu, keydown, keyup, keypress
@Param: Function func The function to use as an event handler. It is passed the e from the event in every brower as the first argument. It also references "this" as the object the event is listening on.
@Return: The event that is added is returned so that you can use the reference to remove it with sb.events.remove or the sb.element instances sb.eventRemove
@Example://sets the backgroundColor peroperty to red
myElement.evt('click', function(e){
//alerts the x value of the click
alert(e.clientX);
//alerts the innerHTML of myElement
alert(this.innerHTML);
});
@Description: calculates the style of an sb.element based on the current style read from css
@File: sb.js
@Type: function
@Param: String prop The property to look up
@Return: returns property value
@Example:myElement.getStyle('background-color');
//or
myElement.getStyle('padding').
@Description: Calculates the absolute x position of an element
@File: sb.js
@Type: function
@Return: Integer the x position of an element
@Example:myElement.getX();
@Description: Calculates the absolute x position of an element
@File: sb.js
@Type: function
@Return: Integer the y position of an element
@Example:myElement.getY();
@Description: Checks to see if the element has the className specified. Elements can have more than one className.
@File: sb.js
@Type: function
@Param: String c The className to check for
@Return: Boolean True if the element contains the className and False if it doesn't
@Example:myElement.hasClassName('redStripe');
@Description: Sets the style of an sb.element
@File: sb.js
@Type: function
@Param: String prop The property to assign a value to
@Param: String val The value to assign to the property specified
@Return: returns property value
@Example:myElement.setStyle('backgroundColor', blue);
//or
myElement.setStyle('opacity', 0.5);
@Description: Removes an element from the DOM
@File: sb.js
@Type: function
@Return: returns itself
@Example:myElement.remove();
@Description: Removes a className from the elements className array. Elements can have more than one className
@File: sb.js
@Type: function
@Param: String c Specified the className to remove from the element
@Return: returns itself
@Example:myElement.removeClassName('redStripe');
@Description: Replaces an element with another element in the DOM
@File: sb.js
@Type: function
@Param: Object/String A reference to another DOM node, either as a string which is passed to the sb.$ function or as an element reference
@Return: returns itself
@Example:myElement.replace('#myOtherElement');
@Description: Sets multiple style properties for an sb.element
@File: sb.js
@Type: function
@Param: Object params An object with css style/value pairs that are applied to the object
@Return: returns itself
@Example:myElement.styles({
backgroundColor : '#000000',
fontSize : '18px',
border : '1px solid #FF0000'
});