As can be seen in the first line of tasklist.js (code starts on the next page), the work to be done is scheduled after loading the complete document by passing it to jQuery's $(document).ready() function.

The first step is to add to any element with a header class the ui-widget and ui-widget-header classes as well. This will cause these elements to be styled in a way that is consistent with the chosen theme.

Then we configure the add button (or rather any element with the add-button class) as a jQuery UI button widget. The option object passed to it will configure it to show no text, but just a single icon depicting a thick plus sign. We also add an extra function to the click handler of the button that checks any element marked with the inline-label class to see if its contents are identical to the contents of its title attribute. If that is the case, we set the contents to the empty string, as this indicates that the user hasn't filled in anything in this element and we do not want to store the text of the inline label as the content of our new task (more about this in the section on tooltips). Note that we do nothing to prevent propagation of the click event, so if this button is of the submit type (and our add button is) the submit action will still be performed.

All elements with the del-button class (highlighted) are then styled with an icon of a trash can. The buttons also receive an extra click handler that will remove the disabled attribute from their siblings (the input fields in the same form) to make sure the submit action will receive the contents even from fields that are marked as disabled.

Next, the other<button> elements are adorned with an appropriate icon and to any text or password<input> element we add a textinput class to mark it for the tooltip library.

In the second highlighted line, we encounter jQuery UI's datepicker widget. The datepicker widget greatly simplifies entering dates for the user and is now more or less a staple item in any web application or website that asks the user to enter a date. jQuery UI's datepicker is very straightforward to use, yet comes with a host of configuration options (all of them documented at http://jqueryui.com/demos/datepicker/).

We use the dateFormat option to configure the datepicker to store dates as YYYY-MM-DD. Datepicker has a number of predefined formats and this one happens to be an international standard as well as a suitable format to sort dates in a simple way. We also configure the datepicker to call a function when the user closes the datepicker. This function removes any inline-label class, preventing the newly entered date to appear in the colors associated with any inline label (as we see later, when we look at tasklist.css, we style the colors of any element with an inline-label class in a distinct way).

Earlier, we indicated that we wanted to present the list of tasks ordered by their due date. We therefore apply the sort() plugin from sort.js to all<input> elements with a duedate class. sort() takes two arguments. The first one is a comparison function that is passed two elements to compare. In our case, that will be<input> elements that contain a date in the YYYY-MM-DD format, so we can simply compare the values of these elements as text and return plus or minus one. The second argument is a function that takes no arguments and should return the element to be sorted. The input element with the due date is available as the this variable within this function and we use it to return the parent of the input element. This parent will be the<form> element that encloses it and because we represent each task as a form, we want those forms to be sorted, not just the<input> elements inside these forms.

The last set of actions in tasklist.js adds a disabled attribute to any<input> element within an element that has a done class and disables any done button. This will ensure that tasks marked as done cannot be altered:

Chapter3/tasklist.js

$(document).ready(function(){
	$(".header").addClass("ui-widget ui-widget-header");
	$(".add-button").button(
		{icons:{primary: 'ui-icon-plusthick' },
		text:false}).click(function(){
		$(".inline-label").each(function() {
				if($(this).val() === $(this).attr('title')) {
					$(this).val(''),
				};
	})
});
$(".del-button").button(

	{icons:{primary: 'ui-icon-trash' },
	text:false}).click(function(){
		$(this).siblings("input").removeAttr("disabled");
});
$(".done-button").button( {icons: {primary:'ui-icon-check'},
							text:false});
$(".logoff-button").button({icons: {primary:'ui-icon-closethick'},
							text:false});
$(".login-button").button( {icons: {primary:'ui-icon-play'},
							text:false});
$(":text").addClass("textinput");
$(":password").addClass("textinput");
$( ".editable-date" ).datepicker({
		dateFormat: $.datepicker.ISO_8601,
		onClose: function(dateText,datePicker){
		if(dateText != ''){$(this).removeClass("inline-label");}}
	});
$("#items form input.duedate").sort(
		function(a,b){return $(a).val() > $(b).val() ? 1 : -1;},
		function(){ return this.parentNode; }).addClass(
												"just-sorted");
$(".done .done-button").button( "option", "disabled", true );
$(".done input").attr("disabled","disabled");
});