PopUp draggabili con javascript

Qualche giorno fa avevo la necessità di creare una finestra draggabile via javascript, dove il contenuto potesse essere definito/ridefinito a runtime.

Anche se Edit in passato aveva pubblicato qualcosa di simile, le mie necessità spaziavano del caricare contenuti da file esterni ( aka ahah ) al generali con javascript e dom, inoltre avevo bisogno di definire le coordinate di partenza per poi modificarle in relazione ad altri eventi.

Insomma … “chi fa da se fa per tre” , “meglio soli che mal accompagnati” , “aiutati che il ciel ti aiuta”

Dopo aver meditato su queste perle di saggezza popolare ho scritto qualche riga di codice …


function JsPopUpBox(sHtml,sTitle,nTop,nLeft) {
/*
* JsPopUpBox v.0.3
* https://maurizio.mavida.com/
* based on great jQuery - http://jquery.com/
* Use:
*
*** direct mode ***
*
* >only popup body without title
*JsPopUpBox( "Hello world")
*
* body e title
*JsPopUpBox( "Hello world","popup titile")
*
* set top and left position
*JsPopUpBox( "Hello world","popup titl",10,10)
*
*** jquery mode ***
*var objpopup = JsPopUpBox( "Hello world" , "title")
*objpopup.css("top","50px")
*objpopup.css("left","50px")
*objpopup.fadeIn("slow")
*
*/
var aPopup = new Array("");

Questo è il link per vederla in azione

Per facilitarmi il compito ho usato come base jquery, una libreria che per certi apetti si avvicina come idea a prototype e che per quanto mi riguarda è diventata quasi indispensabile.

Quindi per il corretto funzionamento della popup ricordiamoci di aggiungere questa riga alla nostra pagina.
< s c r i p t type="text/javascript" src="http://jquery.com/src/latest/"> //< / s c r i p t >
( attenzione agli s p a z i )

Per mia scelta i css sono definiti inline direttamente da codice in modo da evitare l’ennesivo css allegato alla pagina e permettere un più rapida personalizzazione.

All’interno del codice oltre alla sezione di generazione della finestra ( che in realtà è costituito da un semplice append ) …
$(document.body).append( aPopup.join("") )
… sono presenti le funzioni necessarie all’implementazione del drag che sono stata inserite all’interno con l’obbiettivo di rendere la librerie il più compatta possibile

Ma vediamo alcuni esempi di utilizzo:

JsPopUpBox( "Hello world")
Questo è il modo più semplice, l’unico parametro fornito è il testo contentuto nella popup

JsPopUpBox( "Hello world","popup titile")
Il secondo paramentro (opzionale) permette di definire il titolo della finetra.

JsPopUpBox( "Hello world","popup titl",10,10)
Infine se vogliamo specificare la posizione della finestra è possibile specificare altri due parametri che definiscono rispettivamente le coordinate top e left

ma come dicevo prima ho utilizzato come framework jquery che permette alcune magie molto divertenti …

JsPopUpBox( "Hello world").fadeIn("slow")
Questo è il codice necessatio per gestire in simpatico effetto di dissolvenza in entrata

JsPopUpBox( "Loading ...").find("#PopUpText").load("esempio.html")
in questo modo invece visualizziamo la scritta “Loading … ” sino a che tramite ajax/ahah la pagina esempio.html non è stata carica ed il suo contenuto inserito all’interno della nostra finistra


var obox = JsPopUpBox( "Hello world");
obox.css({"top": "30px","left":"70px"});


infine per modificare a runtime la posizione della finistra è sufficente definire una variabile alla quale far riferimento nel momento un cui ridefinire alcune proprietà dei css.

commenti, suggerimenti e segnalazione di bachi sono ben accetti …