Giovedi, December 4th, 2008
Non ci sono commenti

jQuery: una finestra di conferma

Restiamo oggetto di pratica jQuery usi. Oggi ho bisogno di scrivere una finestra a conferma di una operazione nel pannello di amministrazione. Il caso sembra essere semplice e può essere risolto dal soggetto, dimenticando JavaScript (Conferma) o PHP, ma il divertimento sta nel come fare questo in modo da non provocare, e anche questo era un risultato veramente decente?
Cercherò di presentare una soluzione campione al problema, partendo dal presupposto che l'elemento che vogliamo è accompagnato dalla conferma da parte dell'utente, è un link.

Prima Esempio di file HTML

Si comincia con un file su cui effettuare i nostri test vili: 

  <DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> dialogo di conferma </ title>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elite.  Quisque ultrices Orci nisl quis.  Aliquam al dolor.  Sed quam consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend MAURIS ac ante dictum aliquet.  Sapien etiam null, consequat eget, consequat vitae, molestie id, Lectus.  In HAC habitasse platea dictumst.  Aliquam feugiat odio ac Lectus.  Suspendisse egestas nisl Varius.  Morbi null.  Pellentesque aliquet interdum felis.  Vestibolo libero luctus euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla massa nunc, eleifend aka, eleifend varius, Cong eget, leo.  Vestibolo ante ipsum primis in faucibus Orci et ultrices posuere luctus cubilia curae; <br/>
 Aliquet Cras, quis ligula rutrum accumsan, lorem lorem velit dignissim, quam ligula fermentum dignissim a ligula.  Nulla dictum interdum purus.  Aenean odio.  Vestibolo pretium.  Phasellus Enimem Enimem, semper aliquet, tempus ac, rutrum Gravida, libero.  Neque etiam Odio, blandit NEC, suscipit aka, pellentesque scelerisque, leo.  In Metus id.  Vivamus rutrum.  Nulla nec velit.  Nisi ut purus, porta a, tincidunt sit amet, scelerisque pulvinar, sem.  Sed Risus adipiscing.  In Nisi.  Augustin et al.  Phasellus ullamcorper quis urn tempus dapibus Lacus.  Sed eget est  Etiam Tellus erat, adipiscing NEC, sed placerat, ultricies a, Orci.  Cras ac Lectus.  Curabitur nec Lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> Mecenate </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 </ Body>
 </ Html>

Esempio di generatore di testo Lorem ipsum , entrò in un p. Poco prima del tag body di chiusura, mettere il div # confermare, all'interno del quale ci sarà un codice dalla nostra finestra per confermare.

Secondo Il livello di presentazione

Concentriamoci sulla nostra finestra. Nel mio caso, il codice html che sarà responsabile per l'intera finestra, avrà il seguente aspetto: 

  <div id="confirm">
 <div>
 <div>
 <h1> Sei sicuro di voler cancellare questo articolo? </ h1>
 <p> <button onClick="location.href='TUTAJ colpirà i contenuti del HREF di LINKU'"> YES </ button> <button> NON </ button> </ p>
 </ Div> <! - End confermare div div # ->
 </ Div> <! - End confermare div # ->
 </ Div> <! - End # Conferma ->

Il codice all'interno della conferma #, è generato da JavaScript. Ma vale la pena considerare il motivo per cui sembra proprio così e perché è in fondo il codice della pagina?

Cominciamo con le ragioni per includere il codice alla fine. Nel determinare la posizione: assoluta, per confermare #, senza z-index parametro, la sequenza di oggetti dalla posizione: assoluta, verrà verificata l'ordine in cui vengono generati dal browser. Ultima compilazione, ci saranno più di una pila di strati con la posizione: assoluta, quindi se per esempio, avranno le stesse dimensioni, mascherare il livello, che è apparso nel codice precedente.

