Custom effects easing

$('#myid')
	.animate(properties, [duration], [easing]);

• Your animations don't have to progress linearly
• There are many other options
  • slide
  • easeInSin

$('#myid')
	.animate({
		'font-size': '80px',
		'color': 'green'
	}, 1000, 'easeOutBounce');

This is a demo!!!

Effects Easing

Better Custom Effects* - toggleClass()

• * if you don't need easing or special options
• use the toggleClass method with its optional duration parameter

  .special {
  	font-size: 50px;
  	color: red;
  }
  

  $('#myid').toggleClass('special', 3000);
  

• this allows us to keep the presentation seperate where possible

This is a demo!!!

Adding delay()

$('#myid')
	.effect('pulsate')
	.delay(1000)
	.slideUp()
	.delay(3000)
	.show('fast');

Effect complete event

$("#myid").effect('puff', [options], [duration], [function]);

• all effects can take a fourth optional callback parameter that is called when the animation ends
• the callback can use the this keyword as usual to address the element the effect was attached to

$('#myid').effect('clip', {}, 'default', function() {
	alert('finished');
});

Good effects syntax

• Bad syntax

  $('#myid').effect('pulsate', {}, 'default', function() {
  	$(this).effect('explode', {'pieces': 25}, 'default', function() {
  		$(this).show('slow', {}, 'default', function() {
  			$(this).hide('fast');
  		});
  	});
  });
  

• Good Syntax

  $('#myid')
  	.effect('pulsate')
  	.effect('explode', {
  		'pieces': 25
  	}).show('slow')
  	.hide('fast');
  

  This works because the effects are queued up rather than applied immediately.

Drag and drop

jQuery UI provides several methods for creating drag-and-drop functionality:

• Sortable : a list of items that can be reordered
• Draggable : an element that can be dragged
• Dropable : elements on which a Draggable can be dropped

Sortable

$('#myid ul').sortable([options]);

• specifies a list (ul, ol) as being able to be dragged into any order
• with some stylings you can get rid of the list look and sort any grouping of elements
• implemented internally using Draggables and Droppables
• options:
  • disabled
  • appendTo
  • axis
  • cancel
  • connectWith

  • containment
  • cursor
  • cursorAt
  • delay
  • distance

  • dropOnEmpty
  • forceHelperSize
  • opacity
  • revert
  • tolerance
• to make a list un-sortable again, call .sortable('destroy') on the sortable element

Sortable demo

<ol id="simpsons">
	<li>Homer</li>
	<li>Marge</li>
	<li>Bart</li>
	<li>Lisa</li>
	<li>Maggie</li>
</ol>

$(function() {
	$("#simpsons").sortable();
});

Sortable list events

$(function() {
	$("simpsons").sortable({
		'update': function(event, ui) {
			// Do stuff here
		}
	});
});

• both handler functions receive a ui parameter with info about the event

Sortable list events example

$(function() {
	$("#simpsons").sortable({
		'update': listUpdate
	});
});

function listUpdate(event, ui) {
	// can do anything I want here; effects, an Ajax request, etc.
	ui.item.effect('shake');
}

Sortable "methods"

• jQuery plugins, like jQuery UI have an odd syntax for methods
• sortable methods
  • destroy
  • disable
  • enable
  • option
  • refresh
  • cancel

$('#my_list').sortable('methodName', [arguments]);

// Some examples
$('#my_list').sortable('destroy');
$('#my_list').sortable('option', 'cursor', 'pointer');

Draggable

$('#myid').draggable([options]);

• specifies an element as being able to be dragged

• Options:

  • disabled
  • appendTo
  • addClasses
  • connectToSortable
  • delay
  • distance
  • grid

  Methods:

  • destroy
  • disable
  • enable
  • option
  • widget

  Events:

  • create
  • start
  • drag
  • stop

Draggable example

<div id="draggabledemo1">Draggable demo 1. Default options.</div>
<div id="draggabledemo2">Draggable demo 2.
	{'grid': [40,40], 'revert': true}</div>

$('#draggabledemo1').draggable();
$('#draggabledemo2').draggable({
	'revert': true,
	'grid': [40, 40]
});

