Walk through the features and concepts of jQuery UI

1. OSCON 2010
THE jOUERY COMPANY
jQuery UI
Rich Interactivity, Simplified
Mike Hostetler & Jonathan Sharp
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

2. OSCON 2010
Downloading jQuery UI
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

3. OSCON 2010
Effects
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

4. OSCON 2010
jQuery UI Effects
$('p').bind('click',function(){
$(this).effect('drop');
});
// hides element by pulling it left
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

5. 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 Unported
THE jOUERY COMPANY

6. 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 Unported
THE jOUERY COMPANY

7. 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 Unported
THE jOUERY COMPANY

8. OSCON 2010
jQuery UI Effects
$('p').bind('click',function(){
$(this).hide(
'drop',
{ direction: 'right' },
3000,
function(){
$(this).remove();
});
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

9. 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 Unported
THE jOUERY COMPANY

10. OSCON 2010
jQuery UI Effects
$('#one').bind('click', function(){
$(this).effect('highlight', {
color: 'red',
}, 3000);
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

11. 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 Unported
THE jOUERY COMPANY

12. OSCON 2010
jQuery UI Effects
$('p').click(function(){
$(this).addClass('enlarged',1000);
});
$('p').click(function(){
$(this).removeClass('enlarged',1000);
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

13. 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 Unported
THE jOUERY COMPANY

14. OSCON 2010
Interactions
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

15. OSCON 2010
jQuery UI Interactions
$('.obj').draggable();
$('.obj').bind('dragstart', function(){ ... });
$('.obj').bind('drag', function(){ ... });
$('.obj').bind('dragstop', function(){ ... });
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

16. 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 Unported
THE jOUERY COMPANY

17. 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 Unported
THE jOUERY COMPANY

18. OSCON 2010
jQuery UI Interactions
$('.object').draggable({
helper: 'clone'
});
$('.container').droppable({
drop: function(event,ui){
$(this).append(ui.draggable);
}
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

19. 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 Unported
THE jOUERY COMPANY

20. OSCON 2010
jQuery UI Interactions
$('#user-list').sortable();
$('#user-list').sortable({
tolerance: 'pointer',
scrollSensitivity: 30,
scrollSpeed: 30
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

21. 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 Unported
THE jOUERY COMPANY

22. OSCON 2010
jQuery UI Interactions
$('#groups .user-list')
.sortable({
connectWith: '#groups .user-list'
})
.bind('sortremove', function(){
// ...
})
.bind('sortreceive', function(){
// ...
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

23. OSCON 2010
Autocomplete
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

24. OSCON 2010
jQuery UI Autocomplete
var data = ['BSD','GPL','MIT','Apache'];
$('input.local').autocomplete({
source: data
});
$('input.remote').autocomplete({
source: '/license_autocomplete'
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

25. 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 Unported
THE jOUERY COMPANY

26. 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 Unported
THE jOUERY COMPANY

27. OSCON 2010
jQuery UI Autocomplete
$('#button').toggle(
function(){
$('#auto').autocomplete('search', 'com');
},
function(){
$('#auto').autocomplete('close');
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

28. OSCON 2010
jQuery UI Autocomplete
$('#auto').autocomplete(
search: function(event,ui){
},
select: function(event,ui){
}
change: function(event,ui){
}
);
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

29. OSCON 2010
Slider
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

30. OSCON 2010
jQuery UI Slider
$('#scale').slider();
$('#scale').slider({
min: 50,
max: 400
});
$('#scale').slider({
orientation: 'vertical'
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

31. OSCON 2010
jQuery UI Slider
$('#age').slider({
min: 10,
max: 85,
range: true,
values: [18,24]
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

32. 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 Unported
THE jOUERY COMPANY

33. OSCON 2010
jQuery UI Slider
$('#slider').slider({
min: 1,
max: 10,
value: 2,
animate: 100,
step: 0.1
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

34. 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 Unported
THE jOUERY COMPANY

35. OSCON 2010
Dialog
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

36. OSCON 2010
jQuery UI Dialog
$('#info').dialog();
$('#warning').dialog({
title: 'Warning'
autoOpen: false;
});
$('#warning').dialog('open');
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

37. OSCON 2010
jQuery UI Dialog
$('#info').dialog({
position: 'top'
});
$('#info').dialog({
position: ['top','left']
});
$('#info').dialog({
position: [20,20]
});
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

38. 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 Unported
THE jOUERY COMPANY

39. 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 Unported
THE jOUERY COMPANY

40. 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 Unported
THE jOUERY COMPANY

41. OSCON 2010
Tabs
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY

42. 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 Unported
THE jOUERY COMPANY

43. 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 Unported
THE jOUERY COMPANY

44. 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 Unported
THE jOUERY COMPANY

45. 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 Unported
THE jOUERY COMPANY

46. 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 Unported
THE jOUERY COMPANY

47. OSCON 2010
Thank You
@mikehostetler
@jdsharp
CC Attribution-NoDerivs 3.0 Unported
THE jOUERY COMPANY