User Tools
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
en:devel:prototype2jquery [2016/09/20 13:44] joebordes |
en:devel:prototype2jquery [2016/09/20 14:09] (current) joebordes |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| ^Event^Prototype^jQuery^Also recommended for coreBOS^ | ^Event^Prototype^jQuery^Also recommended for coreBOS^ | ||
| - | |Selecting DOM Elements|<code javascript>$('id')</code>|<code javascript>jQuery("#id")</code>|document.getElementById("id")| | + | |Selecting DOM Elements|<code javascript>$('id')</code>|<code javascript>jQuery("#id")</code>|<code javascript>document.getElementById("id")</code>| |
| - | | |<code javascript>$$(selector)[x]</code>|<code javascript>jQuery(selector).eq(x)</code>|| | + | | |<code javascript>$$(selector)[x]</code>|<code javascript>jQuery(selector).eq(x)</code>| | |
| - | | |<code javascript>$(element).select( selector )</code>|<code javascript>$(element).find( selector )</code>|| | + | | |<code javascript>$(element).select( selector )</code>|<code javascript>$(element).find( selector )</code>| | |
| - | |GET/SET content|<code javascript>$F('id')</code>|<code javascript>jQuery("#id").val()</code>|| | + | |GET/SET content|<code javascript>$F('id')</code>|<code javascript>jQuery("#id").val()</code>| | |
| - | | |<code javascript>.innerHTML</code>|<code javascript>.html()</code>|| | + | | |<code javascript>.innerHTML</code>|<code javascript>.html()</code>|<code javascript>document.getElementById(element).innerHTML</code>| |
| - | | |<code javascript>document.getElementById(element).innerHTML</code>|<code javascript>.update('new content')</code>| | + | | |<code javascript>element.update('new content')</code>|<code javascript>element.html('new content'); |
| - | ||<code javascript>.html('new content')</code>| | + | vtlib_executeJavascriptInElement(document.getElementById(element));</code>|<code javascript>document.getElementById(element).innerHTML='new_content'; |
| - | ||<code javascript>document.getElementById(element).innerHTML='new_content';</code>| | + | vtlib_executeJavascriptInElement(document.getElementById(element));</code>| |
| - | ||<code javascript>.value = x</code>| | + | | |<code javascript>.value = x</code>|<code javascript>.val(x)</code>| | |
| - | ||<code javascript>.val(x)</code>| | + | |
| |Update style|<code javascript>.style.x = 'y'</code>|<code javascript>.css({ x: 'y' })</code>| | |Update style|<code javascript>.style.x = 'y'</code>|<code javascript>.css({ x: 'y' })</code>| | ||
| - | ||<code javascript>.setStyle( style(s) )</code>|<code javascript>.css( propertyName, value )</code>|| | + | | |<code javascript>.setStyle( style(s) )</code>|<code javascript>.css( propertyName, value )</code>| | |
| - | ||<code javascript>.hasClassName( className )</code>|<code javascript>.hasClass( className )</code>|| | + | | |<code javascript>.hasClassName( className )</code>|<code javascript>.hasClass( className )</code>| | |
| - | ||<code javascript>.addClassName( className )</code>| | + | | |<code javascript>.addClassName( className )</code>|<code javascript>.addClass( className(s) )</code>| | |
| - | ||<code javascript>.addClass( className(s) )</code>| | + | |Get/Set Attributes|<code javascript>.checked</code>|<code javascript>.prop('checked')</code>| |
| - | |Get/Set Attributes | + | | |<code javascript>disabled</code>|<code javascript>.prop('disabled')</code>| | |
| - | |<code javascript>.checked</code>| | + | | |<code javascript>.some_attr</code>|<code javascript>.attr('some_attr')</code>| | |
| - | |<code javascript>.prop('checked')</code>| | + | | |<code javascript>.getWidth()</code>|<code javascript>.width()</code>| | |
| - | ||<code javascript>disabled</code>| | + | | |<code javascript>.empty()</code>|<code javascript>.is(':empty')</code>| | |
| - | ||<code javascript>.prop('disabled')</code>| | + | |Effects|<code javascript>.fade({duration: x})</code>|<code javascript>.fadeOut(x * 1000)</code>| |
| - | ||<code javascript>.some_attr</code>| | + | | |<code javascript>.appear({duration: x})</code>|<code javascript>.appear({duration: x})</code>| | |
| - | ||<code javascript>.attr('some_attr')</code>| | + | | |Effect.Appear|<code javascript>fadeIn()</code>| | |
| - | ||<code javascript>.getWidth()</code>| | + | | |Effect.Fade|<code javascript>fadeOut()</code>| | |
| - | ||<code javascript>.width()</code>| | + | |Event Handlers|<code javascript>$(element_id).observe("click", |
| - | ||<code javascript>.empty()</code>| | + | function(event){ ... })</code>|<code javascript>jQuery('#'+element_id).bind("click", |
| - | ||<code javascript>.is(':empty')</code>| | + | function(jQueryEvent){ ... })</code>| |
| - | |Effects | + | | |<code javascript>document.observe("dom:loaded", |
| - | |<code javascript>.fade({duration: x})</code>| | + | function() { ... });</code>|<code javascript>$(document).ready()</code>| | |
| - | |<code javascript>.fadeOut(x * 1000)</code>| | + | | |<code javascript>Event.observe(element, eventName, handler)</code>|<code javascript>$('selector').bind(eventType, handler)</code>| | |
| - | ||<code javascript>.appear({duration: x})</code>| | + | | |<code javascript>Sortable.create("element" { |
| - | ||<code javascript>.appear({duration: x})</code>| | + | constraint:false, |
| - | |Effect.Appear | + | tag:'div', |
| - | |<code javascript>fadeIn()</code>|| | + | overlap:'Horizontal', |
| - | |Effect.Fade | + | handle:'headerrow', |
| - | |<code javascript>fadeOut()</code>|| | + | |
| - | |Event Handlers | + | |
| - | |<code javascript>$(element_id).observe("click", function(event){ ... })</code>| | + | |
| - | |<code javascript>jQuery('#'+element_id).bind("click", function(jQueryEvent){ ... })</code>| | + | |
| - | ||<code javascript>document.observe("dom:loaded", function() { ... });</code>| | + | |
| - | ||<code javascript>$(document).ready()</code>| | + | |
| - | ||<code javascript>Event.observe(element, eventName, handler)</code>| | + | |
| - | ||<code javascript>$('selector').bind(eventType, handler)</code>| | + | |
| - | ||<code javascript>Sortable.create("element" { | + | |
| - | constraint:false,tag:'div',overlap:'Horizontal',handle:'headerrow', | + | |
| onUpdate:function(){ | onUpdate:function(){ | ||
| // do smth | // do smth | ||
| } | } | ||
| - | })</code>| | + | })</code>|<code javascript>jQuery("#element").sortabe({ |
| - | ||<code javascript>jQuery("#element").sortabe({ | + | constraint: false, |
| - | constraint: false, tag: 'div', overlap: 'Horizontal', handle: '.headerrow', | + | tag: 'div', |
| + | overlap: 'Horizontal', | ||
| + | handle: '.headerrow', | ||
| update: function () { | update: function () { | ||
| //do smth | //do smth | ||
| } | } | ||
| - | })</code>| | + | })</code>| | |
| - | |AJAX | + | |AJAX|<code javascript>new Ajax.Request('index.php', { |
| - | |<code javascript>new Ajax.Request('index.php', { | + | |
| queue : {position : 'end', | queue : {position : 'end', | ||
| scope : 'command'}, | scope : 'command'}, | ||
| Line 67: | Line 57: | ||
| // do smth | // do smth | ||
| } | } | ||
| - | });</code>| | + | });</code>|<code javascript>jQuery.ajax({ |
| - | |<code javascript>jQuery.ajax({ | + | |
| method: 'POST', | method: 'POST', | ||
| url:'urlstring', | url:'urlstring', | ||
| }).done(function (response) { | }).done(function (response) { | ||
| //do smth | //do smth | ||
| - | } | + | });</code>| | |
| - | });</code>| | + | |
