Yahoo! User Interface Blog (YUIBlog)

Στο Yui 3 Gallery: Η ενότητα Carousel

Τι είναι το Carousel;

Ένα στοιχείο ελέγχου Carousel παρέχει ένα widget για την περιήγηση ανάμεσα σε ένα σύνολο αντικειμένων που προσομοιάζουν με παρατάσσονται κάθετα ή οριζόντια σε μια υπερφορτωμένη περιοχή της σελίδας. Το "γαϊτανάκι" μεταφορά προέρχεται από μια αναλογία με διαφάνεια καρουσέλ, στις ημέρες της φωτογραφίας ταινία? Το Carousel έλεγχος μπορεί να διατηρήσει την πιστότητα με την παρούσα μεταφορά, επιτρέποντας τη συνεχή, κυκλική πλοήγηση μέσω όλων των μπλοκ περιεχομένου.

Το Carousel είναι μέρος μιας οικογένειας των widgets που σας επιτρέπουν να "υπερφόρτωση" ένα χώρο στη σελίδα, που παρέχει περισσότερο περιεχόμενο για το διάστημα από ό, τι ταιριάζει στο εσωτερικό του διαστάσεις, ενώ παρέχει έναν εύκολο και έξυπνο μηχανισμό για τον χρήστη να ανακαλύψει και να περιηγηθείτε στο πρόσθετο περιεχόμενο . Ακορντεόν, Tabs, δέντρα και ScrollViews είναι άλλα παραδείγματα αυτού του είδους.

Γιατί ακόμη Carousel τον έλεγχο;

Yui 3 χρειάζεται ένα ισχυρό, πλούσιο σε χαρακτηριστικά Carousel (όπως έχουμε σε Yui 2 ). Ο σχεδιαστικός στόχος για αυτό το Carousel ήταν να καταστεί και καθαρούς και να προσθέσετε επιπλέον διαμορφώσεις μέσω plugins, εκμεταλλευόμενοι Yui 3 ' s εγγενή υποστήριξη για σπονδυλωτής να διατηρήσει την ελαφρότητα και την ταχύτητα.

Yui 3 Widget Πλαίσιο

Ένα από τα μεγαλύτερα πλεονεκτήματα της γραφής custom widgets χρησιμοποιώντας Yui 3 είναι το πλαίσιο Widget (περισσότερα σχετικά με το πλαίσιο Widget: οδηγός χρήσης , σε βάθος εισαγωγή βίντεο ). Συγκρίνοντας το Carousel στο Yui 2.8.2 να μου Yui 3 Gallery Carousel , το Yui 3 έκδοση είναι λιτή και κομψή. Αυτό οφείλεται στο γεγονός ότι τα περισσότερα από τα βαριά ανύψωση σε σχέση με την παροχή του ιδρύματος που παρέχει κοινό σύνολο χαρακτηριστικών widget, μια πειθαρχημένη κύκλου ζωής, προοδευτική υποστήριξη ενίσχυση, κλπ. έρθει με την τάξη Widget.

Η Yui 3 Πλαίσιο Widget παρέχει επίσης ένα σταθερό μοτίβο MVC που προωθεί κάθε widget να υιοθετήσουν διαχωρισμό των μεθόδων κατάσταση σε σχέση με UI μεθόδους ενημέρωσης. Το γεγονός αυτό καθιστά τον κωδικό πολύ καθαρή και διατηρήσιμη. Στην πραγματικότητα αυτό είναι ένας από τους σημαντικότερους παράγοντες για τους οποίους η Yui 3 Carousel είναι καλύτερη από την προηγούμενη Yui 2-με βάση τον ξάδελφό του.

