Το spoiler είναι ένα βολικό εργαλείο για τον ιστότοπο. Χρησιμοποιείται ευρέως σε διάφορα φόρουμ και ιστολόγια, επιτρέποντας στον χρήστη να αποκρύψει ένα συγκεκριμένο στοιχείο τη στιγμή που πατάτε ένα κουμπί. Επιπλέον, το spoiler φαίνεται καλό στον ιστότοπο και βοηθά στην απόκρυψη των τμημάτων που υπερφορτώνουν άσκοπα τη σελίδα.
Είναι απαραίτητο
Βιβλιοθήκη Jquery
Οδηγίες
Βήμα 1
Το spoiler μπορεί να εφαρμοστεί χρησιμοποιώντας τη δημοφιλή βιβλιοθήκη jquery plug-in γραμμένη στη γλώσσα προγραμματισμού Java Script. Χρησιμοποιείται για την εφαρμογή πλήρους αλληλεπίδρασης της γλώσσας προγραμματισμού με τον κώδικα σήμανσης HTML της σελίδας. Η σύνδεση jquery γίνεται χρησιμοποιώντας HTML χρησιμοποιώντας την ετικέτα . Πρέπει να καθορίσετε την τοποθεσία στην οποία βρίσκεται το σενάριο και να ορίσετε τον τύπο του: $ (έγγραφο). Ήδη (συνάρτηση ()
Βήμα 2
Το θραύσμα κειμένου που καθορίζεται σε μια συγκεκριμένη παράγραφο πρέπει να περικλείεται σε ένα ξεχωριστό στρώμα - ένα div, με τη βοήθεια του οποίου θα ελέγχεται το ίδιο το spoiler: Η Sasha περπατούσε κατά μήκος της εθνικής οδού και έπιπε το στέγνωμα.
Βήμα 3
Στη συνέχεια, πρέπει να δημιουργήσετε μπροστά από όλα τα div με το όνομα spoil αντίστοιχα κουμπιά που θα καταρρεύσουν και θα επεκτείνουν το κείμενο. Πρώτον, το ίδιο το spoiler κρύβεται χρησιμοποιώντας την τυπική συνάρτηση "hide ()" $ ("div [name = 'spoil']"). Απόκρυψη (); Στη συνέχεια, πρέπει να δημιουργήσετε ένα κείμενο και μια εικόνα για όλα τα spoiler, που θα χρησιμοποιηθεί ως φόντο για τα κουμπιά: $ ("P [name = 'spoilbutton']"). HTML ("Εμφάνιση κειμένου");
Βήμα 4
Βρείτε όλα τα κουμπιά στη σελίδα και ελέγξτε τις επικεφαλίδες πρώτου επιπέδου μπροστά από το κουμπί. Για να το κάνετε αυτό, δημιουργήστε μια συνθήκη που θα αναζητά ετικέτες h1 με το όνομα. Το καθορισμένο κείμενο τίτλου τυλίγεται στο ίδιο το div: $ ("p [name = 'spoilbutton']"). Κάθε (συνάρτηση () {If ($ (this).prev (this).get (0).tagName == "H1") {Var NewSpoilButton = " + $ (this).prev (this).html () + "Show text"; $ (this).prev (this).replaceWith ("); $ (this).replaceWith (NewSpoilButton);}})
Βήμα 5
Στη συνέχεια, πρέπει να χειριστείτε το κλικ του κουμπιού του ποντικιού με κλικ. Εάν εντοπιστεί ένα κλικ, μπορεί να εμφανιστεί: $ ("div [name = 'spoilbutton']"). Κάντε κλικ στο (function () {If ($ (this).next (this).css ("display") = = "Αποκλεισμός") {
Βήμα 6
Στη συνέχεια γράψτε κληρονομιά. Μέσα σε ένα div, το κείμενο βρίσκεται στην παράγραφο p, το περιεχόμενο του οποίου τοποθετείται σε μια ετικέτα span: $ (this).children ("p"). Children ("span"). HTML ("Εμφάνιση κειμένου"); Σύμπτυξη ανοιχτή αεροτομή. Εάν δεν είναι ανοιχτό, αναπτύξτε το κείμενο. Αυτό το βήμα βασίζεται στον κανόνα κληρονομιάς: $ (this).next (this).slideUp ("normal");} other {$ (this).children ("p"). Children ("span"). Html ("Απόκρυψη κειμένου"); $ (this).next (this).slideDown ("normal");} επιστροφή false })
Βήμα 7
Στη συνέχεια, καταγράφεται το πολύ κλικ του ποντικιού στο κουμπί, με το οποίο το σενάριο θα κρύψει και θα ξεδιπλώσει το spoiler. $ ("P [name = 'spoilbutton']"). Κάντε κλικ στο (συνάρτηση () {If ($ (this).next (this).css ("display") = "block") {$ (this).next (this).slideUp ("normal"); $ (this).html ("Hide");} επιστροφή false;}); Spoiler ready. Θα εμφανιστεί όταν βρεθεί ένα αντίστοιχο μπλοκ DIV.
