Puoi creare alcune cose davvero belle usando jQuery. L'ultima versione del pacchetto aggiorna molti bug e anche suggerimenti per il supporto di un nuovo jQuery Mobile. Con lo scripting frontend puoi creare praticamente qualsiasi tipo di applicazione web. Ma più specificamente vedremo come costruire una piccola finestra modale.
Ho progettato la funzionalità per apparire come una soluzione di messaggistica privata. Questo è perfetto per implementare su una pagina del profilo utente o la pagina dell'autore in un blog. Utilizzeremo alcune pratiche tecniche CSS3 e codificheremo la struttura della pagina in HTML5. Non è necessario essere un maestro artista jQuery per capire questo tutorial, ma non sarebbe male ripassare le basi. Guarda il mio esempio demo live e scarica il codice sorgente del progetto qui sotto.
Provalo
Visualizza la demo live - Scarica fonte
La struttura HTML
Prima di immergerci in jQuery esaminiamo prima un po 'di HTML. Se sei interessato a esaminare l'intero layout del documento ti suggerisco di scaricare dal codice sorgente. Ma mi piacerebbe concentrarmi sul codice HTML modale per ulteriori spiegazioni.
Ho diviso il modello usando HTML5 .containmsg che contiene la nostra casella modale e il pulsante per mostrare / nascondere il contenuto. Il contenitore modale utilizza la classe .mainCompose. Questo è anche il nostro obiettivo in jQuery: diamo un'occhiata al codice HTML per questo di seguito.
** Inserisci del testo!
Invia messaggio
All'interno del nostro elemento di forma non ci sono sorprese. Una piccola etichetta e campo di messaggio di input. Anche a: campo con un link alla pagina dell'utente. In questa demo mi sono collegato alla mia pagina autore di DesignShack. Non è richiesto, però. Si potrebbe anche rimuovere del tutto il collegamento e mantenere intatti gli stili CSS. L'elenco degli utenti è codificato come elemento UL in modo da poter supportare la messaggistica su più di una persona.
Ora prima di immergerci in jQuery c'è un'altra tecnica che volevo coprire. Se fai clic sull'icona componi, noterai che la nostra casella modale ha una piccola punta triangolare in alto. Potresti usare le immagini per questa tecnica, ma esiste un'alternativa più semplice usando rigorosamente CSS.
Fantastici triangoli CSS Tooltip
C'è un piccolo div che appare direttamente sopra il modulo del messaggio. Questo contiene due classi etichettate calloutUp e calloutUp2. Il primo si comporta come una continuazione del nostro confine esterno (l'abbronzatura più scura) mentre quest'ultimo si collega al centro della nostra area di forma. Usando entrambi possiamo creare triangoli di corrispondenza in un connettore stile tooltip.
Questo funziona a causa di un'impostazione nel CSS che fa sì che tutti i bordi si uniscano al centro come un triangolo. Quindi possiamo impostare che entrambi questi div non abbiano altezza o larghezza, ma bordi enormi. Se diamo solo colore a uno dei bordi e il resto è trasparente creiamo l'effetto triangolo visto qui. Controlla le classi CSS per entrambi i callout.
Sto anche impostando i dettagli per i bordi circostanti perché questo mantiene il blocco div in posizione quadrata. Altrimenti la nostra forma diventerebbe rettangolare, e quindi i nostri triangoli sarebbero usciti sbilenchi con bordi frastagliati. Il z-index la proprietà è anche importante in modo che la nostra punta interna rimanga sopra la punta esterna. Gli altri stili sono usati per simulare i nostri font nell'esempio demo, certamente niente di straordinario.
Sviluppo di interazioni con jQuery
Ora possiamo approfondire le cose buone! Se hai usato jQuery prima probabilmente avrai familiarità con l'avvio di un nuovo documento. Prima di tutto inserisci l'ultima versione di jQuery nella tua pagina. Se non desideri scaricare e ospitare tu stesso il file Google offre tutte le versioni di jQuery live per gli sviluppatori. L'ultima che sto usando è la libreria 1.6.2 mini.
Una volta incluso, dovresti aprire un altro tag script per JavaScripting. Ho deciso di scrivere il mio codice all'interno del blocco principale della stessa pagina HTML. In alternativa, puoi spostarlo sul corpo, sul piè di pagina o persino su un file esterno. I primi frammenti di codice che ho aggiunto di seguito.
Chiamiamo il nostro $ (Document) .ready () funzione per bloccare qualsiasi azione fino al termine del caricamento della pagina. Il primo compito è quello di nascondere subito 3 elementi di pagina. Questi sono .mainCompose per nascondere la nostra casella modale, .loader nascondere la gif caricamento Ajax, e #errortxt che viene visualizzato solo se l'utente non ha inserito nulla e tenta di inviare il modulo. Ciascuno di questi elementi verrà visualizzato solo in determinate condizioni, quindi è meglio tenerli nascosti immediatamente.
E infine la nostra prima azione di scripting sta controllando un gestore di eventi click. Il .comporre la classe è in realtà legata alla nostra immagine di composizione anche se non è stato fatto clic su un collegamento di ancoraggio. jQuery può gestire gli eventi click e chiamare slideToggle () in entrambi i casi. Ora l'ultimo pezzetto di codice da esaminare è il modo in cui possiamo estrarre i dati dall'input dell'utente.
Elaborazione del modulo modale
Stiamo controllando solo un altro gestore di eventi finale. Questo è legato all'evento click del nostro .sendbtn, che in realtà è legato a un link di ancoraggio nella nostra casella modale.Direttamente accanto a questa è la nostra immagine animata ajax .gif che è stata nascosta subito dopo il caricamento della pagina.
La funzione di esecuzione subito dopo che il nostro pulsante è clic ha ora un parametro. Funzione (e) passa semplicemente l'istanza del nostro evento click direttamente nella funzione come variabile. Usiamo questo selettore di eventi per chiamare il metodo preventDefault () in modo che il nostro link non si comporti come un link. Nascondiamo immediatamente anche il file .sendbtn e lo sostituiamo con la nostra immagine .loader.
Successivamente passiamo in una clausola standard if / else che controlla il #mymsg valore textarea. Se questo non contiene testo, sappiamo che l'utente non ha inserito nulla. In questo caso visualizziamo il nostro messaggio di errore e nascondiamo l'immagine di caricamento mentre visualizziamo di nuovo il nostro pulsante. Altrimenti entriamo nel altro{ } clausola che presuppone che possiamo inviare il messaggio!
Non ho scritto alcun codice Ajax / PHP poiché salta fuori dalla portata di questo tutorial. Ma dovresti controllare la funzione jQuery ajax () che può velocizzare lo sviluppo del backend di dieci volte. Ho messo da parte una variabile formQueryString che può essere utilizzato per passare i dati del modulo in una chiamata Ajax. Invece sto solo finendo l'estetica in una piccola funzione finalSend ();
Quello che vogliamo fare ora è chiudere la nostra casella modale e visualizzare una piccola icona di controllo per far sapere all'utente che tutto va bene e dandy. Ho usato .delay () per mantenere la casella modale aperta per 1 secondo prima di chiamare il nostro metodo finale slideToggle (). Questo è stato aggiunto esclusivamente per le apparenze in questo tutorial in modo da poter vedere come appare in attesa del caricamento del server. Se vuoi mantenere i tuoi utenti in attesa di un secondo in più puoi lasciare questo - ma non serve a nulla in caso contrario!
Dopo l'animazione della diapositiva ho aggiunto una funzione di callback. Include solo 2 righe di codice base. Per prima cosa miriamo all'icona di composizione e cambiamo la sua classe da .comporre a .inviato, quindi nascondilo alla vista. Finalmente bersaglio #composebtn che è il contenitore div della nostra icona e aggiungere una nuova icona di spunta. Ora i nostri utenti sanno che il messaggio è stato inviato e abbiamo usato a malapena qualsiasi spazio sullo schermo!
Visualizza la demo live - Scarica fonte
Conclusione
Questo tutorial ti avrebbe permesso di creare un box modale scalabile in jQuery. Abbiamo creato alcuni fantastici stili CSS e utilizzato alcune elaborazioni di base per migliorare l'interazione dell'utente. C'è sicuramente molto da aggiungere, ma il nostro esempio pone la struttura del terreno e apre la strada a maggiori possibilità.
Se stai ancora cercando di controllare la mia demo o scaricare il codice sorgente, puoi farlo di seguito. Leggere il codice può creare confusione dopo lunghi periodi di tempo, quindi consiglio di scaricare direttamente la fonte per avere un'idea migliore di come funzioni questa piccola app. Allo stesso modo se avete domande o idee potete offrirle nell'area di discussione.