Mootools

De Bricosoft.

Un utilisateur de Mo0t0olz : "c'est à mwa qu'tu m'adresses ?"

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">&nbsp;</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() {
 
	}
 
});
Récupérée de « http://www.bricosoft.com/Mootools »
Outils personnels
Plus