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