Draggable demo 1.
Default options.

Draggable demo 2.
{snap:[60, 60], revert:true}

Droppable

$('#myid').droppable([options]);

• specifies an element as being able to recieve dragglables

• Options:

  • disabled
  • accept
  • activeClass
  • hoverClass
  • scope
  • greedy
  • tolerance

  Methods:

  • destroy
  • disable
  • enable
  • option
  • widget

  Events:

  • create
  • over
  • out
  • drop
  • activate
  • deactivate

Drag/drop shopping demo

<img id="shirt" src="images/shirt.png" alt="shirt" />
<img id="cup" src="images/cup.png" alt="cup" />
<div id="droptarget"></div>

$('#shirt').draggable();
$('#cup').draggable();
$('#droptarget').droppable({
	'drop': productDrop
});

function productDrop(event, ui) {
	alert("You dropped " + ui.item.attr('id'));
}

Auto-completing text fields

Scriptaculous offers ways to make a text box that auto-completes based on prefix strings *:

• Local Autocompleter:

  var data = ["foo", "food", "foobar", "fooly", "cake"];
  $('#my_text_input').autocompleter({
  	'source': data
  });
  

• Ajax Autocompleter: The autocompleter will make AJAX calls to the given URL providing a term parameter with the current value of the input field

  $('#my_text_input').autocompleter({
  	'source': 'http://foo.com/webservice.php'
  });
  

* (won't be necessary once HTML5 datalist element is well supported)

Using a local autocompleter

var data = ["foo", "food", "foobar", "foolish", "foiled", "cake"];
$('#myid').autocompleter({
	'source': data
});

• pass the choices as an array of strings
• You can also pass an array of objects with label and value fields

  var data = [
  	{'label': 'Track and Field', 'value': 'track'},
  	{'label': 'Gymnastics', 'value': 'gymnastics'},
  	...
  ];
  

• the widget injects a ul elements full of choices as you type
• use the appendTo option to specify where the list is inserted

Local autocompleter demo

<input id="bands70s" size="40" type="text" />
<div id="bandlistarea"></div>

$('#bands70s').autocomplete({
	'source': data,
	'appendTo': '#bandlistarea'
});

Using an AJAX autocompleter

$('#my_input').autocomplete({
	'source': 'http://foo.com/webservice.php'
});

if (!isset($_GET['term'])) {
	header('HTTP/1.1 400 Invalid Request - No term parameter provided');
	die('No term parameter provided.');
}
$term = $_GET['term'];
$results = getCompleterResults($term);	 // an array() return value
print json_encode($results);

• when you have too many choices to hold them all in an array, you can instead fetch subsets of choices from a server using AJAX
• instead of passing choices as an array, pass a URL from which to fetch them
  • the AJAX call is made with a term parameter
  • the choices are sent back from the server as a JSON array of strings or array of objects with label and value fields

accordion widget

• your HTML should be pairs of headers with anchors and containers
• make the parent of these pairs an accordion

<div class="accordion">
	<h1><a href="#">Section 1</a></h1>
	<div>Section 1 Content</div>
	...
</div>

tabs widget

• your HTML should be a list of link to element on your page
• the href attributes should match ids of elements on the page

<div class="tabs">
	<ul>
		<li><a href="#tab1">Tab 1</a></li>
		<li><a href="#tab2">Tab 2</a></li>
		...
	</ul>
	<div id="tab1">Tab 1 Content</div>
	<div id="tab2">Tab 2 Content</div>
	...
</div>

jQuery UI theming

• jQuery UI uses classes gratuitously so that we can style our widgets however we want
• there are two kinds of classes used
  • framework classes which exist for all widgets
  • widget specific classes

Applying UI styles

• you can use the ui classes in your CSS to roll your own theme
• you can link a predefined theme to your page:
  • UI lightness
    
  • UI Darkness
    

  • Smootness
    
  • Start
    

  • Redmond
    
  • Sunny
    

  • Overcast
    
  • Le Frog
    

  • Flick
    
  • Pepper Grinder
    

  • Eggplant
    
  • Dark Hive
    

<link
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/theme/jquery-ui.css"
	rel="stylesheet" type="text/css" />