Please revisit later or just check out the source at Google Code.
To instantly start using Ice, just download and unzip its latest version. Include it as a JavaScript resource in your HTML-file just like that:
<html>
<head>
<title>My Title</title>
<script type="text/javascript" src="{PATH_TO_ICE}/ice-{VERSION}-pro/ice.js"></script>
</head>
<body></body>
</html>
Do not forget to replace {PATH_TO_ICE} and {VERSION} with your path and the actual version number.
Do not rename the file ice.js as this notation is required by the (modules) system (to find the right directory).
Although the syntax has leaned on jQuery you can not port any jQuery-Code to Ice without producing lots of errors.
There is a function to retrieve an element by id or by object and add Ice magic to it.
$("elementid") // returns an Ice-enriched node
If the element has no id assigned, a new id will be made up for it.
This function can also create a new element.
$({ id: "newelement", // optional tag: "div", // optional text: "Hello World" // optional })
If no tag is given, div is assumed.
If no id is given, a new id will be made up.
The power of CSS selectors is toren to Ice. To get specific elements in a rather complicated constellation, just write down some CSS markup.
$$("#menu .item") // returns an Ice array; iterate through it using each()
$$("#menu li.item").each(function(node){ node.setStyle("color","#f00"); // node is an Ice-node })
Even if the CSS selectors only match a single node, an Ice-array will be returned.
Every Ice-enriched node has the following methods and properties.
hasIceModel is true if the node has been Ice-enabled, false if not.
isHidden is true if the node has been hidden by hide(), false if not.
Sets the style display to none.
Sets the style display to "" (default value).
Toggles show() and hide().
Adds an event to a node.
$("elementid").addEvent({
event: "click",
cancel: true, // optional, cancels the default behaviour
scope: $body, // optional, scopes the function fn
fn: function(e) {
alert(e.target);
}
})
Adds multiple events to a node.
$("elementid").addEvent({
event: "click",
cancel: true, // optional, cancels the default behaviour
scope: $body, // optional, scopes the function fn
fn: function(e) {
alert(e.target);
}
},{
event: "mouseover",
fn: function(e) {
alert(this);
}
})
$("elementid").animate({
duration: 0.5, // seconds
method: "smooth", // smooth, fadein, fadeout, linear
morph: {
opacity: 0.5,
left: "20px",
fn: function(i) { // 0 <= i <= 1
this.setHtml("Current animation progress: "+i);
}
}
})
Documentation in progress.