SlideShare ist ein Scribd-Unternehmen logo
1 von 47
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

Meteor로 만드는 modern web application
Meteor로 만드는 modern web applicationMeteor로 만드는 modern web application
Meteor로 만드는 modern web applicationJaeho Lee
 
Pianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio albumPianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio albumirwinvifxcfesre
 
Javascript and jQuery for Mobile
Javascript and jQuery for MobileJavascript and jQuery for Mobile
Javascript and jQuery for MobileIvano Malavolta
 
Back To The Front - Javascript Test Driven Development is between us (workshop)
Back To The Front - Javascript Test Driven Development is between us (workshop)Back To The Front - Javascript Test Driven Development is between us (workshop)
Back To The Front - Javascript Test Driven Development is between us (workshop)Marco Cedaro
 
Pimp your site with jQuery!
Pimp your site with jQuery!Pimp your site with jQuery!
Pimp your site with jQuery!Elliott Kember
 
ສ້າງລະບົບ Loin ດ້ວຍ php
ສ້າງລະບົບ Loin ດ້ວຍ phpສ້າງລະບົບ Loin ດ້ວຍ php
ສ້າງລະບົບ Loin ດ້ວຍ phpBounsong Byv
 
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Kraków
Tworzenie wtyczek dla TinyMCE 4.* - WordUp KrakówTworzenie wtyczek dla TinyMCE 4.* - WordUp Kraków
Tworzenie wtyczek dla TinyMCE 4.* - WordUp KrakówTomasz Dziuda
 
第二节课:html5 – web开发步入新阶段
第二节课:html5 – web开发步入新阶段第二节课:html5 – web开发步入新阶段
第二节课:html5 – web开发步入新阶段Tommy Chang
 
Android Fast Track CRUD Android PHP MySql
Android Fast Track CRUD Android PHP MySqlAndroid Fast Track CRUD Android PHP MySql
Android Fast Track CRUD Android PHP MySqlAgus Haryanto
 
Jquery Introduction Hebrew
Jquery Introduction HebrewJquery Introduction Hebrew
Jquery Introduction HebrewAlex Ivy
 
Skaters and BMXers from all over the U.S. descend on Grant Park
Skaters and BMXers from all over the U.S. descend on Grant ParkSkaters and BMXers from all over the U.S. descend on Grant Park
Skaters and BMXers from all over the U.S. descend on Grant Parkchicagonewsyesterday
 
Belajar Android Studio CRUD Data Mahasiswa
Belajar Android Studio CRUD Data MahasiswaBelajar Android Studio CRUD Data Mahasiswa
Belajar Android Studio CRUD Data MahasiswaAgus Haryanto
 
Chief Keef's hologram can't catch a break, and it's a win for Keef
Chief Keef's hologram can't catch a break, and it's a win for KeefChief Keef's hologram can't catch a break, and it's a win for Keef
Chief Keef's hologram can't catch a break, and it's a win for Keefchicagonewsonlineradio
 
A slew of AACM 50th anniversary celebrations this weekend
A slew of AACM 50th anniversary celebrations this weekendA slew of AACM 50th anniversary celebrations this weekend
A slew of AACM 50th anniversary celebrations this weekendchicagonewsyesterday
 

Was ist angesagt? (20)

Get more votes!
Get more votes!Get more votes!
Get more votes!
 
jQuery入門
jQuery入門jQuery入門
jQuery入門
 
Meteor로 만드는 modern web application
Meteor로 만드는 modern web applicationMeteor로 만드는 modern web application
Meteor로 만드는 modern web application
 
Pianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio albumPianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio album
 
Jquery ui, ajax
Jquery ui, ajaxJquery ui, ajax
Jquery ui, ajax
 
Introducción a Bolt
Introducción a BoltIntroducción a Bolt
Introducción a Bolt
 
Javascript and jQuery for Mobile
Javascript and jQuery for MobileJavascript and jQuery for Mobile
Javascript and jQuery for Mobile
 
