working with ajax frameworks

54

Upload: jonathan-snook

Post on 26-Jan-2015

112 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Working With Ajax Frameworks
Page 2: Working With Ajax Frameworks
Page 3: Working With Ajax Frameworks
Page 4: Working With Ajax Frameworks
Page 5: Working With Ajax Frameworks
Page 6: Working With Ajax Frameworks
Page 7: Working With Ajax Frameworks
Page 8: Working With Ajax Frameworks
Page 9: Working With Ajax Frameworks
Page 10: Working With Ajax Frameworks

var Person = Class.create({ initialize: function(name) {

this.name = name; }, say: function(message) {

return this.name + ': ' + message; } });

Page 11: Working With Ajax Frameworks

['foo', 'bar', 'baz'].each(function(name, index) {

this[name] = index; })

Page 12: Working With Ajax Frameworks

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

Page 13: Working With Ajax Frameworks

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

Page 14: Working With Ajax Frameworks
Page 15: Working With Ajax Frameworks
Page 16: Working With Ajax Frameworks

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

Page 17: Working With Ajax Frameworks

jQuery.fn.newMethod = function(){ return this;

};

Page 18: Working With Ajax Frameworks

$('.parentElement').hider({

toclick: function(el){ return $('.trigger', el) },

tohide: function(el){ return $('ul', el).hide() },

effect: 'slide'}

)

Page 19: Working With Ajax Frameworks

jQuery.fn.hider = function(options){

return this.each(function(){// hide the element and its parentvar 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;

});});

}

Page 20: Working With Ajax Frameworks
Page 21: Working With Ajax Frameworks
Page 22: Working With Ajax Frameworks
Page 23: Working With Ajax Frameworks

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 nodevar root = new Ext.tree.AsyncTreeNode({

text: 'Ext JS', draggable:false, // disable root node draggingid:'source

tree.setRootNode(root);

// render the treetree.render(); root.expand(false, /*no anim*/ false);

Page 24: Working With Ajax Frameworks
Page 25: Working With Ajax Frameworks
Page 26: Working With Ajax Frameworks
Page 27: Working With Ajax Frameworks

var Person = new Class({ initialize: function(name){

this.name = name; } });

Page 28: Working With Ajax Frameworks
Page 29: Working With Ajax Frameworks
Page 30: Working With Ajax Frameworks
Page 31: Working With Ajax Frameworks
Page 32: Working With Ajax Frameworks
Page 33: Working With Ajax Frameworks
Page 34: Working With Ajax Frameworks
Page 35: Working With Ajax Frameworks

<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>

Page 36: Working With Ajax Frameworks

<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>

Page 37: Working With Ajax Frameworks
Page 38: Working With Ajax Frameworks
Page 39: Working With Ajax Frameworks

$('elementId').hide();$('elementId').show();

Page 40: Working With Ajax Frameworks

$('#elementId').hide();$('#elementId').show();

$('#elementId').toggle();$('#elementId').slideToggle();

Page 41: Working With Ajax Frameworks

new Effect.toggle($('elementID'),'blind')

Page 42: Working With Ajax Frameworks
Page 43: Working With Ajax Frameworks

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

Page 44: Working With Ajax Frameworks

new YAHOO.widget.AutoComplete("myInput","myContainer",myDataSource);

Page 45: Working With Ajax Frameworks

// An XHR DataSourcevar myServer =var mySchema = ["ResultItem",

"KeyDataField"];var myDataSource = new YAHOO.widget.DS_XHR(myServer, mySchema);

Page 46: Working With Ajax Frameworks
Page 47: Working With Ajax Frameworks
Page 48: Working With Ajax Frameworks

new Control.Slider('handle', 'track', {sliderValue:100000,range: $R(10000, 500000),

onSlide: function(v) { SB.setBudget(v); }

});

Page 49: Working With Ajax Frameworks
Page 50: Working With Ajax Frameworks
Page 51: Working With Ajax Frameworks
Page 52: Working With Ajax Frameworks

Shadowbox.lib = {getStyle: function(el, style){

return jQuery(el).css(style); },

}

Page 53: Working With Ajax Frameworks
Page 54: Working With Ajax Frameworks