Intro to jQuery UI

OSCON 2010 THE jOUERY COMPANY jQuery UI Rich Interactivity, Simpliﬁed Mike Hostetler & Jonathan Sharp CC Attribution-NoDerivs 3.0 Unported THE jOUERY COMPANY

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://onwebdev.blogspot.com	14
http://www.slideshare.net	1
http://twitter.com	1
http://paper.li	1

Intro to jQuery UI

by appendTo

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 17

Statistics