mooPanel

» Progetti » Mootools plugins

Panoramica

mooPanel è una  classe mootools che permette di creare dei pannelli javascript con all’interno qualsiasi contenuto e che hanno la possibilità di essere draggati, di avere un’ombra e di avere una o più istanze.
Inoltre è presente la gestione dello zindex per riportare le finestre selezionate in primo piano.
Si possono inoltre definire delle funzioni e associarle agli eventi del pannello, come la creazione, la chiusura, il drag,il drop etc etc…

Sono presenti 4 diversi effetti di default, che possono essere utilizzati per aprire e chiudere i pannelli.

Sintassi

HTML

Il pannello,di default, non necessita di codice html.

E’ necessario utilizzare dell’html solo se si utilizza l’effetto zindex.

In questo caso infatti è necessario inserire nell’html della pagina un div che rappresenta la posizione iniziale da cui partirà l’effetto:

<div id="start_zindex" style="top:100px;left:100px;position:absolute;"></div>

Se invece volessimo che il nostro pannello venga istanziato dopo un qualche evento(ad esempio dopo aver cliccato su un bottone), allora è necessario inserire nell’html della pagina anche il relativo elemento(che fa partire l’evento) e una funzione associata all’evento che appunto istanzia il pannello.

Qualora istanziamo il pannello direttamente(cioè non dopo un evento) allora il pannello verrà caricato insieme alla pagina.

JavaScript

Il codice JavaScript necessario per il funzionamento è rappresentato solo dalle righe necessarie a istanziare il pannello.

