Δημιουργία ελεγκτή έντασης με ρυθμιστικό jQuery UI

Εάν είστε κυνηγός freebies, πιθανόν έχετε κατεβάσει πολλές διασυνδέσεις χρήστη του PSD (UI). Ορισμένες από αυτές είναι πραγματικά εκπληκτικές και θα μπορούσαν να εξοικονομήσουν χρόνο μας με πρωτότυπο σχεδιασμό στο οποίο εργαζόμαστε.

Σε αυτή τη θέση θα κωδικοποιήσουμε ένα PSD UI και θα το μετατρέψουμε σε κάτι πιο λειτουργικό. Πρόκειται να κωδικοποιήσουμε το ακόλουθο ρυθμιστικό UI του PSD που θα εφαρμοστεί ως θέμα jQuery UI Slider.

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

Εντάξει, τώρα ας ξεκινήσουμε.

Βήμα 1: το jQuery UI

Προφανώς χρειαζόμαστε τη βιβλιοθήκη jQuery και jQuery UI και έχουμε δύο επιλογές για να τις χρησιμοποιήσουμε. Πρώτον, μπορούμε να συνδέσουμε το jQuery και το jQuery UI απευθείας από τα ακόλουθα CDN: Google Ajax API CDN, Microsoft CDN και jQuery CDN, υπάρχουν πολλά πλεονεκτήματα από τη χρήση του φιλοξενούμενου αρχείου CDN όταν τοποθετούμε το site μας ζωντανά online.

Δεδομένου όμως ότι θα εργαστούμε μόνο σε αυτό εκτός σύνδεσης, θα χρησιμοποιήσουμε το δεύτερος τρόπο αντ 'αυτού.

Θα πραγματοποιήσουμε λήψη και προσαρμογή της βιβλιοθήκης του jQuery UI από την επίσημη σελίδα λήψης. Καθώς χρειαζόμαστε μόνο το plugin Slider, θα επιλέξουμε μόνο τη βιβλιοθήκη Slider μαζί με τις εξαρτήσεις και θα αφήσουμε τους υπόλοιπους. Με αυτόν τον τρόπο τα αρχεία που χρησιμοποιούμε είναι πολύ πιο αδύνατα και μπορούν να φορτωθούν γρηγορότερα. Στη συνέχεια, συνδέστε όλες αυτές τις βιβλιοθήκες στο έγγραφο HTML, κατά προτίμηση στο κάτω μέρος της σελίδας ή πριν κλείσετε ετικέτα να είναι ακριβής.

Βήμα 2: Σημείωση HTML

Η σήμανση για το ρυθμιστικό είναι πολύ απλή, έχουμε τυλίξει όλα τα απαραίτητα σήματα - το εργαλείο, το ρυθμιστικό και τον όγκο - μέσα σε μια HTML5 Ενότητα ετικέτα. Το jQuery UI θα δημιουργήσει αυτόματα το υπόλοιπο.

Βήμα 3: Εγκαταστήστε το UI του Slider

Το απόσπασμα που ακολουθεί θα εγκαταστήσει το ρυθμιστικό στη σελίδα, αλλά εφαρμόζει μόνο την προεπιλεγμένη διαμόρφωση.

 $ (λειτουργία () $ ("#slider") .slider ();); 

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

Αρχικά, αποθηκεύουμε το στοιχείο του ρυθμιστικού ως μεταβλητή.

 var slider = $ ('slider'), 

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

 slider.slider (εύρος: "min", τιμή: 35,); 

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

Βήμα 4: Τα Στυλ

Πριν προχωρήσουμε, χρειαζόμαστε κάποια στοιχεία από το αρχείο πηγής PSD, όπως την υφή του φόντου και το εικονίδιο.

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

• Μετατροπή σχεδίου από PSD σε HTML - Nettuts+

Εντάξει, τώρα ας αρχίσουμε να προσθέτουμε τα στυλ.

Αρχίζουμε τοποθετώντας το ρυθμιστικό στο κέντρο του παραθύρου του προγράμματος περιήγησης και προσαρμόζουμε το φόντο που είχαμε αποκόψει από το PSD στο σώμα.

 σώμα background: url ('... /images/bg.jpg') επαναλάβω πάνω αριστερά;  τμήμα width: 150px; ύψος: auto; περιθώριο: 100px αυτόματο 0; θέση: σχετική.  

Στη συνέχεια, θα εφαρμόσουμε τα στυλ για το εργαλείο, η ένταση, το χερούλι, το ρυθμιστικό εύρος και το ολισθητής εαυτό.

Θα κάνουμε αυτό το μέρος με το μέρος, ξεκινώντας από ...

Ολισθητής

Δεδομένου ότι δεν καθορίσαμε τη μέγιστη τιμή για το ίδιο το Slider, το jQuery UI θα εφαρμόσει την προεπιλογή. αυτό είναι 100. Ως εκ τούτου, μπορούμε επίσης να εφαρμόσουμε 100 (px) για το ρυθμιστικό πλάτος.

 #slider border-width: 1px; μεθοδικό στυλ: συμπαγές; Χρώμα περιγράμματος: # 333 # 333 # 777 # 333; ακτίνα-ακτίνα: 25px; πλάτος: 100px; θέση: απόλυτη; ύψος: 13px; φόντο-χρώμα: # 8e8d8d; background: url ('... /images/bg-track.png') επαναλάβετε πάνω αριστερά; box-shadow: ένθετο 0 1px 5px 0px rgba (0, 0, 0, .5), 0 1px 0 0px rgba (250, 250, 250, .5); αριστερά: 20px;  

