script.aculo.us is another set of JavaScript libraries, which
is based on Prototype, offers handy pre-fabricated widgets to enhance the user
interface of web sites. It provides a visual effects engine, a drag and drop
library (including sortable lists), a couple of controls (Ajax-based
autocompletion, in-place editing, and sliders) and more. As of January 3, 2008,
script.aculo.us upgrades to version 1.8.1. For small and mid-sized web projects, script.aculo.us+Prototype are a recommendable solution.
I am going to only introduce two objects, Sortable and
Ajax.Autocompleter, in script.aculo.us by respective examples for brevity and
their being used later on.
Sample for object Sortable
According the script.aculo.us wiki document, Sortable is a
quick way to initialize many Draggable elements in a container element. When
you create a new Sortable, it takes care of the creation of the corresponding
draggable Droppables. The main syntax of Sortable is as follows:
Sortable.create('id_of_container',[options]);
As you may imagine, the powerful function is hidden inside parameter
"options." However, we only give a basic illustration of object Sortable
in the following sample.
Listing 7
<body>
<h1>Demo for Sortable.create</h1>
<ul style="position: relative;" id="list" class="sortablelist">
<li id="Tags_1" class="sortablelist" style="position: relative;">
<img alt="move element up" src="images/arrow_up_blue.png" class="arrowbutton"/>
<img alt="move element down" src="images/arrow_down_blue.png"
style="margin-right: 20px;" class="arrowbutton"/>Prototype</li>
<li id="Tags_2" class="sortablelist" style="position: relative;">
<img alt="move element up" src="images/arrow_up_blue.png" class="arrowbutton"/>
<img alt="move element down" src="images/arrow_down_blue.png"
style="margin-right: 20px;" class="arrowbutton"/>script.aculo.us</li>
<li id="Tags_3" class="sortablelist" style="position: relative;">
<img alt="move element up" src="images/arrow_up_blue.png" class="arrowbutton"/>
<img alt="move element down" src="images/arrow_down_blue.png"
style="margin-right: 20px;" class="arrowbutton"/>Dojo</li>
<li id="Tags_4" class="sortablelist" style="position: relative;">
<img alt="move element up" src="images/arrow_up_blue.png" class="arrowbutton"/>
<img alt="move element down" src="images/arrow_down_blue.png"
style="margin-right: 20px;" class="arrowbutton"/>jQuery</li>
</ul>
<script type="text/javascript" >
Sortable.create("list", {
ghosting: true,
constraint: false
});
</script>
</body>Here, the first parameter "list" specifies the
sortable element, while the second parameter corresponds to an object that
holds a possible large set of options. Here, property ghosting
specifies whether to keep the copy at the original position when dragging an
element, the second property constraint indicates the
moving direction (the default value is vertical, and
the other two are horizontal and false
respectively). Figure 4 illustrates the two snapshots before and after moving
the item in a list.
Figure 4 - Demo for Sortable.create usage
Next, let us take a look at the Ajax related topic provided
by script.aculo.us.
Sample for object Ajax.Autocompleter
There are three Ajax controls in script.aculo.us, which are Ajax.Autocompleter,
Ajax.InPlaceEditor, and Ajax.InPlaceCollectionEditor, respectively. Here, we
only show interest in the first one.
Today, maybe Google Suggest becomes the doctrine when one mentions
AJAX. script.aculo.us, of course, provides the kind of support through two
means of automatic completion, which are achieved through two classes, Ajax.Autocompleter
and Autocompleter.Local. The distinction lies in that the former deals with the
listed data coming from the server, while the latter works with data preset
using client-side scripts.
Here, we only care for class Ajax.Autocompleter, whose
syntax is defined below:
new Ajax.Autocompleter(id_of_text_field, id_of_div_to_populate, url, options);
In the following example, there are two elements introduced.
The <input/> element is used to enter a character string, the
<div/> element is used to display the dropdown list.
Listing 8
<input type="text" id="autocomplete" name="autocomplete_parameter" />
<div id="autocomplete_choices" class="autocomplete"/>
Then, in the JavaScript block, we have defined an Ajax.Autocompleter
object, as follows:
Listing 9
new Ajax.Autocompleter
(
"autocomplete",
"autocomplete_choices",
"list.html", {
method: "GET",
tokens: ","
}
);The first two parameters correspond to the above page
elements. The third parameter specifies the URL of the Ajax request, through
which Ajax.Autocompleter will assign the returned data from this request to the
innerHTML attribute of the dropdown list element defined above. The last
parameter relates to a set of options. Herein, we specify the request mode to
be GET and the list separator of many entering data is "'". For more
options, please refer to the URL. Figure 5 shows one of the running-time snapshots for
this sample.
Figure 5 - Demo for Ajax.Autocomplete
So much for the rough introduction to the two above
client-side Ajax frameworks!
Next, we will roll up our sleeves to start the real work - developing
a basic web tag system using the two Ajax frameworks. First of all, let us familiarize
ourselves with the functionality requirements of the target system.
