OSCON 2010




                                       THE jOUERY COMPANY



                            jQuery UI
        ...
OSCON 2010




                  Downloading jQuery UI




CC Attribution-NoDerivs 3.0 Unported
                          ...
OSCON 2010




                                       Effects




CC Attribution-NoDerivs 3.0 Unported
                   ...
OSCON 2010




                                       jQuery UI Effects
$('p').bind('click',function(){
  $(this).effect('...
OSCON 2010




                                       jQuery UI Effects
$('p').bind('click',function(){
  $(this).effect('...
OSCON 2010




                                       jQuery UI Effects
$('p').bind('click',function(){
  $(this).effect('...
OSCON 2010




                                       jQuery UI Effects
$('p').bind('click',function(){
  $(this).show('dr...
OSCON 2010




                                       jQuery UI Effects
$('p').bind('click',function(){
  $(this).hide(
  ...
OSCON 2010




                                       jQuery UI Effects
$('#button').bind('click',function(){
  $('p').tog...
OSCON 2010




                                       jQuery UI Effects
$('#one').bind('click', function(){
  $(this).effe...
OSCON 2010




                                       jQuery UI Effects
$('p').click(function(){
  $(this).animate({
    b...
OSCON 2010




                                       jQuery UI Effects
$('p').click(function(){
  $(this).addClass('enlar...
OSCON 2010




                                       jQuery UI Effects
$('p').click(function(){
  $(this).switchClass(
  ...
OSCON 2010




                                       Interactions




CC Attribution-NoDerivs 3.0 Unported
              ...
OSCON 2010




                             jQuery UI Interactions
$('.obj').draggable();


$('.obj').bind('dragstart', fu...
OSCON 2010




                             jQuery UI Interactions
$('.obj').draggable({
  start: function(event, ui){
   ...
OSCON 2010




                             jQuery UI Interactions
$('.obj').draggable({
  grid: [30,30],
  opacity: 0.5,
...
OSCON 2010




                             jQuery UI Interactions
$('.object').draggable({
  helper: 'clone'
});

$('.con...
OSCON 2010




                             jQuery UI Interactions
$('.object').draggable({
  helper: 'clone'
});

$('.con...
OSCON 2010




                             jQuery UI Interactions
$('#user-list').sortable();

$('#user-list').sortable({...
OSCON 2010




                             jQuery UI Interactions
$('#user-list').sortable({
  update: function(event, ui...
OSCON 2010




                             jQuery UI Interactions
$('#groups .user-list')
  .sortable({
     connectWith:...
OSCON 2010




                                       Autocomplete




CC Attribution-NoDerivs 3.0 Unported
              ...
OSCON 2010




                         jQuery UI Autocomplete
var data = ['BSD','GPL','MIT','Apache'];

$('input.local')....
OSCON 2010




                         jQuery UI Autocomplete
$('#auto').autocomplete({
  source: function(request,respon...
OSCON 2010




                         jQuery UI Autocomplete
$('#auto').autocomplete({
  delay: 100,
  minLength: 2,
  d...
OSCON 2010




                         jQuery UI Autocomplete
$('#button').toggle(
  function(){
     $('#auto').autocomp...
OSCON 2010




                         jQuery UI Autocomplete
$('#auto').autocomplete(
  search: function(event,ui){

   ...
OSCON 2010




                                       Slider




CC Attribution-NoDerivs 3.0 Unported
                    ...
OSCON 2010




                                       jQuery UI Slider
$('#scale').slider();

$('#scale').slider({
  min: ...
OSCON 2010




                                       jQuery UI Slider
$('#age').slider({
  min: 10,
  max: 85,
  range: t...
OSCON 2010




                                       jQuery UI Slider
$('#age').slider({
  min: 10,
  max: 85,
  range: t...
OSCON 2010




                                       jQuery UI Slider
$('#slider').slider({
  min: 1,
  max: 10,
  value:...
OSCON 2010




                                       jQuery UI Slider
$('#slider').slider({
  value: 50
}).bind('slidesta...
OSCON 2010




                                       Dialog




CC Attribution-NoDerivs 3.0 Unported
                    ...
OSCON 2010




                                       jQuery UI Dialog
$('#info').dialog();

$('#warning').dialog({
  titl...
OSCON 2010




                                       jQuery UI Dialog
$('#info').dialog({
  position: 'top'
});

$('#info...
OSCON 2010




                                       jQuery UI Dialog
$('#info').dialog({
  autoOpen: false,
  show: 'fad...
OSCON 2010




                                       jQuery UI Dialog
$('#info').dialog({
  modal: true,
  draggable: fal...
OSCON 2010




                                       jQuery UI Dialog
$('#info').bind('dialogopen',function(event,ui){

}...
OSCON 2010




                                       Tabs




CC Attribution-NoDerivs 3.0 Unported
                      ...
OSCON 2010




                                       jQuery UI Tabs
<div id='tabs'>
  <ul>
    <li><a href='#one'>One</a>...
OSCON 2010




                                       jQuery UI Tabs
<div id='tabs'>
  <ul>
    <li><a href='/tab_1.html'>...
OSCON 2010




                                       jQuery UI Tabs
$('#tabs').tabs({
  fx: { opacity: 'toggle' }
});

$(...
OSCON 2010




                                       jQuery UI Tabs
$('#tabs').tabs();

$('#tabs').tabs('remove',1);

$('...
OSCON 2010




                                       jQuery UI Tabs
$('#tabs').tabs({
  selected: 1
}).bind('tabselect',f...
OSCON 2010




                                       Thank You
                                       @mikehostetler
    ...
Upcoming SlideShare
Loading in...5
×

Intro to jQuery UI

6,973

Published on

Walk through the features and concepts of jQuery UI

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,973
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
180
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Intro to jQuery UI

  1. 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. 2. OSCON 2010 Downloading jQuery UI CC Attribution-NoDerivs 3.0 Unported THE jOUERY COMPANY
  3. 3. OSCON 2010 Effects CC Attribution-NoDerivs 3.0 Unported THE jOUERY COMPANY
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. OSCON 2010 Interactions CC Attribution-NoDerivs 3.0 Unported THE jOUERY COMPANY
  15. 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. 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. 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. 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. 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. 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. 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. 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. 23. OSCON 2010 Autocomplete CC Attribution-NoDerivs 3.0 Unported THE jOUERY COMPANY
  24. 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. 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. 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. 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. 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. 29. OSCON 2010 Slider CC Attribution-NoDerivs 3.0 Unported THE jOUERY COMPANY
  30. 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. 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. 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. 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. 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. 35. OSCON 2010 Dialog CC Attribution-NoDerivs 3.0 Unported THE jOUERY COMPANY
  36. 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. 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. 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. 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. 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. 41. OSCON 2010 Tabs CC Attribution-NoDerivs 3.0 Unported THE jOUERY COMPANY
  42. 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. 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. 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. 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. 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. 47. OSCON 2010 Thank You @mikehostetler @jdsharp CC Attribution-NoDerivs 3.0 Unported THE jOUERY COMPANY
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×