PART II
Chapter 8: User Interface Design for Ajax 361
might argue strongly for the single-click, while others might prefer a double-click to
differentiate the action of clicking to load new content versus double-clicking to effect
content. We leave it to you to decide which you prefer, but our recent experience has shown
numerous accidental single-clicks by users.
Binding the trigger event (double- or single-click) to the editable region, can be done
directly like so:<div class="editable" onclick="edit(this);">Click me once to edit.</div>
<div class="editable" ondblclick="edit(this);">Double click me to edit.</div>However, a more appropriate way would be to associate the edit actions by inspecting the
classes of tags and binding the edit functions automatically. We’ll use the second approach
and use the library method AjaxTCR.util.DOM.getElementsByClassName().
In the following code fragment, all the editable tags in the document are collected upon
page load and then, depending on the class name values, they are bound to the event that
will trigger editing; either a single- or double-click.window.onload = function ()
{
var toEdit = AjaxTCR.util.DOM.getElementsByClassName("editable");
for (var i = 0 ; i< toEdit.length; i++)
if (toEdit[i].className.indexOf("doubleclick") != -1)
toEdit[i].ondblclick = function(){edit(this);};
else
toEdit[i].onclick = function(){edit(this);};
};Given this code, we simply need to specify various class names to indicate if something
is editable and how it is invoked. By default, single-click invokes editing, but if the class
name doubleclick is found, double-clicking will be used instead. The following markup
shows some examples of how a tag can indicate that it is editable.<div class="editable">Click me once to edit.</div>
<div>I am not editable click if you like.</div>
<div class="editable doubleclick">Double click me to edit.</div>If you want to indicate a style for the editing, the same technique might be used, but be
careful—there is a slight twist needed. For example, consider if you had markup like so:<div class="editable doubleclick blueborder">Double click me to edit.</div>which references a class blueborder that would set the border of the region to a thin blue
outline for the editing..blueborder {border: 1px blue solid;}This is close, but it will set the blue border before the editing is actually triggered.
Instead, change the markup to use a stemmed class name like so:<div class="editable doubleclick inedit-blueborder">Double click me to edit
and then I will have a blue border.</div>