Back To The Front - Javascript Test Driven Development is between us (workshop)
Back To The Front - Javascript Test Driven Development is between us (workshop)Back To The Front - Javascript Test Driven Development is between us (workshop)
Back To The Front - Javascript Test Driven Development is between us (workshop)
 
Pimp your site with jQuery!
Pimp your site with jQuery!Pimp your site with jQuery!
Pimp your site with jQuery!
 
ສ້າງລະບົບ Loin ດ້ວຍ php
ສ້າງລະບົບ Loin ດ້ວຍ phpສ້າງລະບົບ Loin ດ້ວຍ php
ສ້າງລະບົບ Loin ດ້ວຍ php
 
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Kraków
Tworzenie wtyczek dla TinyMCE 4.* - WordUp KrakówTworzenie wtyczek dla TinyMCE 4.* - WordUp Kraków
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Kraków
 
第二节课:html5 – web开发步入新阶段
第二节课:html5 – web开发步入新阶段第二节课:html5 – web开发步入新阶段
第二节课:html5 – web开发步入新阶段
 
Android Fast Track CRUD Android PHP MySql
Android Fast Track CRUD Android PHP MySqlAndroid Fast Track CRUD Android PHP MySql
Android Fast Track CRUD Android PHP MySql
 
Jquery Introduction Hebrew
Jquery Introduction HebrewJquery Introduction Hebrew
Jquery Introduction Hebrew
 
Skaters and BMXers from all over the U.S. descend on Grant Park
Skaters and BMXers from all over the U.S. descend on Grant ParkSkaters and BMXers from all over the U.S. descend on Grant Park
Skaters and BMXers from all over the U.S. descend on Grant Park
 
Belajar Android Studio CRUD Data Mahasiswa
Belajar Android Studio CRUD Data MahasiswaBelajar Android Studio CRUD Data Mahasiswa
Belajar Android Studio CRUD Data Mahasiswa
 
Service Workers
Service WorkersService Workers
Service Workers
 
Chief Keef's hologram can't catch a break, and it's a win for Keef
Chief Keef's hologram can't catch a break, and it's a win for KeefChief Keef's hologram can't catch a break, and it's a win for Keef
Chief Keef's hologram can't catch a break, and it's a win for Keef
 
A slew of AACM 50th anniversary celebrations this weekend
A slew of AACM 50th anniversary celebrations this weekendA slew of AACM 50th anniversary celebrations this weekend
A slew of AACM 50th anniversary celebrations this weekend
 
Get more votes!
Get more votes!Get more votes!
Get more votes!
 

Andere mochten auch

Projet Pmb
Projet PmbProjet Pmb
Projet Pmb0351907h
 
Introdução Ao Ajax - IFRN
Introdução Ao Ajax - IFRNIntrodução Ao Ajax - IFRN
Introdução Ao Ajax - IFRNAllyson Barros
 
Desenhando aplicativos ricos para Web com jQuery
Desenhando aplicativos ricos para Web com jQueryDesenhando aplicativos ricos para Web com jQuery
Desenhando aplicativos ricos para Web com jQueryCarlos Eduardo Alves
 
A Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETA Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETJames Johnson
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginningAnis Ahmad
 

Andere mochten auch (7)

Projet Pmb
Projet PmbProjet Pmb
Projet Pmb
 
JQuery UI
JQuery UIJQuery UI
JQuery UI
 
Introdução Ao Ajax - IFRN
Introdução Ao Ajax - IFRNIntrodução Ao Ajax - IFRN
Introdução Ao Ajax - IFRN
 
Desenhando aplicativos ricos para Web com jQuery
Desenhando aplicativos ricos para Web com jQueryDesenhando aplicativos ricos para Web com jQuery
Desenhando aplicativos ricos para Web com jQuery
 
A Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETA Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NET
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
User Interface
User InterfaceUser Interface
User Interface
 

Intro to jQuery UI

  • 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