Πέμπτη 4 Δεκεμβρίου του 2008
Κανένα σχόλιο

jQuery: Ένα παράθυρο επιβεβαίωσης

Παραμένουμε το θέμα της πρακτικής jQuery χρήσεις. Σήμερα είχα ανάγκη να γράψω ένα παράθυρο που επιβεβαιώνει την λειτουργία του πίνακα διαχείρισης. Η υπόθεση φαίνεται να είναι απλή και μπορεί να λυθεί από το θέμα, ξεχνώντας το JavaScript (Επιβεβαίωση), είτε σε PHP, αλλά η διασκέδαση βρίσκεται στο πώς να το κάνουμε αυτό, έτσι ώστε να μην προκαλούν, ακόμα και αυτό ήταν ένα πραγματικά αξιοπρεπές αποτέλεσμα;
Θα προσπαθήσω να παρουσιάσω μια λύση του δείγματος για το πρόβλημα, αν υποτεθεί ότι το στοιχείο που θέλουμε να συνοδεύεται από την επιβεβαίωση από το χρήστη, είναι ένας σύνδεσμος.

Πρώτα Δείγμα αρχείου HTML

Ξεκινάμε με ένα αρχείο στο οποίο μπορούμε να εκτελέσουμε την άθλια δοκιμές μας: 

  <DOCTYPE HTML ΔΗΜΟΣΙΑ! "- / / W3C / / DTD XHTML 1.0 Transitional / / EL" "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> διαλόγου επιβεβαίωσης </ title>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor Sit Amet, consectetur adipiscing ελίτ.  Quisque ultrices Orci quis nisl.  Aliquam σε θλίψη.  Sed quam consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris AC προτέρων ρήση aliquet.  Sapien Etiam μηδενική, consequat EGET, consequat σημείωμα, molestie id, Lectus.  Στο HAC habitasse dictumst πλατείας.  Aliquam feugiat ΩΔΕΙΟ ac Lectus.  Suspendisse egestas nisl Διάφορα.  Morbi μηδενική.  Pellentesque aliquet interdum felis.  Vestibulum Libero luctus euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla Massa nunc, γνωστός και ως eleifend, eleifend Διάφορα, Cong EGET, leo.  Vestibulum προτέρων ipsum primis σε faucibus Orci et ultrices posuere luctus cubilia Curae? <BR/> Η
 Aliquet ΟΑΠΙ, quis Γλωσσίς rutrum accumsan, Lorem Lorem velit dignissim, fermentum dignissim quam Γλωσσίς στο Γλωσσίς.  Nulla purus interdum ρήση.  Aenean ΩΔΕΙΟ.  Vestibulum pretium.  Phasellus Enimem Enimem, semper aliquet, Tempus ac, rutrum gravida, λίμπερο.  Etiam neque ΩΔΕΙΟ, blandit NEC, γνωστός και ως suscipit, Pellentesque scelerisque, leo.  Σε Metus id.  Vivamus rutrum.  Nulla π.δ.κ.α. velit.  Νησί ut purus, στο Porta, tincidunt Sit Amet, scelerisque pulvinar, sem.  Sed adipiscing Risus.  Στο Νησί.  Augustin et al.  Phasellus ullamcorper quis λάρνακα Tempus dapibus Lacus.  Εκτ. EGET Sed  Etiam TELLUS erat, adipiscing NEC, placerat sed, ultricies ένα, ORCi.  ΟΑΠΙ ac Lectus.  Curabitur π.δ.κ.α. Lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> μαικήνας </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ span>
 </ Body>
 </ Html>

Δείγμα κειμένου γεννήτρια Lorem ipsum , πήγε μέσα σε ένα σ.. Λίγο πριν από την ετικέτα κλεισίματος του σώματος, τοποθετήστε το div # επιβεβαιώσει, εντός του οποίου θα υπάρξει ένας κώδικας από το παράθυρό μας για να επιβεβαιώσετε.

Δεύτερος Το στρώμα παρουσίασης

Ας επικεντρωθούμε στο παράθυρο μας. Στην περίπτωσή μου, ο κώδικας HTML που θα είναι υπεύθυνη για ολόκληρο το παράθυρο, θα δούμε ως εξής: 

  <div id="confirm">
 <div>
 <div>
 <h1> Είστε βέβαιοι ότι θέλετε να διαγράψετε αυτό το στοιχείο; </ h1>
 <p> <button onClick="location.href='TUTAJ θα χτυπήσει το περιεχόμενο της HREF του LINKU'"> ΝΑΙ </ κουμπί> <button> ΔΕΝ </ κουμπί> </ p>
 </ Span> <-! Τέλος επιβεβαιώνουν # div div ->
 </ Span> <-! Τέλος επιβεβαιώνουν # div ->
 </ Span> <-! Τέλος # Επιβεβαίωση ->