Η Yui 3 Plugin μοντέλο επιτρέπει στους προγραμματιστές να προσθέτουν νέες λειτουργίες ή την τροποποίηση των υφιστάμενων συμπεριφορά σε αντικείμενα. Αυτό επιτρέπει την προσθήκη επιπλέον λειτουργικότητα στο πάνω μέρος του Carousel να τραβήξει δυναμικά στοιχεία μέσω Ajax, κλπ. Έτσι, η Yui 3 Carousel δεν έχει κωδικό animation ψημένο σε αυτό, αλλά έχω δημιουργήσει ένα plugin που προσθέτει υποστήριξη animation για τις περιπτώσεις όπου αυτό είναι αναγκαίο . Αυτό βοηθά να κρατήσει το στοιχείο είναι πολύ ελαφρύ.

Μια Carousel Gallery για τη δική σας ιστοσελίδα

Μετά την ανάγνωση για το τι Carousel είναι και πώς μπορεί να σας βοηθήσει να βελτιώσουμε την ιστοσελίδα σας, ελπίζουμε ότι αισθάνονται πρόθυμοι να πάρετε τα χέρια σας βρώμικα. Μην ανησυχείτε, με Yui 3 επέκταση Gallery μας Carousel, εφαρμόζοντας ένα ιπποδρόμιο στην ιστοσελίδα σας είναι τόσο εύκολη όσο παρέχοντας μια λίστα με κουκκίδες σε μορφή HTML. Αυτό δεν είναι απλά μια διαφήμιση - αυτό είναι το πώς θα ενσωματωθεί πρόσφατα Carousel Gallery στο Sports Yahoo! σελίδα αποτελεσμάτων αναζήτησης.

Ένα απλό παράδειγμα

Ας ξεκινήσουμε με ένα απλό παράδειγμα που θα καλύπτει σχεδόν όλα όσα χρειάζεται να ξέρετε. Ο ευκολότερος τρόπος για σας να χρησιμοποιήσετε το νέο Carousel Gallery είναι να αφήσουμε Yui 3 Τοποθετήστε το automagically από το δίκτυο διανομής περιεχομένου της Yahoo. Υπενθυμίζοντας τι Carousel είναι μια κυλιόμενη λίστα των αντικειμένων, δημιουργούμε μια λίστα σε μορφή HTML. Θα περιλαμβάνει τον κατάλογο σε ένα div, το οποίο επιτρέπει το JavaScript για να μας βρείτε εύκολα και να εργαστούν με αυτό. Αν έχετε ήδη κάποια στοιχεία που απεικονίζονται σε μια λίστα-όπως τρόπο με τον markup σας, μπορείτε επίσης απλά βάλτε το καρουσέλ div γύρω από αυτό και να δοκιμάσετε την τύχη σας! Είναι πολύ σημαντικό να πούμε ότι, αν και είμαστε χρησιμοποιώντας ένα παράδειγμα της εικόνας εδώ, μπορείτε να χρησιμοποιήσετε το Carousel Gallery για οτιδήποτε θέλετε!

  <div class="carousel" id="container">
   <ol>
     <li> <img src="img/c1.jpg"> </ li>
     <li> <img src="img/c2.jpg"> </ li>
     <li> <img src="img/c3.jpg"> </ li>
     <li> <img src="img/c4.jpg"> </ li>
     <li> <img src="img/c5.jpg"> </ li>
     </ Ol>
 </ P> 

