JJ JavaScript Library

JJ is a light weight JavaScript library. The combination of JJ with ajax gives a very powerful development suit.

Download JJ

You can download (copy / paste) it from here or link to it directly by adding the following line:

<script type="text/javascript" src="http://www.btoot.com/jj.js"></script>

If you link to the script directly, please mentioned it on your site.

Main function

Parameters:

function - The main function to be executed

Return true.

e.g.

jj(function(){
	//the main program
});

Selectors

Selects one or more elements.

Parameters:

sel - can be any css selector, returns the element (if there is one matching element) or an array of elements (otherwise).

Return element.

e.g.

jj("#id");
jj("div");
jj("div.bold");

Json

Make an HTTP call, when the call returns a call-back function is called with the response object.

Parameters:

url - the url of the resource.
args - the parameters of the call given as key / value map.
cb - a call-back function.

e.g.

jj("/json/msgs", {from : "Alex", limit : 10}, function(ms){
	//do something with messages (ms)
});

Event handlers (operate on element)

There is a single function which handle all events.

Parameters:

type - The name of the event to be registered on.
function - The event handler function.

Return element.

e.g.

on("click", function(e){
	alert("click");
});

Content manipulation (operate on element)

There are five functions which manipulate the content of an element.

HTML content

Set or return the HTML content of the element.

Parameters:

html - The html content.

Return element.

e.g.

ih();
ih("<p>Good</p>");

Text content

Parameters:

txt - The text content.

Return element.

e.g.

tc("Bad");

Append element

Parameters:

elm - The element to append.
place - The place where to append the element. If no place is given then elm is appended as the last child of this element. If place is - then elm is appended as the previous sibling of this element. If place is + then elm is appended as the next sibling of this element. If place is 0 then elm is appended as the first child of this element.

Return element.

e.g.

ap(elm);
ap(elm, '+');
ap(elm, '-');
ap(elm, '0');

Remove element

Parameters:

elm - The element to remove.

Return element.

e.g.

rm(elm);

Clear

Remove all children of the current element.

Return element.

e.g.

clr();

Style and attributes (operate on element)

There are three functions which query / change the style and attributes of elements.

Class name

Set or return class name of the element.

Parameters:

name - If name starts with + then name is added to the class list of this element. If name starts with - then name is removed from the class list of this element. If name starts with alphanumeric character then the class list of this element is set to name. If name is empty then the function returns the class list of this element.

Return css value / element.

e.g.

cn();
cn("bold");
cn("+bold");
cn("-bold");

CSS

Set or return the css value.

Parameters:

str/obj - If this is a string then the function return the value of the computed value for this field. If this is an object then the function sets the css values of this element.

Return css value / element.

e.g.

css("color");
css("color", "black");
css({
	color : "black",
	backgroundColor : "white"
});

Attributes

Set or return attribute value of the element.

Parameters:

att - If this is a string and val is passed then the function sets the attribute att to be val. If this is a string and val is not passed then the function returns the value of att. If this is an object then the function sets all the attributes.

Return css value / element.

e.g.

att("name");
att("name", "Bibo");
att({
	name : "Bibo",
	age : 22
});

Position and dimension (operate on element)

NOTE: These functions assume element is displayed as block and has absolute position.

There are four functions which query / change the position and dimension of elements.

X / Y position

Set or return the X position of the element.

Parameters:

x / y - The X / Y position to move the element to.
t - The time interval to make this move.
cb - A callback function to be called when the move is done.

Return x position / element.

e.g.

x();
x(100);
x(100, 200);
x(100, 200, function(){
	alert("done moving " + this);
});
y();
y(100);
y(100, 200);
y(100, 200, function(){
	alert("done moving " + this);
});

Width / Height

Set or return the width of the element.

Parameters:

w / h - The width / height of the element.
t - The time interval to make this width.
cb - A callback function to be called when the resizing is done.

Return width / element.

e.g.

w();
w(100);
w(100, 200);
w(100, 200, function(){
	alert("done resizing " + this);
});
h();
h(100);
h(100, 200);
h(100, 200, function(){
	alert("done resizing " + this);
});

Visibility (operate on element)

There are three functions which control the visibility of elements.

Opacity

Set opacity of the element.

Parameters:

o - The opacity of the element, a value between 0 to 1 which.
t - The time interval to change the opacity.
cb - A callback function to be called when the change is done.

Return element.

e.g.

op(0.2);
op(0.2, 100);
op(0.2, 100, function(){
	alert("done changing opacity " + this);
});

Hide

Hide the element.

Return element.

e.g.

hide();

Show

Show the element.

Return element.

e.g.

show();

Creating elements

There is a single function that create new elements.

je

Create a new element / component from template

Parameters:

name - The name of the element or the path to the template.

Return element.

e.g.

je("div");