What is actually happening on this page...
What you see here is the result of about 30 lines of code and a bunch of css. And, of course, the MooTools framework with Moo.FX.
It is intended a small demo and was written in about an hour (with making it look nice and so forth). In this version, we show off:
- referencing elements by CSS selectors (buttons)
- looping all elements of an array
- chaining commands
- attaching events to elements
- creating and inserting elements
- using delay
- using Fx.Styles to create animation effects.
- making windows draggable
- using tool tips
- using sortable lists
- using AJAX
- using eval to output from AJAX/PHP
PHP response handler for the AJAX call source code:
a DotCom interactive mootools demo 2007
<?PHP
if ($_GET["a"] == "sortorder") {
?>
if ($("message"))
$("message").remove();
var _layer = new Element("div");
_layer.addClass("header")
.setProperty("id", "message")
.injectTop($("ml"))
.setHTML("this is via ajax from PHP<br />"
+"<br />New sort order: <?=mysql_escape_string($_GET["ids"])?>")
.setStyle("width", "440px")
.addEvent("click", function() { this.remove() });
<?
// write new order to DB or do something useful
die;
}
?>