Το πλαίσιο εφέ jQuery UI είναι διαμορφωμένο, όπως και το πλαίσιο widget, επιτρέποντάς σας να επιλέξετε ποια μέρη του πακέτου θέλετε να χρησιμοποιήσετε και να μειώσετε τις απαιτήσεις του κώδικα. Μπορείς δημιουργήστε μια προσαρμοσμένη λήψη για τον εαυτό σας, η οποία λαμβάνει υπόψη τις εξαρτήσεις μεταξύ των ενοτήτων.
Πριν εξετάσετε πώς να δημιουργήσετε ένα νέο εφέ, θα πρέπει να γνωρίζετε τις άλλες λειτουργίες που ήδη προσφέρει το πλαίσιο αποτελεσμάτων του jQuery UI, έτσι ώστε να μπορείτε να το χρησιμοποιήσετε κατά την ανάπτυξη των δικών σας εφέ.
Το υποκείμενο των επιμέρους ενοτήτων αποτελεσμάτων του jQuery UI είναι ένας πυρήνας κοινώς χρησιμοποιούμενης λειτουργικότητας. Αυτές οι ικανότητες εφαρμόζονται εδώ, έτσι ώστε να μην χρειάζεται να τις ανακαλύψετε ξανά και να τις εφαρμόσετε αμέσως στα δικά σας εφέ. Μαζί με την κινούμενη εικόνα χρώματος, θα βρείτε κινούμενα σχέδια από τα χαρακτηριστικά μιας κλάσης σε μια άλλη και πολλές λειτουργίες χαμηλού επιπέδου που μπορεί να είναι χρήσιμες για την ανάπτυξη νέων εφέ.
Η ενότητα Εφαρμογές Core προσθέτει προσαρμοσμένη υποστήριξη κινούμενων εικόνων για χαρακτηριστικά στυλ που περιέχουν τιμές χρώματος: χρώματα προσκηνίου και φόντου και χρώματα περιγράμματος και περίγραμμα. Το ίδιο το jQuery επιτρέπει μόνο την απεικόνιση χαρακτηριστικών που είναι απλές αριθμητικές τιμές, με έναν προαιρετικό προσδιοριστή μονάδων όπως px, em ή%. Δεν γνωρίζει πώς να ερμηνεύει πιο πολύπλοκες τιμές, όπως τα χρώματα, ή πώς να αυξάνει σωστά αυτές τις τιμές για να επιτύχει την επιθυμητή μετάβαση, όπως από το μπλε στο κόκκινο μέσω ενός ενδιάμεσου πορφυρού χρώματος.
Οι τιμές χρώματος αποτελούνται από τρία στοιχεία: τα κόκκινα, τα πράσινα και τα μπλε συμβολές, καθένα από τα οποία κυμαίνεται μεταξύ 0 και 255. Μπορούν να προσδιοριστούν σε HTML και CSS με διάφορους τρόπους, όπως αναφέρονται εδώ:
Τα κόκκινα, πράσινα και μπλε εξαρτήματα πρέπει να διαχωρίζονται και να κινούνται ξεχωριστά από τις αρχικές τους τιμές στις τελικές τους, πριν συνδυαστούν στο νέο σύνθετο χρώμα για τα ενδιάμεσα στάδια. Το jQuery UI προσθέτει βήματα κίνησης για κάθε χαρακτηριστικό που επηρεάζεται για να αποκωδικοποιήσει σωστά τα τρέχοντα και τα επιθυμητά χρώματα και να αλλάξει την τιμή καθώς τρέχει η κινούμενη εικόνα. Εκτός από τις μορφές χρώματος που περιγράφονται στην προηγούμενη λίστα, η κινούμενη κλήση μπορεί επίσης να δεχθεί μια σειρά τριών αριθμητικών τιμών (καθένα μεταξύ 0 και 255) για να καθορίσει το χρώμα. Μόλις καθοριστούν αυτές οι λειτουργίες, μπορείτε να ζωντανέψετε τα χρώματα με τον ίδιο τρόπο που θα κάνατε για άλλα αριθμητικά χαρακτηριστικά:
$('#myDiv').animate({backgroundColor: '#DDFFE8'});Το jQuery UI περιέχει μια διευρυμένη λίστα με ονόματα χρωμάτων που καταλαβαίνει, από το βασικό κόκκινο και πράσινο έως το πιο εσωτερικό darkorchid και darksalmon. Υπάρχει ακόμη και ένα διαφανές χρώμα.
Το πρότυπο jQuery σας επιτρέπει να προσθέτετε, να αφαιρείτε ή να εναλλάσσετε τάξεις σε επιλεγμένα στοιχεία. Το jQuery UI πηγαίνει ένα καλύτερο, επιτρέποντάς σας να ζωντανέψετε τη μετάβαση μεταξύ των κρατών πριν και μετά. Αυτό επιτυγχάνεται με την εξαγωγή όλων των τιμών χαρακτηριστικών που μπορούν να κινούνται (αριθμητικές τιμές και χρώματα) από τις αρχικές και τελικές διαμορφώσεις και στη συνέχεια να καλέσετε μια τυπική ζωντανή κλήση με όλες αυτές τις ιδιότητες να αλλάξουν. Αυτή η νέα κινούμενη εικόνα ενεργοποιείται καθορίζοντας μια διάρκεια όταν καλείτε τις λειτουργίες addClass, removeClass ή toggleClass:
$('#myDiv').addClass('highlight', 1000);Το jQuery UI προσθέτει επίσης μια νέα συνάρτηση switchClass, η οποία αφαιρεί μια κλάση και προσθέτει μια κλάση, με την προαιρετική μετάβαση μεταξύ των δύο καταστάσεων (όταν παρέχεται διάρκεια):
$('#myDiv').switchClass('oldClass', 'newClass', 1000);Για να υποστηρίξετε καλύτερα τις διάφορες επιδράσεις του jQuery UI, η ενότητα Core Effects Core παρέχει διάφορες λειτουργίες που είναι χρήσιμες σε αυτά τα εφέ, και ίσως μόνο στις δικές σας. Για να απεικονιστεί ο τρόπος με τον οποίο χρησιμοποιούνται πολλές από αυτές τις λειτουργίες, η ακόλουθη λίστα εμφανίζει τα σχετικά μέρη του εφέ διαφάνειας.
$.effects.effect.slide = function( o, done ) {// Create elementvar el = $( this ),props = [ "position", "top", "bottom", "left", "right", "width", "height" ],mode = $.effects.setMode( el, o.mode || "show" ), ...; // Determine mode of operation// Adjust$.effects.save( el, props ); // Save current settingsel.show();distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true );$.effects.createWrapper( el ).css({overflow: "hidden"}); // Create wrapper for animation...// Animationanimation[ ref ] = ...;// Animateel.animate( animation, {queue: false,duration: o.duration,easing: o.easing,complete: function() {if ( mode === "hide" ) {el.hide();}$.effects.restore( el, props ); // Restore original settings$.effects.removeWrapper( el ); // Remove animation wrapperdone();}});};Μπορείτε να χρησιμοποιήσετε τη λειτουργία setMode για να μετατρέψετε μια λειτουργία εναλλαγής στην κατάλληλη εμφάνιση ή την απόκρυψη της τιμής με βάση την τρέχουσα ορατότητα του στοιχείου. Αν η προβαλλόμενη λειτουργία εμφανίζεται ή αποκρύπτεται, διατηρεί την τιμή αυτή και σε αυτήν την περίπτωση είναι προεπιλεγμένη η εμφάνιση αν δεν έχει δοθεί καθόλου.
Πριν ξεκινήσετε την κινούμενη εικόνα για το εφέ, ίσως θελήσετε να χρησιμοποιήσετε τη λειτουργία αποθήκευσης για να θυμάστε τις αρχικές τιμές πολλών ιδιοτήτων (από τα ονόματα σε σκηνικά) στο στοιχείο, έτσι ώστε να μπορούν να αποκατασταθούν όταν τελειώσετε. Οι τιμές αποθηκεύονται έναντι του στοιχείου χρησιμοποιώντας τη λειτουργία δεδομένων jQuery.
Για να διευκολύνετε την κίνηση ενός στοιχείου για ένα αποτέλεσμα, μπορείτε να τυλίξετε ένα δοχείο γύρω από αυτό το στοιχείο με τη συνάρτηση createWrapper που θα χρησιμοποιηθεί ως σημείο αναφοράς για την κίνηση. Οι πληροφορίες θέσης αντιγράφονται από το καθορισμένο στοιχείο στο περιτύλιγμα, έτσι ώστε να εμφανίζεται ακριβώς επάνω στο αρχικό στοιχείο. Το στοιχείο στη συνέχεια τοποθετείται μέσα στο νέο δοχείο στο πάνω αριστερό του περίγραμμα, έτσι ώστε το συνολικό αποτέλεσμα να μην μπορεί να γίνει αντιληπτό από το χρήστη. Η συνάρτηση επιστρέφει μια αναφορά στο περιτύλιγμα.
Οποιεσδήποτε αλλαγές στις ρυθμίσεις αριστερά / δεξιά / πάνω / κάτω για το αρχικό στοιχείο θα είναι τώρα σε σχέση με την αρχική του θέση, χωρίς να επηρεάζονται τα περιβάλλοντα στοιχεία. Αφού αποθηκεύσατε προηγουμένως ορισμένες τιμές χαρακτηριστικών, θα χρησιμοποιούσατε τη λειτουργία επαναφοράς μετά την ολοκλήρωση της κινούμενης εικόνας για να τις επαναφέρετε στις αρχικές ρυθμίσεις τους. Ταυτόχρονα, θα πρέπει να αφαιρέσετε τυχόν περιτύλιγμα που δημιουργήσατε προηγουμένως με τη λειτουργία αφαίρεσης-περιτύλιξης. Αυτή η συνάρτηση επιστρέφει μια αναφορά στο περιτύλιγμα εάν αφαιρέθηκε ή στο ίδιο το στοιχείο εάν δεν υπήρχε περιτύλιγμα.
Υπάρχουν ορισμένες άλλες λειτουργίες που παρέχονται από το jQuery UI Effects Core module που μπορεί να είναι χρήσιμο:
getBaseline (προέλευση, πρωτότυπο) Αυτή η συνάρτηση ομαλοποιεί μια προδιαγραφή προέλευσης (μια διάταξη δύο στοιχείων των κατακόρυφων και οριζόντιων θέσεων) σε κλασματικές τιμές (0.0 έως 1.0) με δεδομένο ένα αρχικό μέγεθος (ένα αντικείμενο με χαρακτηριστικά ύψους και πλάτους). Μετατρέπει τις ονομαστικές θέσεις (πάνω, αριστερά, κέντρα κλπ.) Στις τιμές 0,0, 0,5 ή 1,0 και μετατρέπει τις αριθμητικές τιμές στο ποσοστό της σχετικής διάστασης. Το επιστρεφόμενο αντικείμενο έχει τα χαρακτηριστικά x και y για να κρατήσει τις κλασματικές τιμές στις αντίστοιχες διευθύνσεις. Για παράδειγμα,
var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}setTransition (στοιχείο, κατάλογος, παράγοντας, τιμή) Για να εφαρμόσετε ταυτόχρονα έναν παράγοντα κλιμάκωσης σε πολλές τιμές χαρακτηριστικών, χρησιμοποιήστε αυτήν τη λειτουργία. Για κάθε όνομα χαρακτηριστικού στη λίστα, ανακτήστε την τρέχουσα τιμή του στοιχείου και ενημερώστε τον πολλαπλασιάζοντας τον παράγοντα. Ορίστε το αποτέλεσμα στο αντικείμενο τιμής κάτω από το όνομα του χαρακτηριστικού και επιστρέψτε αυτό το αντικείμενο από τη συνάρτηση. Για παράδειγμα, για να μειώσετε τις τιμές κατά το ήμισυ, μπορείτε να το κάνετε αυτό:
el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);cssUnit (key) Για να διαχωρίσετε ένα χαρακτηρισμένο χαρακτηριστικό CSS (key) στο ποσό και τις μονάδες του (em, pt, px, ή%), που επιστρέφονται ως ένας πίνακας δύο τιμών, χρησιμοποιήστε αυτή τη λειτουργία. Εάν οι μονάδες δεν είναι ένας από αυτούς τους γνωστούς τύπους, επιστρέφεται ένας άδειος πίνακας. Για παράδειγμα,
var value = el.cssUnit('width'); // e.g. value = [200, 'px']Οι λειτουργίες που παρουσιάζονται σε αυτή την ενότητα χρησιμοποιούνται από πολλά από τα αποτελέσματα που παρέχει το jQuery UI. Αυτά τα αποτελέσματα εξετάζονται στην επόμενη ενότητα.
Πολλά εφέ παρέχονται από το jQuery UI. Τα περισσότερα από αυτά έχουν σχεδιαστεί για να ενισχύσουν τον τρόπο εμφάνισης ή εξαφάνισης ενός στοιχείου (όπως τυφλός και πτώση), ενώ άλλοι χρησιμεύουν για να προσελκύσουν την προσοχή σας σε ένα στοιχείο (όπως το highlight και το κούνημα):
Αυτά τα αποτελέσματα μπορούν να χρησιμοποιηθούν σε συνδυασμό με τις βελτιωμένες λειτουργίες εμφάνισης, απόκρυψης και εναλλαγής του jQuery UI, παρέχοντας το όνομα του επιθυμητού αποτελέσματος ως την πρώτη παράμετρο. Μπορείτε επίσης να δώσετε πρόσθετες επιλογές που αλλάζουν τη συμπεριφορά του εφέ, τη διάρκεια της κινούμενης εικόνας και μια λειτουργία επανάκλησης που ενεργοποιείται όταν ολοκληρωθεί.
$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);Στις λειτουργικές μονάδες του jQuery UI περιλαμβάνονται ορισμένες βασικές λειτουργίες χρησιμότητας, συμπεριφορές χαμηλού επιπέδου (όπως drag and drop), συστατικά ή widgets υψηλού επιπέδου (όπως Tabs and Datepicker) και πολλά οπτικά εφέ. Μπορείτε να χρησιμοποιήσετε αυτά τα εφέ για να βελτιώσετε την παρουσίαση στοιχείων στην ιστοσελίδα σας ή για να φέρετε ένα συγκεκριμένο στοιχείο στην προσοχή του χρήστη. Για να σας βοηθήσουμε να δημιουργήσετε τα δικά σας εφέ, υπάρχει ένας πυρήνας των λειτουργιών που χρησιμοποιούνται συνήθως.
Χρησιμοποιήσατε το πλαίσιο εφέ jQuery UI; Πώς συγκρίνεται με τα εγγενή CSS tweens; Ας γνωρίσουμε τις σκέψεις σας στα σχόλια.