Toolkit:sb.element

From Surebert wiki

Contents

Overview

Creating elements dynamically with sb.element is easy and it works the same in all broswers - wowsers! Every type of element is created the same way making it quick to learn. The basic syntax involves passign an object with parameters to the sb.element function. Sb.element instances have a multitude of built in methods which can all be found in the reference docs. Here I am just going to go over the basics. Any properties of the parameter object get passed to the standard DOM node that is returned. It can be used with the usual appendChild, insertBefore or it you can use the appending functions built right into an sb.element instance such as appendTo, appendBefore and others.

Examples

Creating a Simple P Node

Here is how you would make a simple paragraph

javascript code

var myP = new sb.element({
	tag: 'p',
	innerHTML: 'here is some data'
});
myP.appendBefore('#myOtherElement');

Creating a Simple IMG Node

Here is how you would make a simple image

javascript code

var myImg = new sb.element({
	tag: 'img',
	src: 'http://surebert.com/media/images/banner.png'
});
myImg.appendTo('#imgBox');

Additional Properties

Here we are creating the same P node as above but adding some additional styles, className and events info.

javascript code

var myP = new sb.element({
	tag: 'p',
	innerHTML: 'here is some data',
	styles : {
		backgroundColor : 'red',
		color : 'yellow'
	},
	className : 'myClass',
	events : {
		click : function(e){
			alert(this.innerHTML);
		}
	}
});
myP.appendToTop('body');

Creating a radio button with a label

Manually with sb.element

Here is how you would make a radio button with a label.

javascript code

var myLabel = new sb.element({
	tag : 'label',
	innerHTML : 'here is the label'
});
 
var myInput = new sb.element({
	tag: 'input',
	name : 'nameOfInput', //gets passsed to server side scripts
	type : 'checkbox',
	defaultChecked : true,
	value : 'myValue'
});
 
myInput.appendTo(myLabel);
 
myLabel.appendTo('body');

Creating Complex Element Constructors

You could easily turn the above process into a function for re-use if you were adding lots of checkbox inputs. I did this already with sb.element.checkBox. Here you can see the source as a template for your own DOM building functions.


javascript code

sb.element.checkBox = function(params){
	var checkbox = {};
	params.id = params.id || sb.uniqueID();
 
	checkbox.label = new sb.element({
		tag : 'label',
		innerHTML : params.label,
		className : params.labelClassName,
		unselectable : 'on',
		styles : {
			MozUserSelect : 'none'
		},
		events : {
			click : function(e){
				this.input.checked = (this.input.checked === true) ? false : true;
			}
		}
	});
 
	checkbox.label.setAttribute('for', params.id);
 
	checkbox.label.onselectstart = function() {
        return false;
    };
 
	checkbox.input = new sb.element({
		tag : 'input',
		id : params.id,
		name : params.name || '',
		type : 'checkbox',
		defaultChecked : params.checked || false,
		value : params.value || '',
		className : params.inputClassName
	});
 
	checkbox.label.input = checkbox.input;
	checkbox.input.label = checkbox.label;
	checkbox.input.appendTo(checkbox.label);
	return checkbox;
};

Then when you want to make a new checkbox you just use that function. This makes your source code look much cleaner and you own application easier to debug.

javascript code

var x = new sb.element.checkBox({
	label : 'Add me to the mailing list',
	name : 'Add To Mailing List',
	value : 'yes',
	checked : true
});
 
x.label.appendToTop('body');
Retrieved from "http://wiki.surebert.com/index.php/Toolkit:sb.element"