come creare dei nuovi plug-in per mootools

**adelefxxxbooob** · 19-11-2008, 20:00

ciao!!
avevo bisogno di creare dei nuovi plugin x mootools.
e volevo chiedervi se esiste una guida o dei suggerimenti al riguardo.
grazie 1000!

**artorius** · 19-11-2008, 20:51

beh, dipende dal tipo di plugin che vuoi creare, questo ti porta ad usare un sistema piuttosto che un altro.
Perché non mi spieghi che vuoi fare?

**adelefxxxbooob** · 19-11-2008, 21:06

dovrei creare degli effetti grafici per far scomparire/apparire dei div
e anche per degli effetti per il drag and drop/resize
e avevo in mente di fare una specie di "paint"

**artorius** · 19-11-2008, 21:38

più che apparire scomparire, devi metterci inserisci elemento, cancella...

Poi per il drag, resize devi vedere la cosa...

Ti conviene pensarla così:

Il div dove si può "disegnare" ha legato all'evento onClick una serie di funzionalità.

Devi anche fornire una serie di link che selezionano le funzionalità:
- Una per inserisci elemento
- Una per rendere l'elemento resiziable
- Una per rendere l'elemento draggable
- Una per cancellare un elemento

Poi usi un ColorPicker per selezionare il colore (Cerca MooRainbow)

Per le singole funzioni, ci sono già gli strumenti, devi solo usarli bene.

**adelefxxxbooob** · 19-11-2008, 21:58

si grazie 1000!

guarda ho fatto una nuova funzione guardando un pò gli altri plug-in:

Codice PHP:


var prova_1 = new Class({

Test-options: {

parola: 'funzione di prova'

},

initialize: function(el, options) {

this.setOptions(this.Test-Options(), options);

$(el).addEvent('click',function(){

alert(this.Test-Options.parola) ;

})

}

});

prova.implement(new Options);

prova.implement(new Events);

e lo richiamo cosi:

Codice PHP:


  var test = new prova_1 ('clicca',{

'parola':'funzione'

});

su questo elemento:

Codice PHP:


<div id="clicca">Clicca</div>

xò non mi fa niente

dove sbaglio?

**artorius** · 19-11-2008, 22:33

beh, il nome della classe è prova_1 non prova...

prova_1.implement(new Options);
prova_1.implement(new Events);

**adelefxxxbooob** · 19-11-2008, 22:49

no XD l'avevo gia corretto scs.
non funziona lo stesso

**artorius** · 19-11-2008, 23:40

allora:

Codice PHP:


var prova_1 = new Class({ 

   //E' più pratico metterlo qui

   Implements : Options,

   //Evidentemente DEVE chiamarsi options

   options: { 

      parola: 'funzione di prova' 

   }, 

   initialize: function(el, options) { 

     //E' sufficiente così

     this.setOptions(options); 

     $(el).addEvent('click',function(){ 

        alert(this.options.parola) ; 

     }.bindWithEvent(this)) 

     //Ecco questo serve a spostare lo scope della funzione

     //associata all'evento all'elemento passato, in questo 

     //modo quando faccio this nella funzione ottengo l'istanza 

     //della classe, senza l'elemento $(el)

   } 

});

Ah, implement(Events) non l'ho messo perché serve solo se l'oggetto deve implementare degli eventi, non se utilizza l'addEvent. Ad esempio servirebbe se volessi impostare un evento onLoad dell'oggetto, settabile nell'instanziazione.

**adelefxxxbooob** · 19-11-2008, 23:46

grazie 1000!
perfect funziona

adesso provo a fare cose più complesse!

**adelefxxxbooob** · 20-11-2008, 21:15

scusami!
ho fatto un piccolo "plugin"
ecco il codice:

index.html

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="it">

<head>

<script src="mootools.js" type="text/javascript"></script>

<script src="moo.rd.js" type="text/javascript"></script>

<script src="mooWindow.js" type="text/javascript"></script>



<script>

window.addEvent('domready',function(){

var test = new MooWindow('open',{

       'prefisso': 'window' ,

       'rezoom': 'true' ,

       'zoom': 'true' ,

       'height': '500' ,

       'width': '500' ,

       'min_height': '200' ,

       'min_width': '200' ,

       'container': 'container'    ,

       'table': 'window_table'        

});



});

</script>

</head>

<body>

<div id="container" style="height:100%;width:100%;position:fixed;top:0px;left:0px">

<div id="open">Apri</div>



<div align="center" id="window" style="position:fixed;top:50px;left:50px">

<table style="width:100%;height:100%;" id="window_table" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="14" height="20" background="top-sx.png"></td>

<td height="20" background="top-mid.png">

<div id="window_drag" style="cursor:move;position:absolute;top:1px;left:15px;color:white;">Finestra di test</div>

[img]1.png[/img]

[img]2.png[/img]

[img]close.png[/img]

</td>

