• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Intro to jQuery UI
 

Intro to jQuery UI

on

  • 7,909 views

Walk through the features and concepts of jQuery UI

Walk through the features and concepts of jQuery UI

Statistics

Views

Total Views
7,909
Views on SlideShare
7,891
Embed Views
18

Actions

Likes
7
Downloads
169
Comments
1

4 Embeds 18

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Background seems as Red carpet .
    i like the background specially

    tagging it
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Intro to jQuery UI Intro to jQuery UI Presentation Transcript

    • OSCON 2010 THE jOUERY COMPANY jQuery UI Rich Interactivity, Simplified 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