PopUp draggabili con javascript
Scritto il 6 aprile 2006 da Maurizio PelizzoneQualche 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 …
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /* * JsPopUpBox v.0.3 * http://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") * */"""#PopUpBox""position""absolute""background-color""#ccc""top""10px""left""10px""height""250px""width""400px""z-index""100""border""1px solid #000""#PopUpBox #PopUpHead,#PopUpBox #PopUpClose""background-color""#77829f""height""18px""padding-top""2px""border-bottom""1px solid #000""font-family""verdana""color""#fff""#PopUpBox #PopUpHead""font-size""14px""text-align""left""padding-left""10px""cursor""move""width""370px""#PopUpBox #PopUpClose""font-size""16px""text-align""center""font-weight""bolder""cursor""pointer""width""20px""PopUpBox_drag"'px''''px'''//abilito l'evento onmousemove e onmouseup // esco dalla la modalità di drag //return false; "px""px"// esco dalla la modalità di drag "#PopUpBox""<div id='PopUpBox'>\n""<div class='PopUpBox_drag' style='float:left' id='PopUpHead' >""</div>\n<div style='float:right' id='PopUpClose'>x</div>\n""<div style='clear:both' id='PopUpText'></div>\n""</div>\n""""#PopUpBox #PopUpHead""#PopUpBox #PopUpClose""#PopUpBox""#PopUpBox""top""px""#PopUpBox""left""px""#PopUpBox #PopUpText""#PopUpBox" |
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.
1 | < 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 ) …
1 | $(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:
1 | JsPopUpBox( "Hello world") |
Questo è il modo più semplice, l’unico parametro fornito è il testo contentuto nella popup
1 | JsPopUpBox( "Hello world","popup titile") |
Il secondo paramentro (opzionale) permette di definire il titolo della finetra.
1 | 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 …
1 | JsPopUpBox( "Hello world").fadeIn("slow") |
Questo è il codice necessatio per gestire in simpatico effetto di dissolvenza in entrata
1 | 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
1 | "Hello world""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 …
Questo articolo è stato pubblicato il 6 aprile 2006 alle 11:59 pm ed è stato letto
Archiviato sotto sviluppo.
Se questo post ti è piaciuto puoi iscriverti al mio Feed Rss e ricevere direttamente gli aggiornamenti di questo blog sul tuo FeedReader oppure puoi decidere
di offrirmi un caffè.
Se ti va puoi lasciare un commento e leggere quelli degli altri,
ma se preferisci puoi passare direttamente al post precedente o a quello successivo.
1 giugno 2006
Ciao,
ho trovato molto interessante questo articolo e volevo gentilmente chiederti, se e come era possibile poter salvare anche la posizione della window una volta definita e posizionata, associandola all’utente che la generata, like live.com o netvibes.com.
Grazie
Pietro
4 giugno 2006
la prima cosa che mi viene in mente e salvarlo direttamente nel cookie tramite javascript creando una funzione che va eseguira dopo ogni movimento.
Questo però nel caso di pulizia dei cookie da parte del client, o cambio macchina, ci fa perdere tutte le posizioni.
Quindi anche se decisamente più complicato, una soluzione basata su autenticazione utente + ajax ci permette di salvare i dati lato server, magari organizzando un database a questo proposito.
Questa seconda strada penso sia quella adottata dai siti da te citati
23 agosto 2006
Ciao,
è possibile tramite jquery creare una Slide show con dissolvenza?
grazie
23 agosto 2006
Ho scritto un post su jquery e sui suoi plugin giunsto qualche giorno fa … ( http://maurizio.mavida.com/2006/08/21/jquery-piu-lo-uso-e-piu-mi-piace/ )
Il plugin è già bello che fatto e se non ti piace ci sono i sorgenti per personalizzartelo ….
Questi sono i link:
http://www.eyecon.ro/interface/
http://www.eyecon.ro/interface/slideshow.html
9 giugno 2010
Sembra ottimo, ma non riesco a farlo funzionare, forse perchè non riesco a fare un copia e incolla corretto del codice. Se puoi inviarmelo. Ti ringrazio.
10 giugno 2010
@Cat,
qui hai la pagina della demo…
se copi quello sono sicuro che funzionerà anche a te