• Major Sections
  • Home
  • Toolkit
  • Framework
  • Application
  • Installation and Repos
• Personal tools
  • Log in
• • Main page
  • Recent changes
  • Random page
  • Help
• Toolbox
  • What links here
  • Related changes
  • Special pages

Toolkit:element prototypes

From Surebert wiki

Element prototypes

There are many Element prototypes, consult the auto-generated docs http://surebert.com/toolkit/docs to see them all

In core sb.js library

Element.prototype.addClassName

Adds a className to the Element, using this methods Element instances can have multiple classNames

myElement.addClassName('redStripe');

Element.prototype.append

Appends another DOM element to the element as a child

myElement.append(myOtherElement);

Element.prototype.appendAfter

Appends the element after another DOM element as a sibling e.g. append myElement to the parent of "#myDiv" as a sibling of "#myDiv" directly after "#myDiv"

myElement.appendAfter('#myDiv');

Element.prototype.appendBefore

Appends the element before another DOM element as a sibling

e.g. append myElement to the parent of "#myDiv" as a sibling of "#myDiv" directly before "#myDiv"

myElement.appendBefore('#myDiv');

Element.prototype.appendTo

Appends the element to another DOM element as a child

//appends myElement to the page body
myElement.appendTo('body');
 
//appends myElement to a div with the ID "myDiv"
myElement.appendTo('#myDiv');

Element.prototype.appendToTop

Appends the element to the top DOM element as a child

//appends myElement to the page body
myElement.appendToTop('body');
 
//appends myElement to a div with the ID "myDiv"
myElement.appendToTop('#myDiv');

Element.prototype.event

Used to set event cross-browser event handlers. For more information see sb.events. e.g. sets the backgroundColor property to red on click

myElement.event('click', function(e){
    //alerts the x value of the click 
    alert(e.clientX);
    //alerts the innerHTML of myElement
    alert(this.innerHTML);
});

Element.prototype.events

Used to assign multiple events at once

var myDiv = $('#myDiv');
myDiv.events({
	click : function(){
		do something
	},
	mouseover : function(){
		//do somthing
	}
});

Element.prototype.eventsAdded

Used keep track of events added to a Element. All events added with this.event are pushed into this array where they are stored for removal

alert($('#myDiv').eventsAdded);

Element.prototype.getStyle

Calculates the absolute x position of an element

myElement.getStyle('background-color');
//or
myElement.getStyle('backgroundColor').

Element.prototype.getX

Calculates the absolute x position of an element

myElement.getX();

Element.prototype.getY

Calculates the absolute x position of an element

myElement.getY();

Element.prototype.hasClassName

Checks to see if the element has the className specified. Elements can have more than one className. returns boolean

myElement.hasClassName('redStripe');

Element.prototype.lastEventAdded

Used keep track of the last event added to a Element.

Element.prototype.remove

Removes an element from the DOM

myElement.remove();

Element.prototype.removeClassName

Removes a className from the elements className array. Elements can have more than one className

myElement.removeClassName('redStripe');

Element.prototype.replace

Replaces an element with another element in the DOM

myElement.replace('#myOtherElement');

Element.prototype.setStyle

Both cssFloat and opacity are translated by surebert automatically for IE.

Sets a style property of an Element myElement.setStyle('backgroundColor', blue); //or myElement.setStyle('opacity', 0.5);

Element.prototype.styles

Sets multiple style properties for an Element Both cssFloat and opacity are translated by surebert automatically for IE.

myElement.styles({
	backgroundColor : '#000000',
	fontSize : '18px',
	border : '1px solid #FF0000',
	cssFloat : 'right'
});

Extended Prototypes

These prototypes must be loaded via sb.include to by adding a script tag loading them in, e.g.

sb.include('element.prototype.toggle')

or

<script type="text/javascript" src="/surebert/element/prototype/toggle.js"></script>

Element.prototype.getDimensions

Element.prototype.show

Element.prototype.unsetAttributes

Element.prototype.getPosition

Element.prototype.fade

Element.prototype.markText

Element.prototype.cssTransition

Element.prototype.getLastChild

Element.prototype.cssTransition

Element.prototype.mv

Element.prototype.resizeTo

Element.prototype.getNextSibling

Element.prototype.clearStyles

Element.prototype.hide

Element.prototype.clearPosition

Element.prototype.wh

Element.prototype.getWidth

Element.prototype.copyStyles

Element.prototype.getPreviousSibling

Element.prototype.css

Element.prototype.getAncestors

Element.prototype.setOpacity

Element.prototype.quiver

Element.prototype.makeDraggable

Element.prototype.getHeight

Element.prototype.setAttributes

Element.prototype.addToolTip

Element.prototype.isDescendantOf

Element.prototype.infuse

Element.prototype.toggle