Mootools
Mootools est un cadriciel javascript tout propre tout meugnon.
trier par dragndrop
handles: $$('.classe_to_dnd'), //permet de faire un dragndrop de lignes de tableau qu'en manipulant un td class="classe_to_dnd"
- autre ex: new Sortables($('myTable').getElement('tbody'));
clone
<source lang="javascript"> {
//this.row_number = 0;
var temp = $('formClone');
var row_clone = temp.clone(); row_clone.injectAfter(temp);
} </source>
<source lang="xml">
</source>
o
<source lang="xml">
<td id="5" class="editable select" axis="string" scope="ville" headers="Ville_nom" rel="1">Paris </source>
read ajax
<source lang="javascript"> /* READ Ajax : lire un objet
* * va lire une page html en GET * */
window.addEvent('domready', function() {
var lienObjets= $(document.body).getElements('a.mytips'); lienObjets.each(function(item) { item.store('tip:title', 'Objet' ); item.store('tip:text', 'En cours ...'); item.addEvent('mouseenter', function(event) { //prevent the page from changing event.stop(); //dans l'attribut href on a l'url, on rajoute le param format pour ZF qui va desactiver le layout html var url = +item.get('href')+'/format/ajax'; var req = new Request.HTML({ method: 'get', url:url, onComplete: function(response) { //console.info('(READ) : page recuperée.');
el.myText = '
';
item.store('tip:title', item.get('text') ); item.store('tip:text', response); } }).send(); }); //addEvent }); //each
//create the tooltips var tipz = new Tips('.mytips',{ fixed: true, hideDelay: 50, showDelay: 250 });
//customize tipz.addEvents({ 'show': function(tip) { tip.fade('in'); }, 'hide': function(tip) { tip.fade('out'); } }); }); </source>
requete Ajax
<source lang="javascript"> /* Mootools : UPDATE Ajax : modifier un objet directement sur le tableau
* * affiche un input text ou textarea suivant le type et soumet les donnees a une page */
window.addEvent('domready', function() { var controller= $$('caption').get('id'); //find the editable areas $$('.editable').each(function(el) { //add double-click and blur events el.addEvent('dblclick',function() { var before = el.get('html').trim(); //store "before" message el.set('html',); //erase current //replace current text/content with input or textarea element if( el.hasClass('textarea') ) { var input = new Element('textarea', { 'class':'box', 'text':before }); } else if( el.hasClass('date') ) { var input = new Element('input', { 'class':'datetime', 'value':before }); /* params[el.name]='Y-m-d';var myCal= new Calendar( params ); */ } else if( el.hasClass('select') ) { attributObjet= el.get('scope') + '_id'; fkObjet= el.get('id'); var input= new Element('select', { class: 'box', name: attributObjet, multiple: false}).adopt( new Element('option', {name: before, "label": before, value: fkObjet, html: before, selected: true}) ); //on va rajouter les elements depuis la bdd var url = 'html/' + el.get('scope') + '/index/nom/' + el.get('headers') + '/format/json'; var req = new Request.JSON({ method: 'get', url:url, onRequest: function() { }, onComplete: function(jsonObj) { var myHash= $H(jsonObj); myHash.each( function(cle, valeur) { input.adopt( new Element('option', {name: cle, "label": cle, value: valeur, html: cle} ) ); }); } }).send();
//input.inject(el).select(); input.inject(el);
idObjet= el.get('rel'); //attributObjet= el.get('headers'); valeurObjet= fkObjet; //before= fkObjet; } else { var input= new Element('input', { 'class':'box', 'value':before }); //input prerempli input.inject(el).select(); idObjet= el.get('rel'); //objet attributObjet= el.get('headers'); //attribut a maj } //blur input when they press "Enter" input.addEvent('keydown', function(e) { if(e.key == 'enter') { this.fireEvent('blur'); } }); //input.addEvent('click', function() { this.fireEvent('blur'); });
//add blur event to input input.addEvent('blur', function() { val = input.get('value').trim(); //recupere la valeur if( el.hasClass('select') ) { name= input.getSelected().get('name'); el.set('text',name).addClass(name != ? : 'editable-empty'); } else { el.set('text',val).addClass(val != ? : 'editable-empty'); }
valeurObjet= val;
if ( valeurObjet != before ) { //si c est different d'avant var conf= confirm('Sauver les modifications ?'); if (conf == true) { // controller/update/id/@rel/attribut/valeur/format/ajax passe : id="@rel", attribut="valeur", format="ajax" a l'action update var url = 'html/' + controller + '/update/id/' + idObjet + '/' + attributObjet + '/' + valeurObjet + '/format/ajax'; var request = new DWRequest({ url:url, method:'get', }).send(); } else { //on remet comme avant el.set('html', before) } }//ce n'est pas different ici }); }); }); });
</source>
class template (1.2)
<source lang="javascript"> var yourClass = new Class({
//implements Implements: [Options],
//options options: { yourOption: },
//initialization initialize: function(options) { //set options this.setOptions(options); },
//a method that does whatever you want yourMethod: function() {
}
}); </source>