Discard prototype. Start mootools.

The following code is transferred from: getting started on v1.11!

 

First:

Document. getelementbyid ('foo ');

 

> $ ('Foo ');

 

Second:

VaR woot = $ ('bar'). value;

 

> Var woot = $ ('bar'). getvalue ();

 

Third:

$ ('Footer '). style. Height = '100px ';

$ ('Footer '). style. Background =' # ffc ';

 

> $ ('Footer '). setstyles ({

Height: '100px ',

Background: '# ffc'

});

 

Fourth:

$ ('Olestwidgetever '). innerhtml = 'some nifty content ';

 

> $ ('Olestwidgetever '). sethtml ('some nifty content ');

// 1.2 This is better: $ ('olestwidgetever '). Set ('html', 'some nifty content ');

 

Fifth:

New Ajax ('ninja. php? Weapon1 = Foo & weapon2 = bar ');

 

> New Ajax ('ninja. php ',{

Data :{

Weapon1: 'foo ',

Weapon2: 'bar'

}

});

 

Sixth:

New Ajax ('H H. php ',{

Method: 'post ',

Async: True,

Encoding: 'utf-8 ',

Headers: {'contenttype': 'application/X-WWW-form-urlencoded '}

});

 

> New Ajax ('balancer. php ');

 

Seventh:

$ ('Mycontainer'). onclick = dosomemagic;

 

> $ ('Mycontainer'). addevent ('click', dosomemagic );

 

Eighth:

$ ('Div. Den den '). Each (function (EL ){

El. removeclass ('ddd ');

})

 

>$ $ ('Div. Den den '). removeclass ('den den ');

 

Ninth:

$ ('Div. Collapsed '). Each (function (EL ){

El. addevent ('click', expand );

});

 

>$ $ ('Div. Collapsed '). addevent ('click', expand );

 

Tenth:

$ ('Input. date'). addevent ('focal ', onfocus );

$ ('Input. date'). addevent ('blur', onblur );

 

> $ ('Input. date'). addevents ({

'Focal ': onfocus,

'Blur': onblur

});

 

11th:

$ ('Producttable'). innerhtml =

$ ('Producttable'). innerhtml +

'<Tr> <TD>' + productid +''

+ Productname + '</TD> </tr> <TD>'

+ Productid + ''+ productprice +

'</TD> </tr> ';

 

> Var template = '<tr> <TD >#{ ID }#{ name} </TD> </tr> <TD >#{ ID }#{ price} </TD> </tr> ';

$ ('Producttable'). injecthtml (template. interpolate ({

ID: productid,

Name: productname,

Price: productprice

}));

 

In addition, we recommend a website with extended functions of mootools: elastic! You have to load a fat prototype for a few features.

 

The following is an example of an Ajax Request queue from http://www.clientcide.com/js:

1.

Common Ajax request for mootools v1.2

VaR comment = new request. html ({

URL: '/dynamicquery. asp ',

Method: 'get ',

Data: {Tag: 1 },

Update: $ ('commentn ')

});

VaR resume = new request. html ({

URL: '/dynamicquery. asp ',

Method: 'get ',

Data: {Tag: 4 },

Update: $ ('resumen ')

});

2. A queue class extended from request

VaR dynamicqueue = new request. Queue ();

Dynamicqueue. addrequests ({

'Comment': comment,

'Sample': Resume

});

3. Send

Comment. Send ();

Resume. Send ();