Ο κώδικας μέσα στο # επιβεβαιώνουν, παράγεται από το JavaScript. Αλλά αξίζει να εξετάσουμε γιατί μοιάζει με αυτό και γιατί είναι στο κάτω μέρος του κώδικα της σελίδας;

Ας αρχίσουμε με τους λόγους για τους οποίους μαζί με τον κωδικό στο τέλος. Κατά τον καθορισμό της θέσης: απόλυτη, για # επιβεβαιώνουν, χωρίς z-index παράμετρος, η ακολουθία των αντικειμένων από τη θέση: απόλυτη, θα ταιριάζει με τη σειρά με την οποία δημιουργούνται από το πρόγραμμα περιήγησης. Τελευταία καταρτίζονται, θα υπάρξουν περισσότερες από μια στοίβα από στρώματα με τη θέση: απόλυτη, έτσι ώστε αν για παράδειγμα, θα έχουν τις ίδιες διαστάσεις, να συγκαλύψουν το στρώμα, το οποίο εμφανίστηκε στον κώδικα νωρίτερα.

Γιατί δεν επιβεβαιώνει το εσωτερικό, θα τοποθετούνται δύο φορές div; Για να διευκρινιστεί το σημείο αυτό είναι, απλά διαβάστε την ενότητα στο CSS κώδικα σας να τοποθετήσετε μέσα στο τμήμα head: 

  <style type="text/css">
 <! -
 * {Margin: 0px, padding: 0px?}
 σώμα {margin: 10px?}
 p {width: 600px? margin: 0 auto? γραμμή-ύψος: 25px?}

 / * ΕΠΙΒΕΒΑΙΩΣΗ * /
 # Επιβεβαίωση {display: none? Θέση: απόλυτη? Ύψος: 100%? Πλάτος: 100%? Υπόβαθρο: # 000? Κορυφή: 0? Αριστερά: 0?}
 # Επιβεβαίωση {ύψος: έκφραση (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Μέγιστη ().: document.documentElement.scrollHeight) + "px)? πλάτος: έκφραση (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, έγγραφο. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + "px)?}
 Επιβεβαίωση # [id] {θέση: σταθερό?}
 # Επιβεβαίωση div {padding: 10px? Margin-top: 200px?}
 # Επιβεβαίωση div div {background: # 900c0c? Πλάτος: 500px? Margin: 0 auto? Σύνορα: 1px solid # CCC? Υπερχείλιση: κρυμμένο?}
 # Επιβεβαίωση div div h1 {font-size: 18px? Χρώμα: # FFF?}
 # Επιβεβαίωση div div p {padding: 20px?}
 ->
 </ Span>

# Καθορίζει εδώ επιβεβαιώνουν το υπόβαθρο που θα "καλύπτει" ολόκληρη τη σελίδα. Η δεύτερη γραμμή, (το ένα με ένα παράξενο ύψος και πλάτος), είναι απαραίτητο στην περίπτωση του Internet Explorer. # Επιβεβαίωση [id] είναι κατανοητή μόνο για τα σύγχρονα προγράμματα περιήγησης, και αυτό ήταν το σχέδιο του φόντου του παραθύρου μας το μέγεθος του 100% έως 100% και τρέχει όλη την ώρα με την περιοχή (για το IE υπολογίζεται σε κάθε περίπτωση με βάση το τρέχον πλάτος και το ύψος του παραθύρου).

Το πρώτο div είναι αναγκαία για το 2ο κέντρο και να λάβει μια απόσταση από την κορυφή παράθυρο στο margin-top. Το δεύτερο div παρέχει ήδη το παράθυρό μας να επιβεβαιώνουν ότι μπορεί να επικεντρωθεί, όπως είναι μέσα σε ένα στοιχείο μπλοκ με πλάτος: 100% (τυπική τιμή για ένα στοιχείο με το display: block - το οποίο είναι ένα div)

Τρίτος Ώρα για jQuery

Παραμένει για μας να αντιδράσει κλικ στο σύνδεσμο που εμφανίζεται στο τέλος του μπλοκ P, η οποία έβαλε Lorem ipsum'a: 

  <a href="http://poslinski.net" class="confirm"> μαικήνας </ a>

Στην περίπτωσή μας, όλες οι συνδέσεις με την κατηγορία επιβεβαίωσης, θα αντιδράσουν με το σενάριο. Θα μπορούσε να εφαρμόσει την αναγνώριση μας για όλες τις συνδέσεις, για την αφαίρεση μιας τιμής από τη βάση δεδομένων.

