mooSelector

» Progetti » Mootools plugins

 

Panoramica

mooSelector è una classe mootools che permette di selezionare più elementi di una pagina web tramite il classico strumento di selezione utilizzato anche dai sistemi operativi, purché questi elementi abbiano nel nome della classe anche la seguente stringa: selected not. Una volta selezionati, il nome della loro classe cambierà in selected yes e così facendo è possibile modificare dinamicamente i loro attributi css. In oltre è possibile passare in ingresso a questa classe mootools anche una funzione con la quale sarà possibile modificare dinamicamente, tramite javascript, tutti gli elementi selezionati.

Sintassi

HTML

<div id="container">
	<div class="selected a not">cell 1</div>
</div>

Nella pagina html è necessario inserire un div con un id settato, dove nell’esempio è stato settato il nome ‘container’ anche se si può utilizzare qualsiasi altro nome, l’importante è che venga passato successivamente nei parametri d’ingresso della classe mooSelector. Ricordo che gli elementi che si desidera selezionare devono avere nel nome della classe la stringa “selected not”.

JavaScript

var ms = new mooSelector({
	containerID:'container',
	onSelection: function(),
	{
		var aSelected= this .selectedElements;
	}
});

Params

  • containerID: l’id del div contenitore. Default value:   null.
  • onSelection: è possibile passare in ingresso alla classe una funzione specificata dall’utente. L’utente, grazie all’array aSelected che contiene tutti gli elementi selezionati, potrà interagire con quest’ultimi come meglio preferisce. Nell’esempio allegato scandirò tutti gli elementi selezionati, riprendendone il testo ed inserendolo in una stringa d’output che verrà stampata in un div presente all’inizio della pagina. Questo parametro può anche non essere inserito.

CSS

::selection {
	  background: transparent
}
::-moz-selection {
	background: transparent;
}
#selector{
	  width: 1px;
	  height:1px;
	  background-color:#94c3e0;
	  border:1px solid blue;
	  opacity:0.5;
	  position:absolute;
	  z-index:50;
}
.selected.not{
}
.selected.yes{
}

Le prime sei righe sono necessarie per evitare che durante la selezione vengano evidenziati inutilmente anche testo ed altri elementi della pagina html. Quest’ultimo è un fenomeno molto fastidioso per quanto riguarda i browser basati su WebKit.
Dalla riga 07 alla riga 15 avremo i css necessari per modellare il div che servirà per selezionare gli elementi desiderati.
In .selected.not potranno essere inserite le specifiche css da settare prima che l’elemento venga selezionato, invece in .selected.yes potranno essere inserite le specifiche css da settare dopo le l’elemento è stato selezionato.

Note

La classe è stata testata con Firefox 3.5, Chrome 4.0, Safari 4, Opera 9 e Internet Explorer 8.

Qui trovi un demo base dove è possibile selezionare alcuni div presenti in una table.

Per suggerimenti e bug report lascia un commento qui.