Κώδικας

10 Snippets JQuery Κάθε σχεδιαστής πρέπει να ξέρει

Το jQuery χρησιμοποιείται σε χιλιάδες και χιλιάδες ιστοσελίδες. Είναι μια από τις πιο συνηθισμένες βιβλιοθήκες που εισάγονται σε σελίδες, και κάνει το DOM χειρισμό ένα snap.

Φυσικά, μέρος της δημοτικότητας του jQuery είναι η απλότητα του. Φαίνεται ότι μπορούμε να κάνουμε σχεδόν ό, τι θέλουμε με αυτή την ισχυρή βιβλιοθήκη.

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

1) Πίσω στην κορυφή κουμπί

// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});

//Create an anchor tag
Back to top

Όπως μπορείτε να δείτε χρησιμοποιώντας τις λειτουργίες animate και scrollTop στο jQuery, δεν χρειαζόμαστε plugin για να δημιουργήσετε μια απλή μετακίνηση προς την κορυφή του κινούμενου animation.

Με την αλλαγή της τιμής scrollTop μπορούμε να αλλάξουμε τη θέση στην οποία θέλουμε το scrollbar να προσγειωθεί, στην περίπτωσή μου χρησιμοποίησα τιμή 0 επειδή θέλω να πάει στην κορυφή της σελίδας μας, αλλά αν ήθελα μια αντιστάθμιση των 100px θα μπορούσα απλά πληκτρολογήστε 100px στη συνάρτηση.

Το μόνο που πραγματικά κάνουμε είναι να ζωντανέψουμε το σώμα του εγγράφου μας σε όλη τη διάρκεια των 800ms έως ότου κυλάει μέχρι την κορυφή του εγγράφου.

2) Έλεγχος αν έχουν φορτωθεί εικόνες

$(‘img’).load(function() {
console.log(‘image load successful’);
});

Μερικές φορές πρέπει να ελέγξετε αν οι εικόνες σας είναι πλήρως φορτωμένες για να συνεχίσετε με τα σενάρια σας, αυτό το απόσπασμα jQuery τριών γραμμών μπορεί να το κάνει εύκολα για εσάς.

Μπορείτε επίσης να ελέγξετε εάν έχει φορτωθεί μια συγκεκριμένη εικόνα αντικαθιστώντας την ετικέτα img με αναγνωριστικό ή κλάση.

3) Επιδιόρθωση σπασμένων εικόνων αυτόματα

$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});

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

Ακόμα κι αν δεν έχετε καθόλου σπασμένους συνδέσμους προσθέτοντας αυτό δεν κάνει κακό.

4) Εναλλαγή κατηγορίας στην αιώρηση

$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);

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

5) Απενεργοποίηση πεδίων εισαγωγής

$('input[type="submit"]').attr("disabled", true);

Ενίοτε μπορεί να θέλετε να απενεργοποιηθεί το κουμπί υποβολής μιας φόρμας ή ακόμα και μία από τις εισόδους κειμένου έως ότου ο χρήστης εκτελέσει μια συγκεκριμένη ενέργεια (για παράδειγμα, επιλέγοντας το πλαίσιο "Έχω διαβάσει τους όρους") και αυτή η γραμμή κώδικα ολοκληρώνεται ότι; προσθέτει το χαρακτηριστικό που έχει απενεργοποιηθεί στην είσοδο, ώστε να μπορείτε να το ενεργοποιήσετε όταν θέλετε.

Για να γίνει αυτό το μόνο που χρειάζεται να κάνετε είναι να εκτελέσετε τη λειτουργία removeAttr στην είσοδο με απενεργοποιημένη ως παράμετρο:

$('input[type="submit"]').removeAttr("disabled”);

6) Σταματήστε τη φόρτωση των συνδέσμων

$(‘a.no-link').click(function(e){
e.preventDefault();
});

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

7) Εναλλαγή φλας / διαφάνεια

// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});

// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});

Οι διαφάνειες και οι αποχρώσεις είναι κάτι που χρησιμοποιούμε στην αφίσα μας χρησιμοποιώντας το jQuery, μερικές φορές θέλουμε απλά να δείξουμε ένα στοιχείο όταν κάνουμε κλικ σε κάτι και γι 'αυτό οι μέθοδοι fadeIn και slideDown είναι τέλειες, αλλά αν θέλουμε αυτό το στοιχείο να εμφανίζεται στο πρώτο κλικ και τότε εξαφανίζονται στο δεύτερο αυτό το κομμάτι του κώδικα θα λειτουργήσει καλά.

8) Απλή ακορντεόν

// Close all Panels
$('#accordion').find(‘.content').hide();
// Accordion
$('#accordion').find(‘.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast’);
$(‘.content’).not(next).slideUp('fast’);
return false;
});

Με την προσθήκη αυτής της δέσμης ενεργειών, όσα πραγματικά χρειάζεστε για τη σελίδα σας είναι η απαραίτητη HTML πηγαίνετε να πάρετε αυτό το έργο.

Όπως μπορείτε να δείτε σε αυτό το απόσπασμα, έκλεισα πρώτα όλα τα πάνελ στο ακορντεόν μας και στη συνέχεια στην εκδήλωση click έκανα το περιεχόμενο που συνδέεται με την κεφαλίδα της διαφάνειας να αλλάξει και όλοι οι άλλοι να γλιστρήσουν επάνω. Είναι μια απλή μέθοδος για ένα γρήγορο ακορντεόν.

9) Κάντε δύο διαιρέσεις με το ίδιο ύψος

$(‘.div').css('min-height', $(‘.main-div').height());

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

10) Η Zebra απογύμνωσε την αόριστη λίστα

$('li:odd').css('background', '#E8E8E8’);

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

συμπέρασμα

Αυτά είναι τα κομμάτια του κώδικα jQuery που βρίσκω τον εαυτό μου χρησιμοποιώντας ξανά και ξανά στα σχέδιά μου. Ελπίζω να προσθέσετε σελιδοδείκτη σε αυτήν τη σελίδα και να επιστρέψετε κάθε φορά που χρειάζεστε ένα από αυτά τα αποσπάσματα.

Ποια αποσπάσματα jQuery βασίζεστε; Έχετε καλύτερο κώδικα για αυτά τα σενάρια; Ενημερώστε μας στα σχόλια.

Προτεινόμενη εικόνα / μικρογραφία, χρήσιμη εικόνα μέσω Shutterstock.

jquery jquery αποσπάσματα αρχάριος jquery μάθετε jquery χρήσιμη jquery