intro to jquery ui
DESCRIPTION
Walk through the features and concepts of jQuery UITRANSCRIPT
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Rich Interactivity, Simplified
Mike Hostetler & Jonathan Sharp
T H E j O U E R Y C O M P A N Y
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
Downloading jQuery UI
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
Effects
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Effects$('p').bind('click',function(){ $(this).effect('drop');});
// hides element by pulling it left
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Effects$('p').bind('click',function(){ $(this).effect('drop',{ direction: 'up' });});
// hides element by pulling it up
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Effects$('p').bind('click',function(){ $(this).effect('drop',{ mode: 'show', direction: 'up' });});
// shows element by dropping it down
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Effects$('p').bind('click',function(){ $(this).show('drop',{ direction: 'up' });});// shows element by dropping it down
$('p').bind('click',function(){ $(this).hide('drop');});// hides element by pulling it left
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Effects$('p').bind('click',function(){ $(this).hide( 'drop', { direction: 'right' }, 3000, function(){ $(this).remove(); });});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Effects$('#button').bind('click',function(){ $('p').toggle('explode');});
// alternately explodes/implodes paragraph
$('#button').bind('click',function(){ $('p').toggle('explode', { pieces: 16 });});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Effects$('#one').bind('click', function(){ $(this).effect('highlight', { color: 'red', }, 3000);});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Effects$('p').click(function(){ $(this).animate({ backgroundColor: 'blue' }, 1000, 'swing');});
$('p').click(function(){ $(this).animate({ borderColor: '#f0c3a0' }, 1000, 'swing',function(){ $('this').effect('highlight'); });
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Effects$('p').click(function(){ $(this).addClass('enlarged',1000);});
$('p').click(function(){ $(this).removeClass('enlarged',1000);});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Effects$('p').click(function(){ $(this).switchClass( 'enlarged','selected',500);});
$('#button').click(function(){ $('.enlarged').toggleClass( 'enlarged',500);});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
Interactions
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Interactions$('.obj').draggable();
$('.obj').bind('dragstart', function(){ ... });
$('.obj').bind('drag', function(){ ... });
$('.obj').bind('dragstop', function(){ ... });
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Interactions$('.obj').draggable({ start: function(event, ui){ $(this).effect('highlight'); }, stop: function(event, ui){ $(this).effect('highlight'); }, drag: function(event, ui){ ... }});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Interactions$('.obj').draggable({ grid: [30,30], opacity: 0.5, containment: '#workspace', cursor: 'move', disabled: true});
$('.obj').draggable('option', 'grid', [5, 5]);
$('.obj').draggable('enable');
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Interactions$('.object').draggable({ helper: 'clone'});
$('.container').droppable({ drop: function(event,ui){ $(this).append(ui.draggable); }});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Interactions$('.object').draggable({ helper: 'clone'});
$('.container').droppable({ accept: '.object', tolerance: 'fit', drop: function(event,ui){ $(this).append(ui.draggable); }});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Interactions$('#user-list').sortable();
$('#user-list').sortable({ tolerance: 'pointer', scrollSensitivity: 30, scrollSpeed: 30});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Interactions$('#user-list').sortable({ update: function(event, ui){ var order = $(this).sortable('toArray'); var param = {users: order.toString()}; $.post('/update',param,function(){ //... }); }});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Interactions$('#groups .user-list') .sortable({ connectWith: '#groups .user-list' }) .bind('sortremove', function(){ // ... }) .bind('sortreceive', function(){ // ... });
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
Autocomplete
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Autocompletevar data = ['BSD','GPL','MIT','Apache'];
$('input.local').autocomplete({ source: data});
$('input.remote').autocomplete({ source: '/license_autocomplete'});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Autocomplete$('#auto').autocomplete({ source: function(request,response){ var data = {}; data.com = ['google','microsoft']; data.org = ['jquery','drupal']; data.gov = ['nasa','epa']; if( data[request.term] ){ response(data[request.term]); } else { response([]); } }});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Autocomplete$('#auto').autocomplete({ delay: 100, minLength: 2, disabled: true});
$('#button').click(function(){ $('#auto').autocomplete( 'option', 'disabled', false);});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Autocomplete$('#button').toggle( function(){ $('#auto').autocomplete('search', 'com'); }, function(){ $('#auto').autocomplete('close'); });
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Autocomplete$('#auto').autocomplete( search: function(event,ui){
}, select: function(event,ui){
} change: function(event,ui){
});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
Slider
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Slider$('#scale').slider();
$('#scale').slider({ min: 50, max: 400});
$('#scale').slider({ orientation: 'vertical'});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Slider$('#age').slider({ min: 10, max: 85, range: true, values: [18,24]});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Slider$('#age').slider({ min: 10, max: 85, range: true, values: [18,24], slide: function(event,ui){ $('#from').text(ui.values[0]); $('#to').text(ui.values[1]); }});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Slider$('#slider').slider({ min: 1, max: 10, value: 2, animate: 100, step: 0.1});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Slider$('#slider').slider({ value: 50}).bind('slidestart',function(event, ui()){
}).bind('slide',function(event, ui()){
}).bind('slidestop',function(event, ui()){
}).bind('slidechange',function(event, ui()){
});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
Dialog
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Dialog$('#info').dialog();
$('#warning').dialog({ title: 'Warning' autoOpen: false;});
$('#warning').dialog('open');
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Dialog$('#info').dialog({ position: 'top'});
$('#info').dialog({ position: ['top','left']});
$('#info').dialog({ position: [20,20]});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Dialog$('#info').dialog({ autoOpen: false, show: 'fade', hide: 'puff'});
$('#warning').dialog({ resizable: true, height: 300, width: 100});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Dialog$('#info').dialog({ modal: true, draggable: false});
$('#question').dialog({ buttons:{ Yes: function(){ ... }, No: function(){ ... }, Maybe: function(){ ... } }});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Dialog$('#info').bind('dialogopen',function(event,ui){ }).bind('drag',function(event,ui){ }).bind('resize',function(event,ui){
}).bind('dialogclose',function(event,ui){
});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
Tabs
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Tabs<div id='tabs'> <ul> <li><a href='#one'>One</a></li> <li><a href='#two'>Two</a></li> </ul> <div id='one'></div> <div id='two'></div></div>
$('#tabs').tabs();
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Tabs<div id='tabs'> <ul> <li><a href='/tab_1.html'>One</a></li> <li><a href='/tab_2.html'>Two</a></li> </ul></div>
$('#tabs').tabs({ cache: true, spinner: '<img src="spinner.gif"/>'});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Tabs$('#tabs').tabs({ fx: { opacity: 'toggle' }});
$('#tabs').tabs({ fx: { opacity: 'toggle', duration: 3000 }});
$('#tabs').tabs({ event: 'mouseover', fx: [{ width: 0 },{ width: 400 }]});
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Tabs$('#tabs').tabs();
$('#tabs').tabs('remove',1);
$('#tabs').tabs('add','#foo',0);
$('#tabs').tabs('disable',0);
$('#tabs').tabs('enable',0);
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
jQuery UI Tabs$('#tabs').tabs({ selected: 1}).bind('tabselect',function(event, ui){
}).bind('tabload',function(event, ui){
}).bind('tabshow',function(event, ui){
}
CC Attribution-NoDerivs 3.0 UnportedT H E j O U E R Y C O M P A N Y
OSCON 2010
Thank You@mikehostetler
@jdsharp