Mootools
De Bricosoft.
Mootools est un cadriciel javascript tout propre tout meugnon.
Sommaire |
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
{ //this.row_number = 0; var temp = $('formClone'); var row_clone = temp.clone(); row_clone.injectAfter(temp); }
<table id="formClone">...</table>
o
<td id="5" class="editable select" axis="string" scope="ville" headers="Ville_nom" rel="1">Paris</td>
read ajax
/* 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 = '<div class="' + this.options.className + '-loading"> </div>'; 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'); } }); });
requete Ajax
/* 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 }); }); }); });
class template (1.2)
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() { } });