Ετικέτα εργαλείου

Η συμβουλή εργαλείου θα τοποθετηθεί πάνω από τον ολισθητήρα καθορίζοντας τον θέση με -25px για την πρώτη θέση.

 .επεξήγηση εργαλείου θέση: απόλυτη; εμφάνιση: μπλοκ? κορυφή: -25px; πλάτος: 35px; ύψος: 20px; χρώμα: #fff; κείμενο-ευθυγράμμιση: κέντρο; γραμματοσειρά: 10pt Tahoma, Arial, sans-serif; ακτίνα ακτίνων: 3px; σύνορα: 1px στερεά # 333; σκιά κουτιού: 1px 1px 2px 0px rgba (0, 0, 0, .3); μέγεθος κιβωτίου: πλαίσιο-πλαίσιο? υπόβαθρο: γραμμική κλίση (κορυφή, rgba (69,72,77,0,5) 0%, rgba (0,0,0,0,5) 100%).  

Ενταση ΗΧΟΥ

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

 .ένταση εμφάνιση: inline-block; πλάτος: 25px; ύψος: 25px; δεξιά: -5px; φόντο: διεύθυνση url ('... /images/volume.png') no-repeat 0 -50px; θέση: απόλυτη; περιθώριο-κορυφή: -5px;  

Η λαβή UI

Το ύφος της λαβής είναι αρκετά απλό. θα έχει μια εικόνα που μοιάζει με μεταλλικό κύκλο, τεμαχισμένο από το PSD και προσαρτημένο ως φόντο.

Επίσης, θα αλλάξουμε τη λειτουργία του κέρσορα σε δείκτης, έτσι ο χρήστης θα παρατηρήσει ότι αυτό το στοιχείο είναι drag-able.

 .ui-slider-λαβή θέση: απόλυτη; z-δείκτης: 2; πλάτος: 25px; ύψος: 25px; δρομέας: δείκτης; Ιστορικό: url ('... /images/handle.png') δεν επαναλαμβάνεται 50% 50%; γραμματοσειρά-βάρος: έντονα. χρώμα: # 1C94C4; περίγραμμα: κανένας. κορυφή: -7px; περιθώριο-αριστερά: -12px;  

Το εύρος ρυθμιστικών τιμών

Το εύρος του ρυθμιστή θα έχει ένα ελαφρώς λευκό χρώμα κλίσης.

 .ui-slider-range φόντο: γραμμική κλίση (κορυφή, #ffffff 0%, # eaeaea 100%); θέση: απόλυτη; σύνορα: 0; αρχή: 0; ύψος: 100%. ακτίνα-ακτίνα: 25px;  

Βήμα 5: Το αποτέλεσμα

Σε αυτό το βήμα θα αρχίσουμε να εργαζόμαστε για το ειδικό αποτέλεσμα του Slider.

Ετικέτα εργαλείου

Σε αυτό το σημείο, το tooltip δεν έχει ακόμα περιεχόμενο, οπότε πρόκειται να το γεμίσουμε με την αξία του ρυθμιστή. Επίσης, η οριζόντια θέση του εργαλείου θα αντιστοιχεί στη θέση της λαβής.

Καταρχήν, αποθηκεύουμε το στοιχείο εργαλείου ως μεταβλητή.

 var tooltip = $ ('tooltip'); 

Στη συνέχεια, ορίζουμε το αποτέλεσμα του εργαλείου που έχουμε αναφέρει παραπάνω στο Event Slide.

 slide: λειτουργία (συμβάν, ui) var value = slider.slider ('αξία'), tooltip.css ('αριστερά', τιμή) .text (ui.value); 

Αλλά, θέλουμε επίσης να κρυφτεί αρχικά το εργαλείο.

 tooltip.hide (); 

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

 αρχή: λειτουργία (συμβάν, ui) tooltip.fadeIn ('γρήγορο'); , 

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

 stop: λειτουργία (συμβάν, ui) tooltip.fadeOut ('γρήγορο'); , 

Ενταση ΗΧΟΥ

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

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

 όγκος = $ ('. όγκος'); 

Στη συνέχεια ξεκινάμε την υπό όρους δήλωση.

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

 αν (τιμή <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ; 

Βάλτε τα όλα μαζί

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

 $ slider.slider (εύρος: "min", min: 1, τιμή: $ (slider) 35, εκκίνηση: λειτουργία (συμβάν, ui) tooltip.fadeIn ('γρήγορο'), slide: συνάρτηση (συμβάν, ui) var value = slider.slider '), tooltip.css (' αριστερά ', τιμή) .text (ui.value), αν (τιμή <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ; , stop: function(event,ui)  tooltip.fadeOut('fast'); , ); ); 

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

• Διαδήλωση
• Λήψη πηγής

συμπέρασμα

Σήμερα έχουμε δημιουργήσει με επιτυχία ένα πιο κομψό θέμα jQuery UI, αλλά ταυτόχρονα έχουμε μεταφράσει με επιτυχία ένα PSD User Interface σε έναν λειτουργικό ελεγκτή όγκου.

Ελπίζουμε ότι αυτό το σεμινάριο θα σας εμπνεύσει και θα σας βοηθούσε να καταλάβετε πώς να μετατρέψετε ένα PSD σε ένα πιο χρήσιμο προϊόν.

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