About Pi Downloads Documentation

Essential Documents

Reference

Plugins Developer Forum Issues

pi.element2009-01-06 09:23:24

Summary

pi.element, is a class which provides creating and modifying DOM elements.

Syntax

var MyForm = new pi.element("form").attribute.addClass("MyForm").child.add(
	new pi.element("label").update("Username:"),
	new pi.element("input").attribute.set("type","text"),
	new pi.element("button").event.addListener("click",function(){ 
		alert("Hello World!"); 
	}).update("Submit")
).insert(document.body);
The above example will output:

Properties

element pi.element object.element
Returns a reference to the created DOM element.

Methods

clean element.clean();
Cleans up content of the specified element.
clone element.clone(deep);
Returns a duplicate of the current node.
insert element.insert(parentNode);
Insert the specified element as the last child node of given parent node.
insertAfter element.insertAfter(referenceNode);
Inserts the specified element after the reference node.
insertBefore element.insertBefore(referenceNode);
Inserts the specified element before the reference node.
remove element.remove();
Removes the specified element from the DOM.
update element.remove();
Sets all of the markup and content within given element.
attribute.getAll element.getAll();
Returns a collection of attributes of the specified element.
attribute.clear element.clear(attributeName);
Makes empty string the attribute.
attribute.get element.get(attributeName);
Returns the value of the named attribute on the specified element.
attribute.has element.has(attributeName);
Returns a boolean value indicating whether the specified element has the specified attribute or not.
attribute.remove element.remove(attributeName);
Removes an attribute from the specified element.
attribute.addClass element.addClass(Class, Names, ...);
Adds the specified class(es) to each of the set of specified element.
attribute.clearClass element.clearClass();
Removes all class names of the specified element.
attribute.getClass element.getClass();
Returns class names of the specified element.
attribute.hasClass element.hasClass(className);
Checks if the specified CSS class exists on the specified element's DOM node.
attribute.setClass element.setClass(value);
Replaces value of className attribute with given value.
attribute.removeClass element.removeClass(className);
Removes the specified class of the specified element.
attribute.toggleClass element.toggleClass(className);
Toggles the given CSS class on specified element.
child.add element.child.add( child, nodes ... );
Adds the passed node(s) as a child to the specified element..
child.addAfter element.child.addAfter( node, referenceElement );
Adds the passed node after a reference element as a child of the specified element.
child.addBefore element.child.addBefore( node, referenceElement );
Adds the passed node before a reference element as a child of the specified element.
child.get element.child.get();
Returns a collection of child nodes.
child.remove element.child.remove(child);
Removes given child nodes.
environment.getPosition element.environment.getPosition();
Returns an object that contains position data of the specified element.
environment.getSize element.environment.getSize();
Returns an object that contains dimensions of the specified element.
environment.addStyle element.environment.addStyle({ CSSProperty:'CSSValue' });
Applies css values from given hash to specified element.(Fixes opacity values and cssFloat/styleFloat property for IE)
environment.getName element.environment.getName();
Returns node name of the specified element.
environment.getType element.environment.getType();
Returns node type of the element.
environment.getValue element.environment.getValue(element);
Returns value of the given element.Input ve Textarea elementlerinin value attribute'unu, Select elementlerin secili option'inin degerini, geri kalanlarda innerHTML degerini dondurur.
environment.getView element.environment.getView(CSSProperty (Optional));
Returns computed style of the specified element.
event.addListener element.event.addListener(type,listener,useCapture?);
Allows the registration of event listeners on the element.
event.removeListener element.event.removeListener(type,listener,useCapture);
Allows the removal of event listeners from the element.

Examples

Example #1: Create a simple login form dynamically.

Source files of the above example:

loginform.html

<div id="f_container">
</div>

loginform.js

var form = new pi.element("form").attribute.set("method","POST").insert(pi.get("f_container"));
var username = new pi.element("input").insertAfter(
	new pi.element("label").update("Username: ").insert(form)
);
var password = new pi.element("input").insertAfter(
	new pi.element("label").update("Password: ").insert(form)
);
form.child.add(
	new pi.element("button").update("login")
);

Example #2: table

Source files of the above example:

table.html

<div id="table_container">
</div>

table.js

new pi.element("table").child.add(
	new pi.element("tr").child.add(
		new pi.element("td").update("Name"),
		new pi.element("td").update("Age")
	),
	new pi.element("tr").child.add(
		new pi.element("td").update("Angeline"),
		new pi.element("td").update("25")
	)
).attribute.set("border","1").insert(pi.get("table_container"));