Working With Ajax Frameworks

Slide 10: var Person = Class.create({ initialize: function(name) { this.name = name; }, say: function(message) { return this.name + ': ' + message; } });

Slide 11: ['foo', 'bar', 'baz'] .each(function(name, index) { this[name] = index; })

Slide 12: ['foo', 'bar', 'baz'] .filter(function(name, index) { return name[0] == 'b' })

Slide 13: $A(document.getElementsByTagName('p')).each( function(el){el.className = 'bigpimpin'} )

Slide 16: $('p') .addClass('bigpimpin') .html('WDN08FTW!') .click(function(){this.innerHTML = 'no seriously, for the win'});

Slide 17: jQuery.fn.newMethod = function(){ return this; };

Slide 18: $('.parentElement').hider( { toclick: function(el){ return $('.trigger', el) }, tohide: function(el){ return $('ul', el).hide() }, effect: 'slide' } )

Slide 19: 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; }); }); }

Slide 23: 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);

Slide 27: var Person = new Class({ initialize: function(name){ this.name = name; } });

Slide 35: <style type=\"text/css\"> @import \"http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css\"; @import \"http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css\" </style> <script type=\"text/javascript\" src=\"http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js\" djConfig=\"parseOnLoad: true\"></script> <script type=\"text/javascript\"> dojo.require(\"dojo.parser\"); dojo.require(\"dijit.form.Button\"); dojo.require(\"dijit.Menu\"); function call_function(choice) { console.debug(choice+\" was clicked.\"); } </script>

Slide 36: <div dojoType=\"dijit.form.DropDownButton\"> <span>Edit</span> <div dojoType=\"dijit.Menu\" id=\"Edit\"> <div dojoType=\"dijit.MenuItem\" label=\"Copy\" onclick=\"call_function('copy');\"></div> <div dojoType=\"dijit.MenuItem\" label=\"Cut\" onclick=\"call_function('cut');\"></div> <div dojoType=\"dijit.MenuItem\" label=\"Paste\" onclick=\"call_function('paste');\"></div> </div> </div>

Slide 39: $('elementId').hide(); $('elementId').show();

Slide 40: $('#elementId').hide(); $('#elementId').show(); $('#elementId').toggle(); $('#elementId').slideToggle();

Slide 41: new Effect.toggle( $('elementID'),'blind')

Slide 43: new Ajax.Autocompleter( 'contact_name', 'contact_name_auto_complete', '/server/script', {});

Slide 44: new YAHOO.widget.AutoComplete( \"myInput\", \"myContainer\", myDataSource);

Slide 45: // An XHR DataSource var myServer = var mySchema = [\"ResultItem\", \"KeyDataField\"]; var myDataSource = new YAHOO.widget .DS_XHR(myServer, mySchema);

Slide 48: new Control.Slider('handle', 'track', { sliderValue:100000, range: $R(10000, 500000), onSlide: function(v) { SB.setBudget(v); } });

Slide 52: Shadowbox.lib = { getStyle: function(el, style){ return jQuery(el).css(style); }, }