Τώρα που έχουμε τα στοιχεία μας για να δουλέψει, θέλουμε να ενισχύσουμε τα βλέμματα με την παρουσίαση των πέντε στοιχείων με τη χρήση του widget Carousel. Υποθέτοντας ότι χρησιμοποιείτε ήδη Yui 3 Η παρούσα είναι απλή υπόθεση. Το μόνο πράγμα που μπορεί να μην έχει δει ποτέ πριν, ανάλογα με το πόσο βαθιά θα έχουν σκάψιμο σε Yui 3 και το Gallery και στο παρελθόν, είναι ότι καθορίζουμε μια έκδοση Γκαλερί ρητά. Αυτό είναι απαραίτητο επειδή είμαστε χρησιμοποιώντας ένα ολοκαίνουργιο widget, το οποίο δεν είναι όπως στην Πινακοθήκη χτίσει ότι φορτωτή Yui του προσπαθεί να φορτώσει από από προεπιλογή. Ωστόσο, όπως Yui και Yui Gallery ώριμη, αυτό δεν θα είναι απαραίτητο πια στο μέλλον, όταν το προεπιλεγμένο αριθμό build, αυξάνονται.

  Yui ({gallery: «gallery-2010.10.20-19-33 '})
  . Χρήσης ("gallery-carousel", "gallery-carousel-anim", "υποκατάστατο", λειτουργία (Y) {
   var καρουσέλ = νέα Γ. Carousel ({boundingBox: "# δοχείο»,
    contentBox: "# δοχείο> ol"})?
   carousel.plug (Γ. CarouselAnimPlugin, {animation: {ταχύτητα: 0.7}})?
   carousel.render ()?
 })? 

(Με την ευκαιρία, αν σας ενδιαφέρει να πάρει καινούργια πράγματα που μπορείτε να επισκεφθείτε την Yui αποθετήριο Γκαλερί 3 σε github ή πιρούνι Gopal του , όπου αναπτύσσει Carousel. Αν βρείτε κάποιο bug, είμαστε πάντα ευτυχείς να ακούσουμε γι 'αυτό.)

Επιστροφή στο παράδειγμά μας ... Yui θα πάρει από εδώ. Ο φορτωτής τραβά αυτόματα Gallery Carousel και της εξάρτησής της από το δίκτυο διανομής περιεχομένου της Yahoo. Μετά από αυτό, το Carousel τις οποίες ξεκινά και εμφανίζεται. Ο χρήστης μπορεί στη συνέχεια κάντε κλικ στο αριστερό ή δεξί βέλος για να μετακινηθείτε γύρω. Σε παρακαλώ συγχώρεσέ με για την άσκηση σε μια σειρά από περιττή πολυπλοκότητα, αλλά εγώ δεν μπορούσα να αντισταθώ. Θα χρησιμοποιηθεί Y.CarouselAnimPlugin να αφήσει διαφάνεια καρουζέλ μας ομαλά από τη μία σελίδα στην άλλη και όχι μόνο την εμφάνιση της επόμενης σελίδας αμέσως. Αισθανθείτε ελεύθερος να παίξει με την παράμετρο ταχύτητα αν το επιθυμείτε.

Όπως μπορείτε να δείτε από το screenshot ανωτέρω, το Carousel είναι σε πλήρη λειτουργία. Ωστόσο, η CSS μπορεί να μην ταιριάζει πολύ καλά στο υπόλοιπο της σελίδας σας. Αυτό μας οδηγεί στην επόμενη ενότητα μας, όπου θα συζητήσουμε για το πώς να προσαρμόσετε Carousel Gallery.

Προσαρμογή Gallery Carousel

Τώρα που έχετε Carousel σας οργανωθεί και να λειτουργήσει και επεσήμανε μια περίπτωση χρήσης για την ιστοσελίδα σας, ελπίζουμε ότι θέλετε να το ενσωματώσει ομαλά. Όπως αναφέρθηκε προηγουμένως, το κάναμε για Αθλητισμός αποτελέσματα μας σελίδας. Εάν θέλετε να αυξήσετε τον αριθμό των ορατών αντικειμένων, για παράδειγμα, 3-4, μπορείτε να το κάνετε τροποποιώντας τη γραμμή που instantiates Carousel.

  var καρουσέλ = νέα Γ. Carousel ({boundingBox: "# δοχείο»,
  contentBox: "# δοχείο> ol», numVisible: 4})? 

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

  . Yui 3-carousel {
   σύνορα:! κανένα σημαντικό?
 }
 . Yui 3-καρουσέλ-nav {
   υπόβαθρο:! κανένα σημαντικό?
 }
 . Carousel ol li {
   σύνορα:! κανένα σημαντικό?
 } 

Τώρα, που φαίνεται καλύτερα. Έχω χρησιμοποιήσει επίσης αρνητικό περιθώριο να μειωθεί το χάσμα μεταξύ των Carousel μου και τον τίτλο. Ωστόσο, δεν είναι ακόμη εντελώς εκεί. Υποθέτω ότι και εσείς θέλετε να χρησιμοποιήσετε το δικό σας προσαρμοσμένα κουμπιά, τα οποία ενσωματώνουν ωραία σε διάταξη σελίδας σας. Για αυτό το παράδειγμα θα χρησιμοποιήσουμε τα ίδια κουμπιά που χρησιμοποιούνται και στις σελίδες αποτελεσμάτων αναζήτησης της Yahoo. Αυτό απαιτεί λίγο περισσότερο, αλλά και πάλι απλό, CSS.

  . Yui 3-καρουσέλ-κουμπί {
   υπόβαθρο: url ("sprite_button.png") δεν-επαναλαμβάνω κύλισης 0 0 διαφανή σημαντικό?!
   ύψος: 20px σημαντικό? πλάτος:! 28px σημαντικό?
 }
 . Yui 3-καρουσέλ-nav-στοιχείο {
   υπόβαθρο: url ("sprite_button.png") δεν-επαναλαμβάνω κύλισης 0 0 διαφανή σημαντικό?!
   υπόβαθρο-θέση: 133px-0 σημαντικό?!
 }
 . Yui 3-καρουσέλ-first-κουμπί {
   υπόβαθρο-θέση:-90px 0 σημαντικό?!
   περιθώριο δεξιά:! 35px σημαντικό?
 }
 . Yui 3-καρουσέλ-first-κουμπί-με ειδικές ανάγκες {
   υπόβαθρο-θέση:-60px 0 σημαντικό?!
   περιθώριο δεξιά:! 35px σημαντικό?
 }
 . Yui 3-καρουσέλ της διπλανής κουμπί {
   υπόβαθρο-θέση:-30px 0 σημαντικό?!
 }
 . Yui 3-καρουσέλ-κουμπί-με ειδικές ανάγκες {
   υπόβαθρο-θέση: 0 0 σημαντικό?!
 }
 . Yui 3-καρουσέλ-nav-στοιχείο-επιλεγμένο {
   υπόβαθρο-θέση: 121px-0 σημαντικό?!
 } 

Θα το αφήσουμε να που για σήμερα και ελπίζουμε να νιώσετε έτοιμοι να ξεκινήσετε. Τουλάχιστον αυτό ήταν το μόνο που χρειαζόμασταν. Ωστόσο, ανάλογα με το πόσο μεγάλο είναι το site σας και πώς τα ενδιαφερόμενα είστε στην απόδοσή της, υπάρχουν γενικές σκέψεις σχετικά με την τοποθέτηση κάτι από μια τρίτη δίκτυο περιεχομένου παράδοσης κόμμα που ισχύουν και εδώ. Για παράδειγμα, Sidnei ντα Σίλβα που κάποιες ενδιαφέρουσες σκέψεις σε ένα blog post νωρίτερα αυτό το μήνα. Θα χαρούμε να παράσχει μια Πώς να που εξηγεί πώς ένας Yui widget και τις εξαρτήσεις της, μπορεί να μετακινηθεί σε δική σας ιστοσελίδα, ή ακόμα και το περιεχόμενο του δικτύου διανομής, έτσι ώστε να είναι σε θέση να διατηρηθεί ο αριθμός των αιτήσεων HTTP όσο το δυνατόν χαμηλότερα. Ενημερώστε μας αν σας ενδιαφέρει, ανυπομονούμε να τα σχόλιά σας!

Περισσότερα θέματα στην Πινακοθήκη

Η εξαιρετική ομάδα του Εντουάρντο Lundgren και Nate Cavanaugh του Liferay έχουν ένα ιπποδρόμιο συνιστώσα στην Πινακοθήκη καθώς και - σίγουρα αξίζει τον έλεγχο έξω εάν είστε στην αγορά για τέτοιου είδους έλεγχο.

Εύρεση συζητήσεις: Bloglines | technorati

Μοιραστείτε και να επεκτείνει: Σελιδοδείκτης με Del.icio.us | Digg it! | reddit!