Απαιτεί κώδικα JavaScript που βρίσκεται στο κάτω μέρος της σελίδας: 

  src = "jquery.js" <script type="text/javascript"> </ span>
 <script type="text/javascript">
 $ (Document). Έτοιμοι (λειτουργία () {
 $ (". Επιβεβαίωση"). Κάντε κλικ στο κουμπί (λειτουργία () {
 $ ("# Επιβεβαίωση")
 . CSS ({αδιαφάνεια: 0,95})
 . FadeIn ()
 . HTML («<div> <div> <h1> Ανακατεύθυνση </ h1> <p <κουμπί onClick = \" location.href = \'' + $ (αυτό). Attr ("href") + "\ "\"> Ναι </ κουμπί> <button> ΔΕΝ </ κουμπί> </ p> </ span> </ span> ')?
 επιστρέψει ψευδείς?
 })?
 . $ ("# Επιβεβαίωση") Κάντε κλικ στο κουμπί (λειτουργία () {$ (αυτό) σβήσιμο ()?.})?
 })?
 </ Script>

Η πρώτη γραμμή jQuery φορτίο.

Στη συνέχεια, ο κύριος κλάδος του κώδικα $ μας (έγγραφο). Έτοιμο, ενεργοποιήσετε τον κωδικό σας, μετά τη φόρτωση της σελίδας.

Πρέπει να απαντήσουμε σε κλικ στο στοιχείο με την κατηγορία επιβεβαιώνουν, προκαλώντας στην περίπτωση αυτή μια σειρά από μεθόδους για το στοιχείο με id = επιβεβαιώνουν. Για να αρχίσετε, προσθέστε μια διαφάνεια (αλλά ακόμα ένα στοιχείο που να εμφανίζει: κανένα), στη συνέχεια, χρησιμοποιώντας τη μέθοδο fadeIn, jQuery κινείται αδιάλειπτα από το display: none αδιαφάνειας: 0,95 (στην περίπτωσή μας). Τέλος, μέσα στο στοιχείο του # επιβεβαιώνουν, τοποθετήστε τον κώδικα html των δύο divami μας, η οποία τοποθετείται στο εσωτερικό του κουμπιού επικεφαλίδα h1 και δύο κουμπιά. Όπως ίσως, έχετε παρατηρήσει ένα από αυτά, συν το ότι έχουν δηλωθεί onClick event, το οποίο θα αντιδράσει σε μια θετική επιβεβαίωση χρήστη, τον przekierowywując στον τόπο που έδειξε κλικ σύνδεσμο.

Γιατί να επιστρέψει ψευδείς στο τέλος αυτού του μπλοκ του κώδικα; Στο πρόγραμμα περιήγησης, δεν ανακατευθύνει αυτόματα, κάνοντας κλικ στο σύνδεσμο, η λειτουργία μας πρέπει να επιστρέψει ψευδείς, αλλιώς θα ανακατευθύνει και τα παράθυρα θα πρέπει να επιβεβαιώνει τα νήματα.

Αν κάνετε κλικ οπουδήποτε αλλού σε σχέση με το κουμπί του "ΝΑΙ", χρησιμοποιήστε fadeout περίπτωση (), το μπλοκ θα εξαφανιστούν άψογα με την επιβεβαίωση μας, η οποία πραγματοποιεί $ ("# επιβεβαίωση"). Κάντε κλικ στο (...).

Ολόκληρη η γραπτή κωδικός πρέπει να δούμε κάτι σαν αυτό: 

  <DOCTYPE HTML ΔΗΜΟΣΙΑ! "- / / W3C / / DTD XHTML 1.0 Transitional / / EL" "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> διαλόγου επιβεβαίωσης </ title>
 <style type="text/css">
 <! -
 * {Margin: 0px, padding: 0px?}
 σώμα {margin: 10px?}
 p {width: 600px? margin: 0 auto? γραμμή-ύψος: 25px?}

 / * ΕΠΙΒΕΒΑΙΩΣΗ * /
 # Επιβεβαίωση {display: none? Θέση: απόλυτη? Ύψος: 100%? Πλάτος: 100%? Υπόβαθρο: # 000? Κορυφή: 0? Αριστερά: 0?}
 # Επιβεβαίωση {ύψος: έκφραση (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Μέγιστη ().: document.documentElement.scrollHeight) + "px)? πλάτος: έκφραση (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, έγγραφο. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + "px)?}
 Επιβεβαίωση # [id] {θέση: σταθερό?}
 # Επιβεβαίωση div {padding: 10px? Margin-top: 200px?}
 # Επιβεβαίωση div div {background: # 900c0c? Πλάτος: 500px? Margin: 0 auto? Σύνορα: 1px solid # CCC? Υπερχείλιση: κρυμμένο?}
 # Επιβεβαίωση div div h1 {font-size: 18px? Χρώμα: # FFF?}
 # Επιβεβαίωση div div p {padding: 20px?}
 ->
 </ Span>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor Sit Amet, consectetur adipiscing ελίτ.  Quisque ultrices Orci quis nisl.  Aliquam σε θλίψη.  Sed quam consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris AC προτέρων ρήση aliquet.  Sapien Etiam μηδενική, consequat EGET, consequat σημείωμα, molestie id, Lectus.  Στο HAC habitasse dictumst πλατείας.  Aliquam feugiat ΩΔΕΙΟ ac Lectus.  Suspendisse egestas nisl Διάφορα.  Morbi μηδενική.  Pellentesque aliquet interdum felis.  Vestibulum Libero luctus euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla Massa nunc, γνωστός και ως eleifend, eleifend Διάφορα, Cong EGET, leo.  Vestibulum προτέρων ipsum primis σε faucibus Orci et ultrices posuere luctus cubilia Curae? <BR/> Η
 Aliquet ΟΑΠΙ, quis Γλωσσίς rutrum accumsan, Lorem Lorem velit dignissim, fermentum dignissim quam Γλωσσίς στο Γλωσσίς.  Nulla purus interdum ρήση.  Aenean ΩΔΕΙΟ.  Vestibulum pretium.  Phasellus Enimem Enimem, semper aliquet, Tempus ac, rutrum gravida, λίμπερο.  Etiam neque ΩΔΕΙΟ, blandit NEC, γνωστός και ως suscipit, Pellentesque scelerisque, leo.  Σε Metus id.  Vivamus rutrum.  Nulla π.δ.κ.α. velit.  Νησί ut purus, στο Porta, tincidunt Sit Amet, scelerisque pulvinar, sem.  Sed adipiscing Risus.  Στο Νησί.  Augustin et al.  Phasellus ullamcorper quis λάρνακα Tempus dapibus Lacus.  Εκτ. EGET Sed  Etiam TELLUS erat, adipiscing NEC, placerat sed, ultricies ένα, ORCi.  ΟΑΠΙ ac Lectus.  Curabitur π.δ.κ.α. Lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> μαικήνας </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ span>
 src = "jquery.js" <script type="text/javascript"> </ span>
 <script type="text/javascript">
 $ (Document). Έτοιμοι (λειτουργία () {
 $ (". Επιβεβαίωση"). Κάντε κλικ στο κουμπί (λειτουργία () {
 $ ("# Επιβεβαίωση")
 . CSS ({αδιαφάνεια: 0,95})
 . FadeIn ()
 . HTML («<div> <div> <h1> Ανακατεύθυνση </ h1> <p <κουμπί onClick = \" location.href = \'' + $ (αυτό). Attr ("href") + "\ "\"> Ναι </ κουμπί> <button> ΔΕΝ </ κουμπί> </ p> </ span> </ span> ')?
 επιστρέψει ψευδείς?
 })?
 . $ ("# Επιβεβαίωση") Κάντε κλικ στο κουμπί (λειτουργία () {$ (αυτό) σβήσιμο ()?.})?
 })?
 </ Script>
 </ Body>
 </ Html>

Περίληψη

Εργασία παράδειγμα, μπορείτε να δείτε εδώ .

Αυτό το διάλυμα του δείγματος, δεν χρειάζονται όλες τις δυνατότητες. Μπορούμε να επεκτείνει τον κώδικα, έτσι ώστε να επηρεάσουν τη μορφή επιβεβαίωσης, θα στείλει στη συνέχεια το στοιχείο ελέγχου φόρμας, η οποία επίσης μπορεί να γίνει μέσα από το jQuery. Μπορείτε επίσης, με βάση τα παραπάνω κώδικα για να δημιουργήσετε ένα plugin για jQuery. Αισθανθείτε ελεύθερος να συζητήσει στα σχόλια σε αυτό το μήνυμα.

Να Κοινωνικότητα, Μοιραστείτε!

Σχετικές καταχωρήσεις

Κατηγορίες: jQuery
Ετικέτες: , , , ,
«
»
Μπορείτε να ακολουθήσετε οποιεσδήποτε απαντήσεις σε αυτήν την είσοδο μέσω ζωοτροφών RSS 2.0 . Μπορείτε επίσης να γράψετε τα δικά σας σχόλια , ή να συνδεθούν σε αυτήν την ανάρτηση στη σελίδα σας.
    • Obraz CAPTCHY
    Ανανέωση της εικόνας
    *

    Προστασία Spam από WP-SpamFree