Working With Ajax Frameworks

13,581 views
13,076 views

Published on

From Web Directions North 2008, Jonathan Snook compares some of the leading JavaScript Frameworks out there.

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,581
On SlideShare
0
From Embeds
0
Number of Embeds
1,019
Actions
Shares
0
Downloads
296
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Working With Ajax Frameworks

  1. var Person = Class.create({ initialize: function(name) { this.name = name; }, say: function(message) { return this.name + ': ' + message; } });
  2. ['foo', 'bar', 'baz'] .each(function(name, index) { this[name] = index; })
  3. ['foo', 'bar', 'baz'] .filter(function(name, index) { return name[0] == 'b' })
  4. $A(document.getElementsByTagName('p')).each( function(el){el.className = 'bigpimpin'} )
  5. $('p') .addClass('bigpimpin') .html('WDN08FTW!') .click(function(){this.innerHTML = 'no seriously, for the win'});
  6. jQuery.fn.newMethod = function(){ return this; };
  7. $('.parentElement').hider( { toclick: function(el){ return $('.trigger', el) }, tohide: function(el){ return $('ul', el).hide() }, effect: 'slide' } )
  8. jQuery.fn.hider = function(options) { return this.each(function(){ // hide the element and its parent var hide = options.tohide(this); var click = options.toclick ? options.toclick(this) : this; if(options.hide) jQuery(hide).hide(); jQuery(click).click(function() { if(options.effect == 'slide') { jQuery(hide).slideToggle('fast'); }else{ jQuery(hide).animate({opacity:'toggle'},'fast'); } return false; }); }); }
  9. var tree = new Ext.tree.TreePanel({ el:'tree', animate:true, autoScroll:true, loader: new Ext.tree.TreeLoader({dataUrl:'/server/script'}), enableDD:true, containerScroll: true, dropConfig: {appendOnly:true} }); // set the root node var root = new Ext.tree.AsyncTreeNode({ text: 'Ext JS', draggable:false, // disable root node dragging id:'source tree.setRootNode(root); // render the tree tree.render(); root.expand(false, /*no anim*/ false);
  10. var Person = new Class({ initialize: function(name){ this.name = name; } });
  11. <style type=quot;text/cssquot;> @import quot;http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.cssquot;; @import quot;http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.cssquot; </style> <script type=quot;text/javascriptquot; src=quot;http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.jsquot; djConfig=quot;parseOnLoad: truequot;></script> <script type=quot;text/javascriptquot;> dojo.require(quot;dojo.parserquot;); dojo.require(quot;dijit.form.Buttonquot;); dojo.require(quot;dijit.Menuquot;); function call_function(choice) { console.debug(choice+quot; was clicked.quot;); } </script>
  12. <div dojoType=quot;dijit.form.DropDownButtonquot;> <span>Edit</span> <div dojoType=quot;dijit.Menuquot; id=quot;Editquot;> <div dojoType=quot;dijit.MenuItemquot; label=quot;Copyquot; onclick=quot;call_function('copy');quot;></div> <div dojoType=quot;dijit.MenuItemquot; label=quot;Cutquot; onclick=quot;call_function('cut');quot;></div> <div dojoType=quot;dijit.MenuItemquot; label=quot;Pastequot; onclick=quot;call_function('paste');quot;></div> </div> </div>
  13. $('elementId').hide(); $('elementId').show();
  14. $('#elementId').hide(); $('#elementId').show(); $('#elementId').toggle(); $('#elementId').slideToggle();
  15. new Effect.toggle( $('elementID'),'blind')
  16. new Ajax.Autocompleter( 'contact_name', 'contact_name_auto_complete', '/server/script', {});
  17. new YAHOO.widget.AutoComplete( quot;myInputquot;, quot;myContainerquot;, myDataSource);
  18. // An XHR DataSource var myServer = var mySchema = [quot;ResultItemquot;, quot;KeyDataFieldquot;]; var myDataSource = new YAHOO.widget .DS_XHR(myServer, mySchema);
  19. new Control.Slider('handle', 'track', { sliderValue:100000, range: $R(10000, 500000), onSlide: function(v) { SB.setBudget(v); } });
  20. Shadowbox.lib = { getStyle: function(el, style){ return jQuery(el).css(style); }, }

×