diff options
author | Fabio Bas <ctrlaltca@gmail.com> | 2013-11-28 13:30:42 +0100 |
---|---|---|
committer | Fabio Bas <ctrlaltca@gmail.com> | 2013-11-28 13:30:42 +0100 |
commit | feb814ead577a12676f31e713edfcbfd3a937df4 (patch) | |
tree | 790475584ef86d74275da6fba3cea427a8d88e16 | |
parent | a3a7c130090d398e42c4d0f9bec15ab868328c32 (diff) |
nome notes on porting existing prado javascript from prototype to jquery
-rw-r--r-- | jQuery-PORTING.txt | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/jQuery-PORTING.txt b/jQuery-PORTING.txt new file mode 100644 index 00000000..b5635cff --- /dev/null +++ b/jQuery-PORTING.txt @@ -0,0 +1,82 @@ +Get element by id +OLD: $('element_id') +NEW: $('#element_id') // for the extended element +NEW: $('#element_id').get(0) // for the base DOM element +--- +Get element by css selector +OLD: $$('.class') +NEW: $('.class') +--- +Apply a function to multiple elements +OLD: $$('.class').each(Element.remove); +NEW: $('.class').remove(); +--- +Class creation/extension + +OLD: Class.create(Prado.WebUI.TActiveImageButton, { ... }) +OLD: Class.extend(Prado.WebUI.TActiveImageButton, { ... }) +NEW: jQuery.klass(Prado.WebUI.TActiveImageButton, { ... }) +--- +Extending an object +OLD: Object.extend(...) +NEW: jQuery.extend(...) +--- +Bind an event to a callback event handler +OLD: Event.observe(element, 'click', callback) +NEW: $(element).on('click', callback) +--- +Bind an event to a callback event handler +OLD: Event.stopObserving(element, 'click', callback) +NEW: $(element).off('click', callback) +--- +Stopping event propagation +OLD: Event.stop(event) +NEW: event.stopPropagation() or event.preventDefault() +--- +Detect keypress event: use the numeric codes +OLD: if(kc == Event.KEY_RETURN || kc == Event.KEY_SPACEBAR || kc == Event.KEY_TAB) +NEW: if(kc == 13 || kc == 32 || kc == 9) +--- +Implementing the postback handler for a PostBackControl; the function signature has changed (parameters are inverted): +OLD: onPostBack : function(event, options) +NEW: onPostBack : function(options, event) +--- +Execute a function when the pagfe has finished loading +OLD: document.observe("dom:loaded", function(event) { ... }); +NEW: $( document ).ready(function() { ... }); +--- +Create an animation effect with a "finish" callback +OLD: new Effect.Fade(element, {duration: 400, afterFinish: function() { // Animation complete. }); +NEW: $(element).fadeOut( 400, function() { // Animation complete. }); +--- +Declare a function to be used as event handler binding its "this" property +OLD: this.functionName.bindAsEventListener(this); +NEW: this.functionName.bind(this); +--- +Css class functions +OLD: addClassName, removeClassName, hasClassName +NEW: addClass, removeClass, hasClass +--- +Get event target +OLD: Event.element(event) +NEW: event.target +--- +Get event mouse position +OLD: Event.pointerX(event), Event.pointerY(event); +NEW: event.pageX, event.pageY; +--- +Fire events +OLD: Event.fireEvent(this.control, "change"); +NEW: $(element).trigger("change"); +--- +Test browser +OLD: Prado.Browser().ie +NEW: jQuery.support +--- +Focus an element +OLD: Prado.Element.focus(element); +NEW: $(element).focus(); +--- +Get element size +OLD: element.getWidth(), element.getHeight() +NEW: element.width, element.height
\ No newline at end of file |