Object Oriented jQuery with MooTools - Ryan...
Transcript of Object Oriented jQuery with MooTools - Ryan...
![Page 1: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/1.jpg)
Object Oriented jQuerywith MooTools
by Ryan Florence
Saturday, April 24, 2010
![Page 2: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/2.jpg)
$(document).ready(function(){
$('#my-form').submit(function(event){ event.preventDefault(); $.post($(this).attr('action'), $(this).serialize(),
function(data){ $('#container').html(data);
document.forms.myForm.reset(); });
});
});
Saturday, April 24, 2010
![Page 3: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/3.jpg)
$('#spinner').hide();
$('#my-form').submit(function(event){ event.preventDefault(); $(this).css({'opacity': 0.5}); $('#spinner').fadeIn().css({'background-position': 0 + 'px ' + 0 + 'px'}); var loopCount = 0; var frames = 10; var frameWidth = 64; var computeX = function(){ loopCount++; loopCount = (loopCount == (frames)) ? 0 : loopCount; return -loopCount * frameWidth; }; var step = function(){ $('#spinner').css({'background-position': computeX() + 'px ' + '0px' }); }; var interval = setInterval(step, 100); $('input').blur(); $.post($(this).attr('action'), $(this).serialize(), function(data){ clearInterval(interval); $('#container').html(data); $('#my-form').css({'opacity': 1}); document.forms.myForm.reset(); $('#spinner').fadeOut(); });});
$(document).ready(function(){
});
Saturday, April 24, 2010
![Page 4: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/4.jpg)
$('#spinner').hide();
$('#my-form').submit(function(event){ event.preventDefault(); $(this).css({'opacity': 0.5}); $('#spinner').fadeIn().css({'background-position': 0 + 'px ' + 0 + 'px'}); var loopCount = 0; var frames = 10; var frameWidth = 64; var computeX = function(){ loopCount++; loopCount = (loopCount == (frames)) ? 0 : loopCount; return -loopCount * frameWidth; }; var step = function(){ $('#spinner').css({'background-position': computeX() + 'px ' + '0px' }); }; var interval = setInterval(step, 100); $('input').blur(); $.post($(this).attr('action'), $(this).serialize(), function(data){ clearInterval(interval); $('#container').html(data); $('#my-form').css({'opacity': 1}); document.forms.myForm.reset(); $('#spinner').fadeOut(); });});
$(document).ready(function(){
});
• Super fast
• Easy to ‘test’ because the app is the test
Saturday, April 24, 2010
![Page 5: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/5.jpg)
var user;var data;var zoom = 'out';var notesToggle = true;var gridStick = false;var view = 'both';var viewTile = false;var showNotes = false;var showFavorites = true;var showRest = true;var grid;var wrap;var grip;var gridWidth;var mySlider;var scroll;function zoomInOut(){ var size; var src; if(zoom == 'out') { zoom = 'in'; size = 'large'; src = 'out'; } else { zoom = 'out'; size = 'medium'; src = 'in'; } var req = new Request.HTML({ method: 'get', data: { 'user' : data[0], 'image' : data[1], 'size' : size }, url: '../../../album_image.php', update: $(’#image_display'), onRequest: function(){ $(’#image_loading').css('display','block'); }, onComplete: function(response) { $(’#image_loading').css('display','none'); $(’##zoom_btn img').set('src','../../../assets/zoom_'+src+'.png'); } }).send();}function viewToggle(type){ if(type == 'image'){ if(view != 'tile') gridWidth = grid.getStyle('width').toInt(); grid.tween('width',0); wrap.tween('right',0); grip.tween('left',window.getSize().x); view = 'image'; } else if(type == 'both'){ grid.tween('width',gridWidth); wrap.tween('right',gridWidth); grip.tween('left',window.getSize().x-gridWidth); view = 'both'; } else if(type == 'tile') { grid.tween('width',window.getSize().x+10); wrap.tween('right',window.getSize().x+10); grip.tween('left',-10) view = 'tile'; } else if(type == 'domready'){ grid.css('width',window.getSize().x+10); wrap.css('right',window.getSize().x+10); grip.css('left',-10); view == 'tile'; } else if(type == 'load'){ grid.css('width',gridWidth); wrap.css('right',gridWidth); grip.css('left',window.getSize().x-gridWidth); view == 'both'; }}window.bind('domready',function(){
// ********** UI CONTROLS ************ // // assign the main variables grid = $('#image_grid'); wrap = $('#image_wrap'); grip = $('#grip'); gridWidth = grid.getStyle('width').toInt(); // flip the tile out while it loads so we can see whats happening viewToggle('domready'); $('#toggles button').bind('click',function(event){ event.stop(); $('#toggles button.active').removeClass('active'); this.addClass('active'); var type = this.get('rel'); viewToggle(type); });
// thumbnail resize slider mySlider = new Slider('slide_container', 'slide_handle', { snap: true, range : [50,200], onTick: function(pos){ this.knob.css(this.property, pos); }, onChange: function(pos){ $('#span.frame_inner img').css('height',pos + 'px'); } }); mySlider.set(200);
// Box Resize Drag var myDrag = new Drag.Move(grip,{ modifiers: {x: 'left', y: false}, onDrag : function(){ var width = window.getSize().x-grip.getStyle('left').toInt(); grid.css('width',width); wrap.css('right',width); }, onComplete : function(){ var windowSize = window.getSize().x; var gripRight = grid.getStyle('width').toInt(); var math = windowSize-gripRight; if(math < 0) { grip.css('left',0); grid.css('width',windowSize); wrap.css('right',windowSize); } } }); window.bind('resize',function(){ var windowSize = window.getSize().x; var gridSize = grid.getStyle('width').toInt(); var notesSize = $(’#notes_container').getSize().x; var math = windowSize-gridSize; if(view == 'tile'){ grip.css('left',-10); grid.css('width',windowSize+10); wrap.css('right',windowSize+10); } else if(math < 0){ grip.css('left',0); grid.css('width',windowSize); wrap.css('right',windowSize); } else { grip.css('left',windowSize-gridSize); } }) // Auto Scroller scroll = new Fx.Scroll('image_grid_thumbs', { offset: {'x': 0, 'y': -150}, transition: Fx.Transitions.Quart.easeOut });
// toggle note pane $('#toggle_notes').bind('click',function(event){ event.stop(); if(this.hasClass('toggled')){ this.removeClass('toggled'); $('#toggle_notes img').set('src','../../../assets/notes.png'); $('#notes_container').tween('left',-200); $('#image_wrap').tween('left',0); } else { this.addClass('toggled'); $('#toggle_notes img').set('src','../../../assets/notes_active.png'); $('#notes_container').tween('left',0); $('#image_wrap').tween('left',200); } }); // radio input filters $('#filter_container').getElements('input[name=radio_filter]').bind('change',function(){ var filter = this.get('value'); if(filter != 'all'){ $('#span.frame').css('display','none'); $('#span.frame.'+filter).css('display',''); } else { $('#span.frame').css('display',''); } }); //Scroll while loading $('#span.frame img').bind('load',function(){ scroll.toElement(this); });
// ********* Functionality ************* // function loadImage(imageData){ data = new Array(); data = imageData.split(':'); $('.photo_name').set('text',data[1]); var req = new Request.HTML({ method: 'get', data: { 'user' : data[0], 'image' : data[1], 'size' : data[2] }, url: '../../../album_image.php', update: $('#image_display'), onRequest: function(){ $('#image_loading').css('display','block'); }, onComplete: function(response) { $('#image_loading').css('display','none'); } }).send(); var req = new Request.HTML({ method: 'get', data: { 'photo_id' : data[3]}, url: '../../../album_notes.php', update: $('#notes'), onRequest: function(){ $('#notes_loading').css('display','block'); }, onComplete: function(response) { $('#notes_loading').css('display','none'); } }).send(); }
// next / previous functions function clickNext(){ var nextSibling = $('#span.frame.current').getNext(); if(nextSibling.get('id') == 'scroll_offset') { $('#span.frame:first-child').fireEvent('click'); } else { nextSibling.fireEvent('click'); } } function clickPrev(){ var prevSibling = $('#span.frame.current').getPrevious(); if(prevSibling == '') { $('#scroll_offset').getPrevious().fireEvent('click'); } else { prevSibling.fireEvent('click'); } } $('#next').bind('click',function(event){ event.stop(); clickNext(); }); $('#prev').bind('click',function(event){ event.stop(); clickPrev(); });
$('#author').bind('focus',function(){ this.addClass('focus'); }).bind('blur',function(){ this.removeClass('focus'); }); $('#note_text').bind('focus',function(){ this.addClass('focus'); }).bind('blur',function(){ this.removeClass('focus'); }) // keyboard functionality window.bind('keyup',function(event){ if(event.key == 'right' || event.key == 'down') clickNext(); if(event.key == 'left' || event.key == 'up') clickPrev(); if(event.key == 'f' && $('#filter').hasClass('focus') == false && $('#author').hasClass('focus') == false && $('#note_text').hasClass('focus') == false) $(’#favorites').fireEvent('click'); });
// add/remove from favorites $('#favorites').bind('click',function(event){ var action = this.get('rel'); var req = new Request.HTML({ method: 'post', data: { 'action' : action, 'data' : data }, url: '../../../album_actions.php', onRequest: function(){ $('#image_loading').css('display','block'); }, onComplete: function(response) { $('#image_loading').css('display','none'); if(action == 'add') { $(’##favorites img').set('src','../../../assets/remove_from_favorites.png'); $(’#favorites').set('rel','remove'); $(’#span.frame.current').addClass('favorite'); } else { $(’##favorites img').set('src','../../../assets/add_to_favorites.png'); $(’#favorites').set('rel','add'); $(’#span.frame.current').removeClass('favorite'); } } }).send();send(); });
// click a thumbnail $('#span.frame').bind('click',function(event){ scroll.toElement(this); $('#span.frame.current').removeClass('current'); this.addClass('current'); if(this.hasClass('favorite')) { $('#favorites img').set('src','../../../assets/remove_from_favorites.png'); $('#favorites').set('rel','remove'); } else { $('#favorites img').set('src','../../../assets/add_to_favorites.png'); $('#favorites').set('rel','add'); } var imageData = this.get('rel'); if(view != 'tile') loadImage(imageData); }).bind('dblclick',function(){ var imageData = this.get('rel'); if(view == 'tile') { loadImage(imageData); viewToggle('image'); $('#toggles button.active').removeClass('active'); $('#view_image').addClass('active'); } });
$('#zoom_btn').bind('click',zoomInOut); });
$(document).ready(function(){
});
Saturday, April 24, 2010
![Page 6: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/6.jpg)
var user;var data;var zoom = 'out';var notesToggle = true;var gridStick = false;var view = 'both';var viewTile = false;var showNotes = false;var showFavorites = true;var showRest = true;var grid;var wrap;var grip;var gridWidth;var mySlider;var scroll;function zoomInOut(){ var size; var src; if(zoom == 'out') { zoom = 'in'; size = 'large'; src = 'out'; } else { zoom = 'out'; size = 'medium'; src = 'in'; } var req = new Request.HTML({ method: 'get', data: { 'user' : data[0], 'image' : data[1], 'size' : size }, url: '../../../album_image.php', update: $(’#image_display'), onRequest: function(){ $(’#image_loading').css('display','block'); }, onComplete: function(response) { $(’#image_loading').css('display','none'); $(’##zoom_btn img').set('src','../../../assets/zoom_'+src+'.png'); } }).send();}function viewToggle(type){ if(type == 'image'){ if(view != 'tile') gridWidth = grid.getStyle('width').toInt(); grid.tween('width',0); wrap.tween('right',0); grip.tween('left',window.getSize().x); view = 'image'; } else if(type == 'both'){ grid.tween('width',gridWidth); wrap.tween('right',gridWidth); grip.tween('left',window.getSize().x-gridWidth); view = 'both'; } else if(type == 'tile') { grid.tween('width',window.getSize().x+10); wrap.tween('right',window.getSize().x+10); grip.tween('left',-10) view = 'tile'; } else if(type == 'domready'){ grid.css('width',window.getSize().x+10); wrap.css('right',window.getSize().x+10); grip.css('left',-10); view == 'tile'; } else if(type == 'load'){ grid.css('width',gridWidth); wrap.css('right',gridWidth); grip.css('left',window.getSize().x-gridWidth); view == 'both'; }}window.bind('domready',function(){
// ********** UI CONTROLS ************ // // assign the main variables grid = $('#image_grid'); wrap = $('#image_wrap'); grip = $('#grip'); gridWidth = grid.getStyle('width').toInt(); // flip the tile out while it loads so we can see whats happening viewToggle('domready'); $('#toggles button').bind('click',function(event){ event.stop(); $('#toggles button.active').removeClass('active'); this.addClass('active'); var type = this.get('rel'); viewToggle(type); });
// thumbnail resize slider mySlider = new Slider('slide_container', 'slide_handle', { snap: true, range : [50,200], onTick: function(pos){ this.knob.css(this.property, pos); }, onChange: function(pos){ $('#span.frame_inner img').css('height',pos + 'px'); } }); mySlider.set(200);
// Box Resize Drag var myDrag = new Drag.Move(grip,{ modifiers: {x: 'left', y: false}, onDrag : function(){ var width = window.getSize().x-grip.getStyle('left').toInt(); grid.css('width',width); wrap.css('right',width); }, onComplete : function(){ var windowSize = window.getSize().x; var gripRight = grid.getStyle('width').toInt(); var math = windowSize-gripRight; if(math < 0) { grip.css('left',0); grid.css('width',windowSize); wrap.css('right',windowSize); } } }); window.bind('resize',function(){ var windowSize = window.getSize().x; var gridSize = grid.getStyle('width').toInt(); var notesSize = $(’#notes_container').getSize().x; var math = windowSize-gridSize; if(view == 'tile'){ grip.css('left',-10); grid.css('width',windowSize+10); wrap.css('right',windowSize+10); } else if(math < 0){ grip.css('left',0); grid.css('width',windowSize); wrap.css('right',windowSize); } else { grip.css('left',windowSize-gridSize); } }) // Auto Scroller scroll = new Fx.Scroll('image_grid_thumbs', { offset: {'x': 0, 'y': -150}, transition: Fx.Transitions.Quart.easeOut });
// toggle note pane $('#toggle_notes').bind('click',function(event){ event.stop(); if(this.hasClass('toggled')){ this.removeClass('toggled'); $('#toggle_notes img').set('src','../../../assets/notes.png'); $('#notes_container').tween('left',-200); $('#image_wrap').tween('left',0); } else { this.addClass('toggled'); $('#toggle_notes img').set('src','../../../assets/notes_active.png'); $('#notes_container').tween('left',0); $('#image_wrap').tween('left',200); } }); // radio input filters $('#filter_container').getElements('input[name=radio_filter]').bind('change',function(){ var filter = this.get('value'); if(filter != 'all'){ $('#span.frame').css('display','none'); $('#span.frame.'+filter).css('display',''); } else { $('#span.frame').css('display',''); } }); //Scroll while loading $('#span.frame img').bind('load',function(){ scroll.toElement(this); });
// ********* Functionality ************* // function loadImage(imageData){ data = new Array(); data = imageData.split(':'); $('.photo_name').set('text',data[1]); var req = new Request.HTML({ method: 'get', data: { 'user' : data[0], 'image' : data[1], 'size' : data[2] }, url: '../../../album_image.php', update: $('#image_display'), onRequest: function(){ $('#image_loading').css('display','block'); }, onComplete: function(response) { $('#image_loading').css('display','none'); } }).send(); var req = new Request.HTML({ method: 'get', data: { 'photo_id' : data[3]}, url: '../../../album_notes.php', update: $('#notes'), onRequest: function(){ $('#notes_loading').css('display','block'); }, onComplete: function(response) { $('#notes_loading').css('display','none'); } }).send(); }
// next / previous functions function clickNext(){ var nextSibling = $('#span.frame.current').getNext(); if(nextSibling.get('id') == 'scroll_offset') { $('#span.frame:first-child').fireEvent('click'); } else { nextSibling.fireEvent('click'); } } function clickPrev(){ var prevSibling = $('#span.frame.current').getPrevious(); if(prevSibling == '') { $('#scroll_offset').getPrevious().fireEvent('click'); } else { prevSibling.fireEvent('click'); } } $('#next').bind('click',function(event){ event.stop(); clickNext(); }); $('#prev').bind('click',function(event){ event.stop(); clickPrev(); });
$('#author').bind('focus',function(){ this.addClass('focus'); }).bind('blur',function(){ this.removeClass('focus'); }); $('#note_text').bind('focus',function(){ this.addClass('focus'); }).bind('blur',function(){ this.removeClass('focus'); }) // keyboard functionality window.bind('keyup',function(event){ if(event.key == 'right' || event.key == 'down') clickNext(); if(event.key == 'left' || event.key == 'up') clickPrev(); if(event.key == 'f' && $('#filter').hasClass('focus') == false && $('#author').hasClass('focus') == false && $('#note_text').hasClass('focus') == false) $(’#favorites').fireEvent('click'); });
// add/remove from favorites $('#favorites').bind('click',function(event){ var action = this.get('rel'); var req = new Request.HTML({ method: 'post', data: { 'action' : action, 'data' : data }, url: '../../../album_actions.php', onRequest: function(){ $('#image_loading').css('display','block'); }, onComplete: function(response) { $('#image_loading').css('display','none'); if(action == 'add') { $(’##favorites img').set('src','../../../assets/remove_from_favorites.png'); $(’#favorites').set('rel','remove'); $(’#span.frame.current').addClass('favorite'); } else { $(’##favorites img').set('src','../../../assets/add_to_favorites.png'); $(’#favorites').set('rel','add'); $(’#span.frame.current').removeClass('favorite'); } } }).send();send(); });
// click a thumbnail $('#span.frame').bind('click',function(event){ scroll.toElement(this); $('#span.frame.current').removeClass('current'); this.addClass('current'); if(this.hasClass('favorite')) { $('#favorites img').set('src','../../../assets/remove_from_favorites.png'); $('#favorites').set('rel','remove'); } else { $('#favorites img').set('src','../../../assets/add_to_favorites.png'); $('#favorites').set('rel','add'); } var imageData = this.get('rel'); if(view != 'tile') loadImage(imageData); }).bind('dblclick',function(){ var imageData = this.get('rel'); if(view == 'tile') { loadImage(imageData); viewToggle('image'); $('#toggles button.active').removeClass('active'); $('#view_image').addClass('active'); } });
$('#zoom_btn').bind('click',zoomInOut); });
$(document).ready(function(){
});
Saturday, April 24, 2010
![Page 7: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/7.jpg)
$(’#span.frame.current').addClass('favorite'); } else { $(’##favorites img').set('src','../../../assets/add_to_favorites.png'); $(’#favorites').set('rel','add'); $(’#span.frame.current').removeClass('favorite'); } } }).send();send(); });
// click a thumbnail $('#span.frame').bind('click',function(event){ scroll.toElement(this); $('#span.frame.current').removeClass('current'); this.addClass('current'); if(this.hasClass('favorite')) { $('#favorites img').set('src','../../../assets/remove_from_favorites.png'); $('#favorites').set('rel','remove'); } else { $('#favorites img').set('src','../../../assets/add_to_favorites.png'); $('#favorites').set('rel','add'); } var imageData = this.get('rel'); if(view != 'tile') loadImage(imageData); }).bind('dblclick',function(){ var imageData = this.get('rel'); if(view == 'tile') { loadImage(imageData); viewToggle('image'); $('#toggles button.active').removeClass('active'); $('#view_image').addClass('active'); } });
$('#zoom_btn').bind('click',zoomInOut); });
$(document).ready(function(){
});
• Way hard to maintain
• Application or even page specific
• can’t reuse in the app
• can’t reuse on your next project
Saturday, April 24, 2010
![Page 8: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/8.jpg)
The solution: Objects
• Objects; stateful objects• Some people think of these as “Classes”• This is how JavaScript itself solves these problems
Saturday, April 24, 2010
![Page 9: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/9.jpg)
$(document)
The solution: Objects
• Objects; stateful objects• Some people think of these as “Classes”• This is how JavaScript itself solves these problems
Saturday, April 24, 2010
![Page 10: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/10.jpg)
$(document)
The solution: Objects
• Objects; stateful objects• Some people think of these as “Classes”• This is how JavaScript itself solves these problems
Saturday, April 24, 2010
![Page 11: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/11.jpg)
// an object of stylesvar styles = { color: '#333', height: 500 };
// and animationvar animation = { left: 100, top: 200 };
// jQuery $('#elementId') .css(styles) .animate(animation);
// MooTools $('elementId') .setStyles(styles) .morph(animation);
Duplication != Awesome
Saturday, April 24, 2010
![Page 12: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/12.jpg)
• Core
• Native
• Class
• Element
• Utilities
• Fx
• Request
Saturday, April 24, 2010
![Page 13: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/13.jpg)
• Core
• Native
• Class
• Element
• Utilities
• Fx
• Request
Saturday, April 24, 2010
![Page 14: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/14.jpg)
• Core
• Native
• Class
• Element
• Utilities
• Fx
• Request
Saturday, April 24, 2010
![Page 15: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/15.jpg)
• Core
• Native
• Class
• Element
• Utilities
• Fx
• Request
8k!
Saturday, April 24, 2010
![Page 16: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/16.jpg)
MooTools Class
Saturday, April 24, 2010
![Page 17: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/17.jpg)
MooTools Class
Saturday, April 24, 2010
![Page 18: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/18.jpg)
MooTools Class
var Human = new Class({ isAlive: true, energy: 1, eat: function(){ this.energy++; }});
Saturday, April 24, 2010
![Page 19: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/19.jpg)
MooTools Classvar Human = new Class({ isAlive: true, energy: 1, eat: function(){ this.energy++; }});
var bob = new Human();//bob.energy === 1
bob.eat();//bob.energy === 2
Saturday, April 24, 2010
![Page 20: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/20.jpg)
Prototypes and inheritance
Saturday, April 24, 2010
![Page 21: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/21.jpg)
Prototypes and inheritance
var humanBase = { isAlive: true, energy: 1, eat: function(){ this.energy++; }};
prototype
Saturday, April 24, 2010
![Page 22: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/22.jpg)
Prototypes and inheritance
var humanBase = { isAlive: true, energy: 1, eat: function(){ this.energy++; }};
prototype
var Human = new Class(humanBase);
constructor
Saturday, April 24, 2010
![Page 23: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/23.jpg)
Prototypes and inheritance
var humanBase = { isAlive: true, energy: 1, eat: function(){ this.energy++; }};
prototype
var Human = new Class(humanBase);
constructor
var bob = new Human();
instance
Saturday, April 24, 2010
![Page 24: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/24.jpg)
Prototypes and inheritance
var humanBase = { isAlive: true, energy: 1, eat: function(){ this.energy++; }};
prototype
var Human = new Class(humanBase);
constructor
var bob = new Human();
instance
bob.energy
Saturday, April 24, 2010
![Page 25: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/25.jpg)
Prototypes and inheritance
var humanBase = { isAlive: true, energy: 1, eat: function(){ this.energy++; }};
prototype
var Human = new Class(humanBase);
constructor
var bob = new Human();
instance
bob.energy == bob.prototype.energy
Saturday, April 24, 2010
![Page 26: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/26.jpg)
Prototypes and inheritance
var humanBase = { isAlive: true, energy: 1, eat: function(){ this.energy++; }};
prototype
var Human = new Class(humanBase);
constructor
var bob = new Human();
instance
bob.energy == bob.prototype.energybob.foo == undefined
Saturday, April 24, 2010
![Page 27: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/27.jpg)
Prototypes and inheritance
var humanBase = { isAlive: true, energy: 1, eat: function(){ this.energy++; }};
prototype
var Human = new Class(humanBase);
constructor
var bob = new Human();
instance
bob.energy == bob.prototype.energybob.foo == undefined
bob.prototype.foo == undefined
Saturday, April 24, 2010
![Page 28: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/28.jpg)
Prototypes and inheritance
var humanBase = { isAlive: true, energy: 1, eat: function(){ this.energy++; }};
prototype
var Human = new Class(humanBase);
constructor
var bob = new Human();
instance
bob.energy == bob.prototype.energybob.foo == undefined
bob.prototype.foo == undefinedbob.foo = 'bar';
Saturday, April 24, 2010
![Page 29: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/29.jpg)
Prototypes and inheritance
var humanBase = { isAlive: true, energy: 1, eat: function(){ this.energy++; }};
prototype
var Human = new Class(humanBase);
constructor
var bob = new Human();
instance
bob.energy == bob.prototype.energybob.foo == undefined
bob.prototype.foo == undefinedbob.foo = 'bar';bob.eat();// assigns bob's own bob.energy// prototype no longer checked
Saturday, April 24, 2010
![Page 30: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/30.jpg)
Extending a Class
Saturday, April 24, 2010
![Page 31: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/31.jpg)
Extending a Class
var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; }});
Saturday, April 24, 2010
![Page 32: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/32.jpg)
Extending a Class
var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; }});
var Ninja = new Class({ Extends: Human, initialize: function(side, name, age){ this.side = side; this.parent(name, age); }, energy: 100, attack: function(target){ this.energy = this.energy - 5; target.isAlive = false; }});
Saturday, April 24, 2010
![Page 33: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/33.jpg)
Extending a Class
var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; }});
var Ninja = new Class({ Extends: Human, initialize: function(side, name, age){ this.side = side; this.parent(name, age); }, energy: 100, attack: function(target){ this.energy = this.energy - 5; target.isAlive = false; }});
Extends: Human,
Saturday, April 24, 2010
![Page 34: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/34.jpg)
Extending a Class
var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; }});
var Ninja = new Class({ Extends: Human, initialize: function(side, name, age){ this.side = side; this.parent(name, age); }, energy: 100, attack: function(target){ this.energy = this.energy - 5; target.isAlive = false; }});
this.parent(name, age);
initialize: function(name, age){ this.name = name; this.age = age;},
Saturday, April 24, 2010
![Page 35: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/35.jpg)
Extending a Class
var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; }});
var Ninja = new Class({ Extends: Human, initialize: function(side, name, age){ this.side = side; this.parent(name, age); }, energy: 100, attack: function(target){ this.energy = this.energy - 5; target.isAlive = false; }});
Saturday, April 24, 2010
![Page 36: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/36.jpg)
Extending a Class
var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; }});
var Ninja = new Class({ Extends: Human, initialize: function(side, name, age){ this.side = side; this.parent(name, age); }, energy: 100, attack: function(target){ this.energy = this.energy - 5; target.isAlive = false; }});
var bob = new Human('Bob', 50);
var ryu = new Ninja( 'good', 'Ryu Hayabusa', 'unkown');ryu.isAlive // trueryu.name // 'Ryu Hayabusa'
ryu.side = 'evil';ryu.attack(bob);
Saturday, April 24, 2010
![Page 37: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/37.jpg)
Mixins (Implements)
var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; }});
var Warrior = new Class({ energy: 100, kills: 0, attack: function(target){ if (target.energy < this.energy) { target.isAlive = false; this.kills++; } this.energy = this.energy - 5; }});
var Ninja = new Class({ Extends: Human, Implements: [Warrior], initialize: function(side, name, age){ this.side = side; this.parent(name, age); }});
var Samurai = new Class({ Extends: Human, Implements: [Warrior], side: 'good', energy: 1000});
Saturday, April 24, 2010
![Page 38: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/38.jpg)
Mixins (Implements)
var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; }});
var Warrior = new Class({ energy: 100, kills: 0, attack: function(target){ if (target.energy < this.energy) { target.isAlive = false; this.kills++; } this.energy = this.energy - 5; }});
var Ninja = new Class({ Extends: Human, Implements: [Warrior], initialize: function(side, name, age){ this.side = side; this.parent(name, age); }});
var Samurai = new Class({ Extends: Human, Implements: [Warrior], side: 'good', energy: 1000});
Saturday, April 24, 2010
![Page 39: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/39.jpg)
Mixins (Implements)
var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; }});
var Warrior = new Class({ energy: 100, kills: 0, attack: function(target){ if (target.energy < this.energy) { target.isAlive = false; this.kills++; } this.energy = this.energy - 5; }});
var Ninja = new Class({ Extends: Human, Implements: [Warrior], initialize: function(side, name, age){ this.side = side; this.parent(name, age); }});
var Samurai = new Class({ Extends: Human, Implements: [Warrior], side: 'good', energy: 1000});
Saturday, April 24, 2010
![Page 40: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/40.jpg)
Mixins (Implements)
var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; }});
var Warrior = new Class({ energy: 100, kills: 0, attack: function(target){ if (target.energy < this.energy) { target.isAlive = false; this.kills++; } this.energy = this.energy - 5; }});
var Ninja = new Class({ Extends: Human, Implements: [Warrior], initialize: function(side, name, age){ this.side = side; this.parent(name, age); }});
var Samurai = new Class({ Extends: Human, Implements: [Warrior], side: 'good', energy: 1000});
Saturday, April 24, 2010
![Page 41: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/41.jpg)
Mixins (Implements)
var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; }});
var Warrior = new Class({ energy: 100, kills: 0, attack: function(target){ if (target.energy < this.energy) { target.isAlive = false; this.kills++; } this.energy = this.energy - 5; }});
var Ninja = new Class({ Extends: Human, Implements: [Warrior], initialize: function(side, name, age){ this.side = side; this.parent(name, age); }});
var Samurai = new Class({ Extends: Human, Implements: [Warrior], side: 'good', energy: 1000});
Saturday, April 24, 2010
![Page 42: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/42.jpg)
Mixins (Implements)
var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; }});
var Warrior = new Class({ energy: 100, kills: 0, attack: function(target){ if (target.energy < this.energy) { target.isAlive = false; this.kills++; } this.energy = this.energy - 5; }});
var Ninja = new Class({ Extends: Human, Implements: [Warrior], initialize: function(side, name, age){ this.side = side; this.parent(name, age); }});
var Samurai = new Class({ Extends: Human, Implements: [Warrior], side: 'good', energy: 1000});
Saturday, April 24, 2010
![Page 43: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/43.jpg)
Mixins (Implements)
var Human = new Class({ initialize: function(name, age){ this.name = name; this.age = age; }, isAlive: true, energy: 1, eat: function(){ this.energy++; }});
var Warrior = new Class({ energy: 100, kills: 0, attack: function(target){ if (target.energy < this.energy) { target.isAlive = false; this.kills++; } this.energy = this.energy - 5; }});
var Ninja = new Class({ Extends: Human, Implements: [Warrior], initialize: function(side, name, age){ this.side = side; this.parent(name, age); }});
var Samurai = new Class({ Extends: Human, Implements: [Warrior], side: 'good', energy: 1000});
var jack = new Samurai('Jack', 29);jack.attack(ryu);if(jack.energy == 0) jack.eat();jack.kills // 1jack.isAlive // true
Saturday, April 24, 2010
![Page 44: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/44.jpg)
Options & Events
var Human = new Class({ Implements: [Options, Events], options: { name: 'no use for a name', age: 28 }, initialize: function(options){ this.setOptions(options); }, isAlive: true, energy: 1, eat: function(){ this.energy++; this.fireEvent('eat', this.energy); }});
Saturday, April 24, 2010
![Page 45: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/45.jpg)
Options & Events
var Human = new Class({ Implements: [Options, Events], options: { name: 'no use for a name', age: 28 }, initialize: function(options){ this.setOptions(options); }, isAlive: true, energy: 1, eat: function(){ this.energy++; this.fireEvent('eat', this.energy); }});
Implements: [Options, Events],options: { name: 'no use for a name', age: 28},
this.setOptions(options);
Saturday, April 24, 2010
![Page 46: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/46.jpg)
Options & Events
var Human = new Class({ Implements: [Options, Events], options: { name: 'no use for a name', age: 28 }, initialize: function(options){ this.setOptions(options); }, isAlive: true, energy: 1, eat: function(){ this.energy++; this.fireEvent('eat', this.energy); }});
var bob = new Human({ name: 'Bob Ross', age: 50});
Implements: [Options, Events],options: { name: 'no use for a name', age: 28},
this.setOptions(options);
Saturday, April 24, 2010
![Page 47: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/47.jpg)
Options & Events
var Human = new Class({ Implements: [Options, Events], options: { name: 'no use for a name', age: 28 }, initialize: function(options){ this.setOptions(options); }, isAlive: true, energy: 1, eat: function(){ this.energy++; this.fireEvent('eat', this.energy); }});
var bob = new Human({ name: 'Bob Ross', age: 50});
Implements: [Options, Events],options: { name: 'no use for a name', age: 28}, bob.options.name; // Bob Ross
this.setOptions(options);
Saturday, April 24, 2010
![Page 48: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/48.jpg)
Options & Events
var Human = new Class({ Implements: [Options, Events], options: { name: 'no use for a name', age: 28 }, initialize: function(options){ this.setOptions(options); }, isAlive: true, energy: 1, eat: function(){ this.energy++; this.fireEvent('eat', this.energy); }});
var bob = new Human({ name: 'Bob Ross', age: 50});
bob.options.name; // Bob Ross
Events
this.fireEvent('eat', this.energy);
Saturday, April 24, 2010
![Page 49: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/49.jpg)
Options & Events
var Human = new Class({ Implements: [Options, Events], options: { name: 'no use for a name', age: 28 }, initialize: function(options){ this.setOptions(options); }, isAlive: true, energy: 1, eat: function(){ this.energy++; this.fireEvent('eat', this.energy); }});
var bob = new Human({ name: 'Bob Ross', age: 50});
bob.options.name; // Bob Ross
bob.addEvent('eat',function(energy){ // do something else});
Events
this.fireEvent('eat', this.energy);
Saturday, April 24, 2010
![Page 50: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/50.jpg)
Options & Events
var Human = new Class({ Implements: [Options, Events], options: { name: 'no use for a name', age: 28 }, initialize: function(options){ this.setOptions(options); }, isAlive: true, energy: 1, eat: function(){ this.energy++; this.fireEvent('eat', this.energy); }});
var bob = new Human({ name: 'Bob Ross', age: 50});
bob.options.name; // Bob Ross
bob.addEvent('eat',function(energy){ // do something else});
Events
this.fireEvent('eat', this.energy);
var joe = new Human({ name: 'Joe Jonson', age: 28, onEat: function(energy){ // burp ... }});
Saturday, April 24, 2010
![Page 51: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/51.jpg)
Hey, What About
var jack = new Samurai('Jack', 29);jack.attack(ryu);if(jack.energy == 0) jack.eat();jack.kills // 1jack.isAlive // true
jQuery is designed to change the way that you write javascript
Saturday, April 24, 2010
![Page 52: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/52.jpg)
Hey, What About
var jack = new Samurai('Jack', 29);jack.attack(ryu);if(jack.energy == 0) jack.eat();jack.kills // 1jack.isAlive // true
jQuery is designed to change the way that you write javascript
$('#jack').samurai(); // new Samurai('#jack')$('#jack').samurai('eat') // jack.eat()$('#jack').samurai('isAlive'); // jack.isAlive$('#jack').samurai('kills', 2); // jack.kills = 2$('#jack').samurai('attack', bob).animate().css();$('#jack').samurai('addEvent', fn);
Saturday, April 24, 2010
![Page 53: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/53.jpg)
How is it done?
var Samurai = new Class({ Extends: Human, Implements: [Warrior], side: 'good', energy: 1000});
jQuery: 'samurai',
Saturday, April 24, 2010
![Page 54: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/54.jpg)
How is it done?
var Samurai = new Class({ Extends: Human, Implements: [Warrior], side: 'good', energy: 1000});
jQuery: 'samurai',
Class.Mutators.jQuery = function(name){ var self = this; jQuery.fn[name] = function(arg){ var instance = this.data(name); if ($type(arg) == 'string'){ var prop = instance[arg]; if ($type(prop) == 'function'){ var returns = prop.apply(instance, Array.slice(arguments, 1)); return (returns == instance) ? this : returns; } else if (arguments.length == 1){ return prop; } instance[arg] = arguments[1]; } else { if (instance) return instance; this.data(name, new self(this.selector, arg)); } return this; };};
Saturday, April 24, 2010
![Page 55: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/55.jpg)
Demo
http://ryanflorence.com/mootools-jquery/demo
Saturday, April 24, 2010
![Page 56: Object Oriented jQuery with MooTools - Ryan Florenceryanflorence.com/mootools-jquery/slides/mootools-jquery.pdf · 2010-04-24 · Object Oriented jQuery with MooTools by Ryan Florence](https://reader033.fdocuments.us/reader033/viewer/2022060412/5f10d8977e708231d44b18ed/html5/thumbnails/56.jpg)
Thanks!
http://bit.ly/9EVcvK How to Write a MooTools Class
http://bit.ly/ca3k4i Writing Flexible Classes
Ryan Florencehttp://[email protected]
Saturday, April 24, 2010