Perché conferma l'interno, abbiamo messo due volte un div? Per chiarire questo punto è, basta leggere la sezione nel codice css che si inserisce all'interno della sezione head: 

  <style type="text/css">
 <! -
 * {Margin: 0px, padding: 0px;}
 body {margin: 10px;}
 p {width: 600px; margin: 0 auto; line-height: 25px;}

 / * CONFIRM * /
 # Conferma {display: none; position: absolute; height: 100%; width: 100%; background: # 000; top: 0; left: 0;}
 # Conferma {height: l'espressione (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ().: document.documentElement.scrollHeight) + 'px'); width: expression (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, documento. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + 'px');}
 # Conferma [id] {position: fixed;}
 # Conferma div {padding: 10px; margin-top: 200px;}
 Div div # Conferma {background: # 900c0c; width: 500px; margin: 0 auto; border: 1px solid # CCC; overflow: hidden;}
 # Conferma div div h1 {font-size: 18px; color: # FFF;}
 # Conferma div div p {padding: 20px;}
 ->
 </ Style>

Definisce # qui confermano lo sfondo che si "coprono" l'intera pagina. La seconda linea, (quello con un'altezza strana e larghezza), è necessario nel caso di Internet Explorer. # Conferma [id] è comprensibile solo ai browser moderni, e questo era il piano per lo sfondo della nostra finestra è stata la dimensione del 100% al 100% e corre per tutto il tempo con il sito (per IE è calcolata in ogni caso sulla base della larghezza e l'altezza della finestra).

Il primo div è necessario centrare il secondo e di prendere una distanza dalla finestra superiore sul margine-top. Il secondo div fornisce già la nostra finestra per confermare che può essere centrato, in quanto si trova all'interno di un elemento di blocco con width: 100% (valore standard per un elemento con display: block - che è un div)

Terzo Tempo per jQuery

Resta per noi reagire ai clic sul link che compare alla fine del blocco P, che ha messo lorem ipsum'a: 

  <a href="http://poslinski.net" class="confirm"> Mecenate </ a>

Nel nostro caso, tutti i collegamenti con classe confermano, reagirà allo script. Si potrebbe applicare il nostro riconoscimento per tutti i link, per la rimozione di un valore dal database.