var child = new Element('div',
{html: "Esempio mooPanel con ombra, drag attivato, con una sola
istanza ed effetto verticale"
});//il contenuto del pannello
var panel = new mooPanel({
elementFire:{
element: this //elemento che scatena l'evento di creazione
//del pannello},
panel:{
width:400,//larghezza del pannello
height:300,//altezza del pannello
top: 50,//posizione top del pannello, rispetto all'elemento
//che scatena l'evento
left: 50//posizione left del pannello, rispetto all'elemento
//che scatena l'evento
},
topPanel:{
title: 'Singleton!!!'//titolo del pannello
},
drag:{
container: $$('body')[0]//contenitore oltre il quale non
//è possibile draggare il pannello
},
singleton : true,//consenti solo istanza singola
draggable : true,//consenti drag and drop
effectChoosed:'folder',//scegli effetto di apertura e chiusura
shadow: true,//consenti ombra
elementToAppend: child,//appendi l'elemento sopra creato
singletonFocus: 'bottone2'//stringa che identifica quel
//particolare pannello
});

Qualora volessimo che il nostro pannello venga creato(ad esempio) dopo aver cliccato su un bottone, dobbiamo aggiungere il codice qui sopra all’interno di una funzione, che verrà associata all’evento click del bottone. Supponendo di avere nell’html il seguente bottone:

<input type='button' id='butt_clicca1' value='Clicca'/>

allora dovremo aggiungere il codice dell’esempio riportato sopra all’interno di questa funzione:

$('butt_clicca1').addEvent('click', function(){
//inserisci qui il codice dell'esempio precedente
});

Se usiamo l’effetto zindex, elementFire deve essere l’elemento div con id “start_zindex”, che abbiamo definito all’inizio di questa pagina. Come già detto, questo elemento rappresenterà il punto di partenza dell’animazione.

var child = new Element('div', {
html: 'Esempio di mooPanel senza ombra, drag disattivato,
una sola istanza ed effetto zindex.'});
var panel = new mooPanel({
elementFire:{
element: $('start_zindex')
},
panel:{
width:400,
height:300,
top: 100,
left: 200
},
topPanel:{
title: 'Effect zIndex!!!'
},
drag:{
container: $$('body')[0]
},
singleton : true,
draggable : false,
effectChoosed:'zindex',
shadow: false,
elementToAppend: child,
singletonFocus: 'bottone3'
});

Params

  • elementFire: L’opzione settabile di questo parametro è ‘element‘ e  rappresenta l’elemento che scatena l’evento, cioè che istanzia il pannello.
    Le coordinate assegnate al pannello saranno relative a questo elemento.
    Se si vogliono relative alla pagina in generale è possibile assegnare a questo elemento il body, tramite $$(‘body’)[0].
  • panel: Rappresenta l’elemento pannello.
    Di questo elemento è possibile specificare:
    ‘id‘: Se si vuole assegnare un id al pannello.
    ‘width‘: Larghezza del pannello che verrà utilizzata per creare l’effetto.
    ‘height‘: Altezza del pannello che verrà utilizzata per creare l’effetto.
    ‘top‘: La coordinata top che avrà il pannello, come detto prima rispetto ad elementFire.
    ‘left‘: La coordinata left che avrà il pannello, sempre rispetto ad elementFire.
  • topPanel: Rappresenta l’elemento top del pannello, quello dove sono presenti il titolo e il pulsante per la chiusura.
    Si possono specificare:
    ‘title‘: Una stringa che verrà assegnata come titolo del pannello.
    ‘id‘: Se si vuole specificare un id che verrà assegnato alla parte top del pannello.
  • drag: E’ un parametro che riguarda solo il drag and drop.
    Di questo parametro è possibile specificare l’elemento ‘container‘ che rappresenta l’elemento oltre il quale non sarà possibile effettuare il drag and drop del pannello.
    Supponendo ad esempio che sia possibile effettuare il drag and drop solo all’interno del body, a questo elemento container deve essere passato il body.
  • singleton: Può essere o true o false.
    Se impostato a false significa che quel pannello può avere molte istanze; se invece viene impostato a true allora sarà permessa, per quel pannello, una sola istanza e qualsiasi volta che si prova a istanziarne una nuova, con la prima istanza ancora aperta, verrà fatto lampeggiare il pannello.
  • draggable: Può essere true o false.
    Rappresenta la possibilità di avere o meno il drag and drop al pannello.
  • effectChoosed:  E’ una stringa che rappresenta l’effetto scelto per la chiusura e l’apertura del pannello.
    In questo momento può assumere solo 4 valori, che sono i 4 effetti adesso disponibili di default:
    ‘opacity‘:  Un semplice effetto opacità.
    ‘folder‘: Un effetto di apertura prima orizzontale e poi verticale.
    ‘folderHor‘: Un effetto di apertura prima verticale e poi orizzontale.
    ‘zindex‘ : Un effetto di apertura del pannello, che lo fa spostare dalla posizione stabilita tramite un elemento HTML (praticamente il div con id ’start_zindex’  degli esempi precedenti) alla posizione stabilita tramite left e top dell’elemento pannello. Come già detto questo div ’start_zindex’ deve essere passato come element di elementFire.
  • shadow: Può essere o true o false.
    Rappresenta la possibilità di abilitare o disabilitare l’ombra del pannello.
  • elementToAppend: Rappresenta l’elemento HTML che verrà inserito all’interno del pannello.
    E’ possibile inserire qualsiasi contenuto.
    In questa pagina saranno presto presenti due guide che spiegheranno come creare elementi HMTL tramite mootools e come andare a recuperare un file HTML tramite AJAX, sempre con l’aiuto di mootools.
  • singletonFocus: E’ una stringa che rappresenta un identificatore per quel particolare pannello.
    Potete assegnargli qualsiasi valore l’importante è che non assegnate mai tra pannelli diversi valori identici.
    Ad esempio se all’interno di una stessa pagina con un bottone volete creare un pannello avente una sola istanza, e con un altro bottone un altro pannello sempre avente una sola istanza, questa stringa servirà per identificare i due pannelli, che, se pur uguali nelle funzionalità, sono però due pannelli diversi.
  • oninitialize:E’ una funzione richiamata all’inizializzazione del pannello.
  • oncreatepanel: Funzione richiamata appena si stà creando il pannello.
  • oncreateeffect: Funzione richiamata prima di iniziare l’effetto di apertura del pannello.
  • oncompleteeffect: Funzione richiamata appena terminato l’effetto del pannello.
  • onpaintpanel: Funzione richiamata prima di creare l’HTML corrispondente al pannello.
  • onpaintedpanel: Funzione richiamata appena creato l’HTML corrispondente al pannello.
  • onremovepanel: Funzione richiamata appena chiuso il pannello.
  • ondrag: Funzione richiamata mentre “si dragga” il pannello.
  • ondrop: Funzione richiamata mentre “si droppa” il pannello.

CSS

La parte CSS riguardante il pannello sono solo impostazioni generali dei css, come stili del pannello e degli elementi del pannello, stili del testo e tutte altre impostazioni standard dei CSS.
L’unica precisazione importante da fare è che per gli esempi forniti si è scelta una dimensione del pannello pari a 400 px X 300 px; essendo ad esempio il background del pannello un’immagine alta 400px, se cambiate l’altezza del pannello dovete modificare anche l’altezza dell’immagine, o in alternativa assegnarli tramite CSS un’altra immagine(o semplicemente un colore in modo da renderlo indipendente a qualsiasi variazione di dimensioni).
Ovviamente tutte queste impostazioni sono modificabili tramite CSS e piu precisamente tramite le classi assegnate al pannello.

.EQEPApanel/*classe CSS assegnata al pannello */
{
overflow: hidden;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
border-top: 1px solid ;
border-left: 1px solid ;
border-bottom: 1px solid ;
border-right: 1px solid ;
border-color: black;
}
.EQEPApanelDrag/*classe css del pannello mentre si sta effettuando un drag*/
{
overflow: hidden;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
border-left: 1px solid ;
border-bottom: 1px solid ;
border-right: 1px solid ;
border-color: black;
border-top: 1px solid;
}
.EQEPApanelShadow/* classe CSS dell'ombra */
{
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
border-bottom: solid grey 2px;
border-right: solid grey 2px;
border-left: solid grey 2px;
background: url('bck_mooPanel.png') repeat-y bottom center #353030;
}
.EQEPApanelContainer/*classe dell'elemento contenitore del pannello,
che contiene tutto il suo contenuto*/
{
background: transparent url(content_mooPanel.png) top left repeat-x ;
width: 100%;
height: 100%;
color: white;
font-family: Verdana;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
}
.EQEPApanelContainerDrag/*classe del container mentre si sta draggando il pannello */
{
background: url(drag_mooPanel.png) repeat-x left center;
opacity: 0.7;
width: 100%;
height: 100%;
font-family: Verdana;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
}
.EQEPApanelTopPanel/*classe della parte top del pannello, dove
si trova il titolo e il pulsante per chiudere*/
{
text-align:center;
height:35px;
font-family: Verdana;
overflow:hidden;
background: #E5E5E5;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
cursor:move;
padding-bottom: 10px;
border-bottom: 1px dotted black;
}
.EQEPApanelTopPanelDrag /*classe della parte top del pannello mentre
si sta draggando il pannello */
{
text-align:center;
height:35px;
font-family: Verdana;
overflow:hidden;
background: url(drag_mooPanel.png) repeat-x left center;
opacity: 0.7;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
cursor:move;
}
.EQEPApanelTitle/* classe css applicata al titolo del pannello*/
{
font-size: 13pt;
color: #6e6d6d;
font-weight:bold;
position:relative;
display: inline;
top:30%;
}
.EQEPApanelClose/* classe css applicata alla sezione relativa alla chiusura del pannello */
{
background: transparent url(close_mooPanel.png) center no-repeat ;
width: 24px;
height: 24px;
position: absolute ;
right: 5px;
top: 5px;
cursor:pointer;
}
.EQEPApanelContent/* classe del content del pannello, dove verrà appeso il contenuto */
{
padding-top: 20px;
padding-left: 15px;
padding-right: 10px;
}

Note

La classe è stata testata con Firefox 3.5, Chrome 4.0,Internet Explorer 7 e Internet Explorer 8.
Per suggerimenti,bug report,lasciare un commento(sempre molto graditi ;-) ) e scaricare il materiale vai qui. :-)

In Arrivo

In arrivo, dalle prossime versioni, diverse caratteristiche:

  • Personalizzare gli effetti di default presenti in mooPanel
  • Creare dei propri effetti e utilizzarli per aprire e chiudere il pannello
  • Utilizzare AJAX per recuperare il contenuto HTML del pannello da un file esterno