<td width="14" height="20" background="top-dx.png"></td>

</tr>

<tr>

<td width="14" background="mid-sx.png"></td>

<td background="bg.png"></td>

<td width="14" background="mid-dx.png"></td>

</tr>

<tr>

<td width="14" height="14" background="bot-sx.png"></td>

     <td height="14" background="bot-mid.png"></td>

      <td width="14" height="14"></td>

    </tr>

  </table>

  <div id="window_resize" style="position:absolute;bottom:0;right:0;cursor:nw-resize">[img]bot-dx.png[/img]</div>

</div>



</div>

</body>

</html>

MooWindow.js

Codice PHP:


/* autore: Gabriel

* creato per: DarkSoft

* versione: 1.0 beta

* licenza: MIT-style license

*info:

*/

var MooWindow = new Class({



   Implements : Options,



   options: {

       prefisso: 'window' ,

       rezoom: 'true' ,

       zoom: 'true' ,

       drag: 'true' ,

       resize: 'true' ,

       height: '500' ,

       width: '500' ,

       min_height: '200' ,

       min_width: '200' ,

       container: 'container' ,

       table: 'table' ,

       min_resizeW: '250' ,

       min_resizeH: '35' ,   

   },

initialize: function(el, options) {

  this.setOptions(options);

  var body = $(this.options.prefisso) ;

  var table = $(this.options.prefisso+'_table') ;

  var drag = $(this.options.prefisso+'_drag') ;

  var diminuiz = $(this.options.prefisso+'_zoom') ;

  var ingrand = $(this.options.prefisso+'_zoom2') ;

  var close = $(this.options.prefisso+'_close') ;  

  var resize = $(this.options.prefisso+'_resize') ;

  var toggle_height = new Fx.Toggle(body, {

  duration:1000

  });

  var toggle_width = new Fx.Toggle(body, {

  duration:1000

  });

  var move = new Fx.Move(body, {

  duration:1000

  });

  if (this.options.drag == 'true'){

 var dragger = new Drag.Move(this.options.prefisso,{container: this.options.container , 

 onStart: function(){

 this.options.table.setStyle('border','1px black dotted');

 this.options.table.fade('out');},

 onComplete: function(){

 this.options.table.setStyle('border','0px black dotted');

 this.options.table.fade('in');}

 }).attach();

}

if (this.options.resize == 'true'){

var minW = this.options.min_resizeW, minH = this.options.min_resizeH;

var resizer =  body.makeResizable({

onStart: function(){

resizer.attach();

dragger.detach();

body.setStyle('border','1px black dotted');

table.fade('out'); },

onDrag: function(div){

var size = div.getSize();

if(size.x < minW)div.setStyle('width', minW);

if(size.y < minH)div.setStyle('height', minH);},

onComplete: function(){

body.setStyle('border','0px black dotted');

table.fade('in');

resizer.detach();

dragger.attach();}

}).detach();

}

  body.fade(0) ;

  toggle_height.toggleProperty('height', 0, 0, true);

  toggle_width.toggleProperty('width', 0, 0, true); 

  $(el).addEvent('click',function(){

  body.fade(1);

  toggle_height.toggleProperty('height', this.options.height, this.options.height, true);

  toggle_width.toggleProperty('width', this.options.width, this.options.width, true);    

  }.bindWithEvent(this)) ;

 if (this.options.rezoom == 'true'){

  diminuiz.addEvent('click',function(){

  toggle_height.toggleProperty('height', this.options.min_height, this.options.min_height, true);

  toggle_width.toggleProperty('width', this.options.min_width, this.options.min_width, true);

   move.start(50,50) ;

 }.bindWithEvent(this)) ;

 } else {

 return ;

 }

 if (this.options.zoom == 'true'){

 ingrand.addEvent('click',function(){

 toggle_height.toggleProperty('height', 640, 640, true);

 toggle_width.toggleProperty('width', 1024, 1024, true);

 move.start(0,0) ;

 }.bindWithEvent(this)) ;

 }  else {

 return ;

 }

  close.addEvent('click',function(){

  body.fade(0);

  toggle_height.toggleProperty('height', 0, 0, true);

  toggle_width.toggleProperty('width', 0, 0, true);    

  }.bindWithEvent(this)) ;

  drag.addEvent('click',function(){

  resizer.detach();

  dragger.attach();

  }.bindWithEvent(this)) ;

  resize.addEvent('click',function(){

  resizer.attach();

  dragger.detach();

  }.bindWithEvent(this)) ;

}

 });

non so dov'è l'errore ma non funziona il drag e il resize, e impalla tutto lo script.
se vuoi vederlo:http://www.mondowebmaster.altervista.org/MooWindow/
dove sbaglio?
grazie 1000!

Discussione: come creare dei nuovi plug-in per mootools

Strumenti discussione

Ricerca discussione

Visualizza

come creare dei nuovi plug-in per mootools

Permessi di invio