Esso richiede codice JavaScript che viene posizionato sul fondo della pagina: 

  src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Document). Ready (function () {
 $ (". Conferma"). Click (function () {
 $ ("# Conferma")
 . Css ({opacity: 0.95})
 . FadeIn ()
 . Html ('<div> <h1> Redirect </ h1> <p <pulsante onClick = \ "location.href = \'' + $ (this). Attr (" href ") +' \ '\ "> Sì </ button> <button> NON </ button> </ p> </ div> </ div>');
 return false;
 });
 . $ ("# Conferma") Clicca (function () {$ (this) FadeOut ();.});
 });
 </ Script>

La prima linea di jQuery carico.

Poi, il ramo principale del nostro codice $ (document). Ready, attivare il codice, dopo un caricamento della pagina.

Rispondiamo a fare clic sull'elemento con la classe confermano, causando in questo caso una serie di metodi per l'elemento con id = conferma. Per iniziare, aggiungere una trasparenza (ma pur sempre un elemento viene impostato su display: none), quindi utilizzando il metodo fadeIn, jQuery si muove senza soluzione di continuità dal display: none di opacità: 0,95 (nel nostro caso). Infine, all'interno dell'elemento di # confermano, caricare il codice html della nostra due divami, che è posto all'interno del pulsante intestazione h1 e due pulsanti. Come probabilmente, hanno notato uno di loro, più essi sono dichiarati evento onClick, che rispondono ad una positiva conferma da parte dell'utente, lo przekierowywując al luogo che ha mostrato link cliccato.

Perché return false alla fine di questo blocco di codice? Per il browser, non reindirizzare automaticamente, cliccando sul link, la nostra funzione deve restituire false, altrimenti reindirizzamento e finestre saranno confermando i fili.

Se si fa clic in qualsiasi altro luogo rispetto al pulsante "YES", utilizzare FadeOut eventi (), il blocco scompare senza soluzione di continuità con la nostra conferma, che realizza $ ("# conferma"). Fare clic su (...).

Tutto il codice scritto dovrebbe essere simile a questa: 

  <DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> dialogo di conferma </ title>
 <style type="text/css">
 <! -
 * {Margin: 0px, padding: 0px;}
 body {margin: 10px;}
 p {width: 600px; margin: 0 auto; line-height: 25px;}

 / * CONFIRM * /
 # Conferma {display: none; position: absolute; height: 100%; width: 100%; background: # 000; top: 0; left: 0;}
 # Conferma {height: l'espressione (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ().: document.documentElement.scrollHeight) + 'px'); width: expression (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, documento. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + 'px');}
 # Conferma [id] {position: fixed;}
 # Conferma div {padding: 10px; margin-top: 200px;}
 Div div # Conferma {background: # 900c0c; width: 500px; margin: 0 auto; border: 1px solid # CCC; overflow: hidden;}
 # Conferma div div h1 {font-size: 18px; color: # FFF;}
 # Conferma div div p {padding: 20px;}
 ->
 </ Style>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elite.  Quisque ultrices Orci nisl quis.  Aliquam al dolor.  Sed quam consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend MAURIS ac ante dictum aliquet.  Sapien etiam null, consequat eget, consequat vitae, molestie id, Lectus.  In HAC habitasse platea dictumst.  Aliquam feugiat odio ac Lectus.  Suspendisse egestas nisl Varius.  Morbi null.  Pellentesque aliquet interdum felis.  Vestibolo libero luctus euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla massa nunc, eleifend aka, eleifend varius, Cong eget, leo.  Vestibolo ante ipsum primis in faucibus Orci et ultrices posuere luctus cubilia curae; <br/>
 Aliquet Cras, quis ligula rutrum accumsan, lorem lorem velit dignissim, quam ligula fermentum dignissim a ligula.  Nulla dictum interdum purus.  Aenean odio.  Vestibolo pretium.  Phasellus Enimem Enimem, semper aliquet, tempus ac, rutrum Gravida, libero.  Neque etiam Odio, blandit NEC, suscipit aka, pellentesque scelerisque, leo.  In Metus id.  Vivamus rutrum.  Nulla nec velit.  Nisi ut purus, porta a, tincidunt sit amet, scelerisque pulvinar, sem.  Sed Risus adipiscing.  In Nisi.  Augustin et al.  Phasellus ullamcorper quis urn tempus dapibus Lacus.  Sed eget est  Etiam Tellus erat, adipiscing NEC, sed placerat, ultricies a, Orci.  Cras ac Lectus.  Curabitur nec Lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> Mecenate </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Document). Ready (function () {
 $ (". Conferma"). Click (function () {
 $ ("# Conferma")
 . Css ({opacity: 0.95})
 . FadeIn ()
 . Html ('<div> <h1> Redirect </ h1> <p <pulsante onClick = \ "location.href = \'' + $ (this). Attr (" href ") +' \ '\ "> Sì </ button> <button> NON </ button> </ p> </ div> </ div>');
 return false;
 });
 . $ ("# Conferma") Clicca (function () {$ (this) FadeOut ();.});
 });
 </ Script>
 </ Body>
 </ Html>

Riassunto

Di lavoro, ad esempio, potete vedere qui .

Questa soluzione del campione non richiede tutte le possibilità. Siamo in grado di estendere il codice in modo da influenzare il modulo di conferma, si dovrebbe quindi inviare il modulo di controllo, che può anche essere effettuate da jQuery. È anche possibile, sulla base del codice di cui sopra per creare un plugin per jQuery. Sentitevi liberi di discutere nei commenti a questo post.

Essere socievole, Share!

Voci correlate

Categorie: jquery
Tags: , , , ,
«
»
È possibile seguire tutte le risposte a questo articolo tramite il feed RSS 2.0 . Puoi anche scrivere i tuoi commenti , o per collegare a questo post sulla tua pagina.
    • Obraz CAPTCHY
    Cambia immagine
    *

    Protezione anti-spam da WP-SpamFree