Your SlideShare is downloading. ×
Intro to jQuery UI
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Intro to jQuery UI

6,767
views

Published on

Walk through the features and concepts of jQuery UI

Walk through the features and concepts of jQuery UI

Published in: Technology

1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,767
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
173
Comments
1
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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