This is the basic library. Can be considered a toolkit on its own, as it provides many useful functions and shortcuts.
This function is very popular and appears in almost every JS framework available. Its purpose
is to provide a shortcut for longer document.getElementById()
functions. Basic usage is:
var object = $("some_id");
alert(object.tagName);
In this example, we assume that there is a HTML node with id "some_id". The $-function converts a string to the object. Note that it is perfectly correct to pass an object reference to $-function, although not very useful.
Due to the presence of this function in toolkit, every other function that accepts a node reference as an argument can also accept its id.
This function is identical to $$()
. They are shortcuts for $().value
. You should use them
when getting a value of any form element.
Used for dynamic creation of HTML nodes. Three parameters are accepted, the first one is mandatory. Example:
var myDiv = OAT.Dom.create("div"); var myStyledDiv = OAT.Dom.create("div", {color : "#f00", fontWeight : "bold"}, "myDiv_class");
The second (optional) argument styleObj is an object comprised of CSS properties. For a full list of valid properties, see
Mozilla documentation and MSDN.
CSS properties are not the same for these browsers, so specifying a floating element looks like
var element = OAT.Dom.create("div", {cssFloat:"left", styleFloat:"left"});
- the first declaration is for Gecko, the latter for MSIE.
Creates and returns DOM text node with value of argument text.
Creates and returns DOM button with specified label..
Creates and returns DOM radio input with specified name.
Creates and returns DOM image node. src is image's URL; when PNG is used, specify srcBlank (url of transparent image) for Internet Explorer's workaround.
Creates and returns DOM <option> node with name of name and value of value. If parent is specified, this function also appends newly created node to that parent. Example:
var s = OAT.Dom.create("select"); OAT.Dom.option("apples",1,s); OAT.Dom.option("bananas",2,s); OAT.Dom.option("cherries",3,s);
Links any number of DOM nodes. Takes variable amount of arguments, each argument must be an array. For each argument:
Hides specified element by setting its style.visibility
property.
Unhides previously hidden element by setting its style.visibility
to default value.
This function clears all child nodes from an element. May be called with either object reference as an argument, or a id-string. So, for instance:
OAT.Dom.clear("my_select_element");
removes all options from existing <select> element with id "my_select_element".
Unlinks element from DOM tree. Notice that the element is not destroyed as long as it can be referenced.
Centers element relative to its parent node. If reference is specified, this node is used instead of parent node. x and y are bools, specifying whether horizontal and/or vertical centering should be done.
Tests whether a child is a subnode of node parent. The depth is not important here.
true
when at least one of element's classes is className. Example:
var div = OAT.Dom.create("div"); div.className = "big red fox"; alert( OAT.Dom.isClass(div,"fox"); ); // true
Returns x and y coordinates of element's top left corner, relative to page's top left corner.
Coordinates are returned in an array of two elements. To count this value, the whole tree of offsetParent
s must be
climbed up, so it is not wise to call this function too often. Example:
var coords = OAT.Dom.position(div);
alert("x: " + coords[0]+", y:" + coords[1]);
Returns x and y coordinates of element's top left corner, relative to its offsetParent
,
in form of array with two elements.
Returns width and height of element (in pixels), in form of array with two elements.
Moves element by dx pixels horizontally and dy pixels vertically.
Resizes element by dx pixels horizontally and dy pixels vertically.
Unselects everything selected.
Returns an object of current URI parameters. So, for /?a=b&c[]=d&c[]=e
, this returns:
{ a:"b", c:["d","e"] }
Attaches function specified with callback to event detected on element. The event is specified without the "on" prefix. Function reference callback will be called with one argument, the event object reference. Example:
OAT.Event.attach("myDiv", "click", function() { alert("!"); });
Removes attached callback from element fired with event. Note that only non-anonymous functions can be detached.
Converts event to reference to element which fired it. This can be useful when multiple elements fire the same callback and one needs to know which element fired it. Example:
var callback = function(event) { var id = OAT.Event.source(event).id; alert("Event fired by " + id); } var div = OAT.Dom.create("div"); div.id = "myDiv"; OAT.Dom.attach(div, "click", callback);
Cancels bubbling of event.
Returns coordinates of event, relative to top left corner of page.
Prevents default action if event (form submit, context menu, image-to-new-tab drag, ...).
Returns a style property of element. This is different from accessing the element.style.property
value,
as this function returns the computed style (i.e., set by stylesheets, etc.) instead of a dynamically created one. Example:
var family = OAT.Style.get("elementId", "fontFamily");
alert(family); // returns actual font-family for this element, wherever it is set
Applies styleObj to element. styleObj follows the same conventions defined in OAT.Dom.create().
Sets element's opacity to opacity. Acceptable range: 0 (transparent) - 1 (opaque).
Sets element's background image to the one specified in url.
Returns true
if used browser is Internet Explorer.
Returns true
if used browser is Internet Explorer 6.
Returns true
if used browser is Internet Explorer 7.
Returns true
if used browser is Gecko-based (Firefox, Mozilla).
Returns true
if used browser is Opera.
Returns true
if used browser is Apple WebKit.
Returns true
if used browser is KDE Konqueror.
Returns true
if used operating system is MacOS.