JQuery βιβλιοθήκη: ρυθμιστικά για την ιστοσελίδα σας

Με το πέρασμα του χρόνου και την εξέλιξη της τεχνολογίας στον τομέα του web design αλλάζουν και οι ανάγκες / απαιτήσεις των χρηστών σε ιστότοπους περιεχομένου. Εάν νωρίτερα ήταν ως επί το πλείστον το περιεχόμενο του κειμένου με ένα μικρό αριθμό θεματικών εικόνων, σήμερα είναι το κυρίαρχο στοιχείο του γραφικού. Σας επιτρέπει να πάρετε γρήγορα τις πιο απαραίτητες και χρήσιμες πληροφορίες, και μην χάνετε χρόνο διαβάζοντας μεγάλα κείμενα. Σε σχέση με αυτό το ολοένα και πιο δημοφιλής και, στην πραγματικότητα, ένα απαραίτητο στοιχείο μιας ιστοσελίδας είναι ρυθμιστικά. Πρόκειται για τμήματα με διαφορετικό περιεχόμενο σε αυτά - από τις εικόνες για να τις συνδέσεις. Ένας σύγχρονος τρόπος για να προσθέσετε ένα συγκεκριμένο αντικείμενο web - χρησιμοποιώντας τη βιβλιοθήκη JQuery. Ρυθμιστικά που δημιουργήθηκε με αυτό το εργαλείο, να πάρει ένα άνετο, εύκολο στη χρήση, και φαίνεται πολύ εντυπωσιακό. Στη συνέχεια θα δούμε πώς να κάνει αυτά τα στοιχεία των ιστοσελίδων στις δικές τους. Χάρη σε ένα αρκετά μεγάλο αριθμό τυποποιημένων εργαλείων, είναι δυνατόν να εφαρμοστεί το ρυθμιστικό τύπου JQuery και ποικίλο περιεχόμενο.

Πώς να προσθέσετε ένα ρυθμιστικό σε μια ιστοσελίδα;

Τρόποι για να προσθέσετε ένα slide-μπλοκ στη σελίδα αριθμό. Συχνά δεν χρειάζεται καν να γράψετε HTML κώδικα και σκαλίζω το σενάριο. Υπάρχει ένας σημαντικός αριθμός των ελεύθερων βιβλιοθηκών, προσφέροντας στους χρήστες μια έτοιμα templates που σας επιτρέπουν να προσθέσετε JQuery-ρυθμιστικά στο χώρο σας. Το μόνο που έχετε να κάνετε - είναι να το αντιγράψετε στον πηγαίο κώδικα της ιστοσελίδας σας και να απολαύσετε τα αποτελέσματα. Ωστόσο, στην περίπτωση αυτή η δυνατότητα υλοποίησης της δημιουργικής φαντασίας σας είναι περιορισμένος. Ως εκ τούτου, είναι χρήσιμο να είναι σε θέση να δημιουργήσει το στοιχείο του σχεδιασμού ανεξάρτητα. Για να το κάνετε αυτό, θα πρέπει να γνωρίζετε πώς να εφαρμόσουν το JQuery απλό ρυθμιστικό, και να περιπλέξει μόνο, μπορείτε πάντα να προσθέσετε επιπλέον στοιχεία στον κώδικα.

Δημιουργήστε ένα ρυθμιστικό από τον εαυτό σας: στον κώδικα HTML

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

1. Ιδρύθηκε το μονάδας HTML αρχείο παρουσίασης, το οποίο θα περιέχει όλες τις διαφάνειες μας (εικόνες, κλπ).
2. Βάζει ul λίστα, κάθε σημείο της οποίας θα αποθηκεύσει ένα ξεχωριστό διαφάνεια.

Δουλεύουμε με CSS

Στη συνέχεια, θα ισχύει γι 'αυτό τα χαρακτηριστικά του επιθυμητού στυλ με CSS εγγράφου. Είναι αναγκαίο να επιβληθεί το περιεχόμενό μας ρυθμιστικό JQuery για να λειτουργήσει σωστά και είχε τη σωστή εμφάνιση. Σε αυτό το στάδιο, βρισκόμαστε αντιμέτωποι με τα ακόλουθα καθήκοντα:

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

Για να το κάνετε αυτό, ρυθμίστε τις ακόλουθες επιλογές στο CSS-αρχείο:

• για την Slideshow: υπερχείλισης-x - κύλιση, υπερχείλιση-y - hidden:
• για ul: float - αριστερά.

Επίσης, μπορείτε να ρυθμίσετε τις παραμέτρους του πλάτους (πλάτος), ύψος (ύψος), το υπόβαθρο (φόντο) και ούτω καθεξής.

Βάζουμε αυτόν τον κώδικα στο JQuery

Οι HTML και CSS όλες οι απαραίτητες αλλαγές έχουν γίνει. Εξακολουθεί να ισχύει για τον κωδικό JQuery, ρυθμιστικά, τα οποία θα πρέπει να έχει τις ακόλουθες παραμέτρους:

• Διαφάνειες πρέπει να διαδέχονται ο ένας τον άλλο με ένα ορισμένο χρονικό διάστημα?
• όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τη μετακίνησή τους πρέπει να σταματήσει.

Για να γίνει αυτό, δηλώνουμε δύο μεταβλητές: slidewidth (ίσο με το μήκος του slide) και slidertime (καθορίζει το χρονικό διάστημα της προβολής διαφανειών). Το χρονόμετρο θα αρχίσει όταν η σελίδα είναι πλήρως φορτωμένο site. Με αυτή την παράμετρο δένουμε τη δράση της κατάδειξης δείκτη του ποντικιού σε μια διαφάνεια (η οποία σταματά την προβολή διαφανειών).

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

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

συμπέρασμα

Σε αυτό το άρθρο εξετάσαμε πώς να δημιουργήσουν το δικό τους JQuery-ρυθμιστικά για να εισάγετε μια σελίδα της ιστοσελίδας της. Χρησιμοποιώντας το παράδειγμα ενός απλού slider, μπορείτε να έρθετε επάνω με τη δική τους ερμηνεία του, κάνοντας τις κατάλληλες αλλαγές στον πηγαίο κώδικα. Αυτό θα βελτιώσει το σχεδιασμό και να κάνουν χρήση του site σας πιο βολικό για τους επισκέπτες.