working with ajax frameworks
DESCRIPTION
From Web Directions North 2008, Jonathan Snook compares some of the leading JavaScript Frameworks out there.TRANSCRIPT
var Person = Class.create({ initialize: function(name) {
this.name = name; }, say: function(message) {
return this.name + ': ' + message; } });
['foo', 'bar', 'baz'].each(function(name, index) {
this[name] = index; })
['foo', 'bar', 'baz'].filter(function(name, index) { return name[0] == 'b' })
$A(document.getElementsByTagName('p')).each(function(el){el.className = 'bigpimpin'})
$('p').addClass('bigpimpin').html('WDN08FTW!').click(function(){this.innerHTML = 'no seriously, for the win'});
jQuery.fn.newMethod = function(){ return this;
};
$('.parentElement').hider({
toclick: function(el){ return $('.trigger', el) },
tohide: function(el){ return $('ul', el).hide() },
effect: 'slide'}
)
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;
});});
}
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);
var Person = new Class({ initialize: function(name){
this.name = name; } });
<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>
<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>
$('elementId').hide();$('elementId').show();
$('#elementId').hide();$('#elementId').show();
$('#elementId').toggle();$('#elementId').slideToggle();
new Effect.toggle($('elementID'),'blind')
new Ajax.Autocompleter('contact_name','contact_name_auto_complete', '/server/script', {});
new YAHOO.widget.AutoComplete("myInput","myContainer",myDataSource);
// An XHR DataSourcevar myServer =var mySchema = ["ResultItem",
"KeyDataField"];var myDataSource = new YAHOO.widget.DS_XHR(myServer, mySchema);
new Control.Slider('handle', 'track', {sliderValue:100000,range: $R(10000, 500000),
onSlide: function(v) { SB.setBudget(v); }
});
Shadowbox.lib = {getStyle: function(el, style){
return jQuery(el).css(style); },
}